jhthompson12
jhthompson12

Reputation: 59

WebRTC video / audio stream in mobile browser will not play in background like a typical video

I've built a Raspberry Pi based baby monitor which allows any browser on the local network to make a WebRTC connection with the Pi to receive the video / audio stream. The stream is displaying in a simple webpage inside of a video tag that looks like this:

<div class="panel-body" id="stream">
    <video class="rounded centered" id="remotevideo" width="100%" height="100%" playsinline controls muted></video>
</div>

This works fine, but on mobile devices (in either Firefox or Chrome for Android), the stream will only stay engaged if the screen remains on with the webpage and browser in the foreground. The desired behavior would be that if you lock the phone (tap the power button), press the home button, switch to a different app, or change browser tabs, the stream (i.e. the audio) should continue uninterrupted indefinitely. The actual behavior is the audio continues to stream for about a minute and then the stream dies (I think the OS is killing the process since that tab has moved in to the background).

The desired behavior I described is a standard feature of these browsers, I just don't understand why it isnt working with the live stream. I've tried replacing the WebRTC stream with a test .mp4 file and this produces the desired behavior. e.g.

  1. The video starts playing in chrome
  2. Press the home button, the video / audio initially pauses
  3. A new media notification is shown in my notifications tray where I can press play
  4. Audio resumes indefinitely

Why are these two sources of video behaving differently? Is there a way to enable the backround play for my WebRTC audio? Is there some limitation of browsers that I dont understand?

P.S. My baby monitor is almost identical to this Janus Streaming Demo and you can see the same behavior there.

Upvotes: 2

Views: 2012

Answers (0)

Related Questions