Uncaught (in promise) DOMException: The play() request was interrupted by a new

一、异常错误

WebRTC 是一种用于实时通信的开放式标准,可以让您通过浏览器进行视频和音频通信。使用 WebRTC 技术可以让您实现低延迟的视频通信,从而解决摄像头延迟的问题。

在使用 HTML5 音频或视频时,有时会遇到 DOMException 错误,错误信息为 The play() request was interrupted by a new load request. 这个错误通常发生在当你试图在一个媒体文件正在加载的时候播放另一个媒体文件时。

html 复制代码
mse-controller.js:110 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

二、原因

解决这个问题的方法很简单,只需要在播放新的媒体文件之前,先停止当前正在播放的媒体文件,等待当前正在加载的媒体文件加载完成,再播放新的媒体文件即可。

另外,在刷新摄像头请求时,如果没有清理旧的定时器,会导致多个定时器同时在运行,最终导致页面卡住。为了解决这个问题,可以将定时器的 ID 存储在一个全局变量中,然后在每次刷新请求时,先清理旧的定时器,再创建新的定时器。

改变之前的代码如下:

java 复制代码
function register() {
        $.ajax({
            url: '/dev-api/system/config/configKey/camera.request.ip',
            beforeSend: function (request) {
                request.setRequestHeader("Authorization", "Bearer " + getCookie("Admin-Token"));
            },
            success: (res) => {
                console.log(res);
                $.ajax({
                    url: `http://${res.msg}:800/index/api/addStreamProxy`,
                    data: {
                        "secret": `035c73f7-bb6b-4889-a715-d9eb2d1925cc`,
                        "vhost": `${res.msg}`,
                        "app": "live",
                        "stream": getParams("orderNum"),
                        "url": "rtsp://admin:" + `${getParams("password")}@${getParams("ip")}`
                    },
                });
                start(res.msg)
            }
        });
    }
    function start(configIP) {
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: `http://${configIP}:800/live/${getParams("orderNum")}.flv`
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();

            setInterval(() => {
                // 停止播放
                flvPlayer.unload();
                flvPlayer.detachMediaElement();
                // 重新播放
                start(configIP)
            }, 5000);
        }
    }

三、解决方法

优化后的代码如下,在代码中,我们定义了一个全局变量 timerId,用来存储定时器的 ID。在每次刷新请求时,我们先清理旧的定时器,然后再创建新的定时器。这样就可以避免多个定时器同时在运行导致页面卡顿的问题。

java 复制代码
var timerId; // 全局变量,存储定时器ID

function register() {
    $.ajax({
        url: '/dev-api/system/config/configKey/camera.request.ip',
        beforeSend: function (request) {
            request.setRequestHeader("Authorization", "Bearer " + getCookie("Admin-Token"));
        },
        success: (res) => {
            console.log(res);
            $.ajax({
                url: `http://${res.msg}:800/index/api/addStreamProxy`,
                data: {
                    "secret": `035c73f7-bb6b-4889-a715-d9eb2d1925cc`,
                    "vhost": `${res.msg}`,
                    "app": "live",
                    "stream": getParams("orderNum"),
                    "url": "rtsp://admin:" + `${getParams("password")}@${getParams("ip")}`
                },
            });
            start(res.msg)
        }
    });
}

function start(configIP) {
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: `http://${configIP}:800/live/${getParams("orderNum")}.flv`
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();

        // 清理旧的定时器
        if (timerId) {
            clearInterval(timerId);
        }

        // 创建新的定时器
        timerId = setInterval(() => {
            // 停止播放
            flvPlayer.unload();
            flvPlayer.detachMediaElement();
            // 重新播放
            start(configIP)
        }, 5000);
    }
}

总结一下,解决 DOMException 错误的方法就是在播放新的媒体文件之前,先停止当前正在播放的媒体文件,等待当前正在加载的媒体文件加载完成,再播放新的媒体文件。而解决摄像头延迟的问题,就是在每次刷新请求时,清理旧的定时器,再创建新的定时器。这样就可以避免多个定时器同时在运行导致页面卡顿的问题。

相关推荐
喷火龙8号19 分钟前
MSC中的Model层:数据模型与数据访问层设计
后端·架构
5ycode23 分钟前
dify项目结构说明与win11本地部署
后端·开源
LaoZhangAI28 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
fouryears_2341735 分钟前
深入拆解Spring核心思想之一:IoC
java·后端·spring
codervibe37 分钟前
从 0 到 1,我如何独立开发一套教务系统(EduCore)
后端
error_cn39 分钟前
podman安全性设置
后端
一个热爱生活的普通人39 分钟前
Go 泛型终极指南:告别 interface{},写出更安全、更强大的代码!
后端·go
求知摆渡40 分钟前
从零开始搭建typecho
前端·后端
极客悟道40 分钟前
彻底搞懂Java值传递:90%开发者都会踩的坑
前端·后端
坚持学习永不言弃41 分钟前
FactoryBean 和 BeanFactory详解
后端