如果我在 Chrome 中更改标签页,如何保持实时视频流的播放?

Nel*_*ira 8 javascript youtube video streaming angular

我为我的公司创建并维护了一个视频流网站。其中一个功能是在公司范围内播放实时流。\n有一段时间,我收到一些用户的投诉,称如果他们更改选项卡,流就会停止。\n在花了很长时间才重现该问题之后(请参阅此问题)我发现,无论节能/内存节省选项如何,Chrome 都会停止流以节省电池电量。

\n

我在仅包含以下 HTML 的页面中进行了测试:

\n
<html>\n<body>\n    <video src="<source of the video stream>" controls autoplay></video>\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n

问题仍然存在:如果我在视频开始后更改选项卡并且不返回视频选项卡,在 Chrome 上,音频未静音,视频将在大约 1 分钟后停止,并显示以下消息:

\n
Uncaught (in promise) DOMException: The play() request was interrupted because \nvideo-only background media was paused to save power. \nhttps://developer.chrome.com/blog/play-request-was-interrupted/\n
Run Code Online (Sandbox Code Playgroud)\n

(错误中的真实网址被缩短,但SO不允许缩短的网址)

\n

然而这在 YouTube 上并没有发生。在 YouTube 中,无论选项卡是否隐藏,视频都会继续播放远远超出此范围的内容。\n因此,我检查了正在播放的 YouTube 视频,发现它们每隔几秒调用一个如下 URL:

\n

https://rr1---sn-cgpn5oxu-4vge.googlevideo.com/videoplayback?expire=1683149353&ei=yH1SZJ7WO5uZ1sQP9vG92A8&ip=2804:29b8:517b:242:f26b:4dea:b5f2:67e3&id=o-AL8joEvI3HBPbkl hxiLbEGTDlJLbVIwopjFjnI8EBWL-&itag=397&aitags= 133,134,135,136,160,242,243,244,247,278,298,299,302,303,394,395,396,397,398,399&来源=youtube&requiressl=是&mh=WP&mm=31,29&mn=sn-cgpn5oxu-4vge ,sn-bg07dnrd&ms=au,rdu&mv=m&mvi=1&pl=48&gcr=br&initcwndbps=1168750&spc=qEK7B7KNEwbBCyLfMnbqJ_XwT66_vLSzP7Ms6zWibaE_f8dM91zGy5o&vprv=1&mime=视频/mp4&ns=55HuND VyUV7osCrE3I51qpQN&gir=yes&clen=487564749&dur =22246.495&lmt=1682304313621272&mt=1683127276&fvip=1&keepalive=yes&fexp=24007246&c=WEB&txp=5537434&n=x1PQMe-oM9FwmA&sparams=过期,ei,ip,id,aitags,来源,要求l、gcr、spc、vprv、mime、ns、gir、clen、 dur,lmt&sig=AOq0QJ8wRgIhAN8zD5iU6PeRR6JsQcSG90FY9PU8jYKkchcXkvUPMK9RAiEAkI1CXqLYWok7AaN6IVvv1MPxlt53V3e6cMPchpz6YhU=&lsparams=mh,mm,mn,ms,mv,mvi,pl,initcwndbps &lsig=AG3C_xAwRQIhAPjdR3ouyfr-2klgbHhachH67vnoxdmXGhnPNgJTfbv4AiB8kWrG-NC7M_vfTNCPk4zBL9sEGYq9rXXd3j6lCDttgg==&alr=是&cpn=3W-CuvJhKCQ-2SIu&cver=2.20230502 .01.00&范围=3996400-4138492&rn= 72&rbuf=118597&pot=MpUBSMpK29kR-RxI8hTT3gKbBSbNMHgH-lokRzwa-an54N4h5GSRq35j2kF-j5guj3En63V9l3yw3CE4oMW6UYmGzRGQSuNi8nv12fRkDRarshgOfk8_0_-uYxPw4UO 6dQKBtBGPKXWgms989N_Bxl54mPPUxPYIhIIwqv4KbyMuqiGJ6F1TicguIpYMXykFnSVYjgi2WQU=

\n

所以我认为答案是频繁调用后端。由于我的系统也经常调用后端来保存统计数据,所以我想我只需要更新调用的频率。

\n

它没有\xc2\xb4 工作。即使后端调用的频率为 2 秒也不行。视频在大约 1 分钟后继续停止。

\n

那么... YouTube 的秘密是什么?为什么他们的视频一分钟后就停止了,而我的视频却停止了?我需要做什么才能保持视频播放并避免出现该消息?

\n

这是一个 Angular 前端/nodejs 后端系统。

\n

我已经找到问题了。上述消息的某些部分不正确

\n

经过近 1 个月的尝试解决这个问题后,我意识到我被误导了,认为一个只有标签的简单页面也会造成这个问题。这不是真的。我不会删除这个问题,因为它引起了人们的注意,并且可能人们也遇到了同样的错误。所以我只是添加一个答案来说明问题所在。也许它可以帮助某人。

\n

Nel*_*ira 1

我发现真正的问题是,当播放流时,我检查流以查看它是否仍在运行。

事实上,我在计时器中使用以下代码来查看流是否已启动:

export async function isWebmStreamActive(url: string, globals: any): Promise<boolean> {
    if (!globals.checarStream) return;
    globals.checarStream = false;
    let result : any;
    let obj : any;
    let audio : any;
    try {
        obj =  { audio : new Audio(url) };
        audio = obj.audio;
        audio.muted = true;
        result = await (new Promise(res => {
            audio.addEventListener('error', () => {
                res(false);
            });
            audio.addEventListener('playing', () => {
                res(true);
            });
            audio.play();
        }));
        audio.pause();
        audio.src = '/assets/som/silencio.ogg';
        audio.load();
        audio.play();
        audio.pause();
    } finally {
        delete obj.audio;
        obj = undefined;
    }
    globals.checarStream = true;
    return result;
}       
Run Code Online (Sandbox Code Playgroud)

因此,在直播开始之前,我会不断检查上面的代码是否已经开始。如果是这样,我会更改源并播放它。但开始后,我继续以相同的方式检查后台,以检查流是否已停止,并为用户创建“自动”播放和停止体验。流启动后的持续检查是产生问题的原因。一旦我删除了此检查并仅依赖播放器的停止/暂停/结束事件,问题就得到了解决。

我猜想流创建和销毁的连续背景可能会混淆节能系统以停止真正的直播。我认为它可能将其中一个“检查流”误认为是真正的直播流。

这对于我的情况来说有些特殊。但我希望它能帮助别人。