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

相关推荐
满分观察网友z4 分钟前
从混乱到有序:我用“逐层扫描”法优雅搞定公司组织架构图(515. 在每个树行中找最大值)
后端·算法
风象南9 分钟前
SpringBoot应用开机自启动与进程守护配置
java·spring boot·后端
寻月隐君12 分钟前
Rust核心利器:枚举(Enum)与模式匹配(Match),告别空指针,写出优雅健壮的代码
后端·rust·github
满分观察网友z12 分钟前
一行代码的惊人魔力:从小白到大神,我用递归思想解决了TB级数据难题(3304. 找出第 K 个字符 I)
后端·算法
程序员岳焱13 分钟前
Java 与 MySQL 性能优化:MySQL连接池参数优化与性能提升
后端·mysql·性能优化
这里有鱼汤14 分钟前
一招横盘突破选股法,赚钱不靠运气靠图形,靠概率!
后端·python
万少24 分钟前
鸿蒙外包的十大生存法则
前端·后端·面试
fouryears_2341727 分钟前
Spring核心原理的快速入门:快速了解IoC与DI
java·后端·spring
星辰离彬1 小时前
Java 与 MySQL 性能优化:MySQL连接池参数优化与性能提升
java·服务器·数据库·后端·mysql·性能优化
超级小忍1 小时前
Spring Boot 与 Docker 的完美结合:容器化你的应用
spring boot·后端·docker