8

I created and maintain a video stream site for my company. One of the features is the playing of live streams company-wide. For some time I'm receiving complaints from some users that the streams stops if they change tabs. After taking a very long time to reproduce the problem (see this question) I found that Chrome will stop the stream to save battery power no matter the energy/memory saving options.

I tested in a page with only the following HTML:

<html>
<body>
    <video src="<source of the video stream>" controls autoplay></video>
</body>
</html>

And the problem persisted: If I change tabs after the video starts and don't return to the video tab, on Chrome, WITH THE AUDIO UNMUTED, the video will stop after around 1 minute with the following message:

Uncaught (in promise) DOMException: The play() request was interrupted because 
video-only background media was paused to save power. 
https://developer.chrome.com/blog/play-request-was-interrupted/

(the real url in the error is shortened, but SO doesn't allow shortened urls)

Yet this doesn't happen on Youtube. In youtube the videos continue playing far beyond that, no matter if the tab is hidden or not. So I examined a playing youtube video and see that they call every couple seconds a url like this:

https://rr1---sn-cgpn5oxu-4vge.googlevideo.com/videoplayback?expire=1683149353&ei=yH1SZJ7WO5uZ1sQP9vG92A8&ip=2804:29b8:517b:242:f26b:4dea:b5f2:67e3&id=o-AL8joEvI3HBPbklhxiLbEGTDlJLbVIwopjFjnI8EBWL-&itag=397&aitags=133,134,135,136,160,242,243,244,247,278,298,299,302,303,394,395,396,397,398,399&source=youtube&requiressl=yes&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=video/mp4&ns=55HuNDVyUV7osCrE3I51qpQN&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=expire,ei,ip,id,aitags,source,requiressl,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=yes&cpn=3W-CuvJhKCQ-2SIu&cver=2.20230502.01.00&range=3996400-4138492&rn=72&rbuf=118597&pot=MpUBSMpK29kR-RxI8hTT3gKbBSbNMHgH-lokRzwa-an54N4h5GSRq35j2kF-j5guj3En63V9l3yw3CE4oMW6UYmGzRGQSuNi8nv12fRkDRarshgOfk8_0_-uYxPw4UO6dQKBtBGPKXWgms989N_Bxl54mPPUxPYIhIIwqv4KbyMuqiGJ6F1TicguIpYMXykFnSVYjgi2WQU=

So I thought the answer was calling the backend frequently. As my system also calls the backend frequently to save statistics, I though I just needed to update the frequency of the calls.

It didn´t work. Not even in with a 2s frequency on backend calls. The video continues to stop after around 1 minute.

So... what's Youtube secret ? why won't their video stop and mine stops after 1 minute ? What do I have to do to maintain the video playing and avoid that message ?

This is a Angular frontend/nodejs backend system.

I've found the problem. Some parts of the above message aren't true

After almost 1 month trying to figure this one out I realized that I was misled to think that a simple page with only tag in it also created the problem. This isn't true. I won't delete this question as it has drawn attention and probably people are getting the same error. So I'll just add an answer showing what the problem was. Maybe it may help someone.

Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73
  • Not sure could be a different protocol to load media? rtc like?? – joyBlanks May 03 '23 at 16:06
  • We use a rtmp stream directed to 6 servers with a reverse http proxy on apache on each and a load balancer to unify these 6 servers on a url so that we get a webm stream on the end. Does that help ? – Nelson Teixeira May 03 '23 at 16:52
  • 1
    I couldn't reproduce this behavior at least using a local video file. but since you said you couldn't find reference to this in the source code of chromium i'm gonna put this link here: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/media/html_media_element.cc;l=4597?q=video-only%20background%20media%20was%20paused&ss=chromium I tried to understand what it was doing but failed so... – Daniel May 05 '23 at 17:53
  • 2
    AFAI tested it only happens with live video streams. Not with normal videos loaded from files. – Nelson Teixeira May 05 '23 at 18:04
  • I understand you are asking about Chrome, but does this happen in Firefox? – Adam G. May 05 '23 at 21:30
  • @AdamG. No it doesn't – Nelson Teixeira May 05 '23 at 22:46
  • just to confirm, this behaviour does not change if the client disables the ["memory saver" feature](https://support.google.com/chrome/?p=chrome_memory_saver)? – starball May 06 '23 at 06:58
  • 1
    your video is not a "video-only background media", correct? – Salman A May 09 '23 at 11:53
  • See above... as I said, we use a rtmp stream directed to 6 servers with a reverse http proxy on apache on each and a load balancer to unify these 6 servers on a url so that we get a webm stream on the end. Does that help ? – Nelson Teixeira May 10 '23 at 01:54
  • @NelsonTeixeira Can you give an example of live stream link? – Jordy May 12 '23 at 06:16
  • @Jordy unfortunately no. I can generate one internally in my company, but I can't show it outside. – Nelson Teixeira May 12 '23 at 15:51

1 Answers1

1

I've found that the real problem was that as the stream was being played I made checks in the stream to see if it was still running.

In fact I use the following code in a timer to see if the stream has started:

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;
}

So before the live stream starts I keep checking with the above code if it has started. If so I change the source and play it. But after starting I continued to check in background the same way to check if the stream has stopped and to create an "automated" play and stop experience to the user. This continued check after stream starts is what was generating the problem. As soon as I removed this check and relied only on the stop/pause/end events of the player the problem was fixed.

I guess the continuous background of streams creation and destruction probably confused the energy saving system to stop the real live stream. I think it probably mistaken one of the "check streams" for the real live stream.

This is somewhat specific to my situation. But I hope it helps someone.

Nelson Teixeira
  • 6,297
  • 5
  • 36
  • 73