Search code examples
javascriptwebrtcgetusermedia

How can I get iOS to have 2 video streams?

Right now if I use my iPhone or iPad and try to display two streams, one is black and the other works. What can I do to get both working? This works fine on all browsers with my laptop.

<script>
 navigator.mediaDevices.getUserMedia({ audio: true, video: true})
      .then(function(camera) { document.getElementById("video1").srcObject = camera;})
      .catch(function(error) { console.error("ERROR", error) });

 navigator.mediaDevices.getUserMedia({audio: true, video: { width: 400, height: 200}})
      .then(function(remote_camera) { document.getElementById("video2").srcObject =  remote_camera;})
      .catch(function(error) { console.error("ERROR", error) });

</script>

<video id="video1" controls autoplay playsinline></video>
<video id="video2" controls autoplay playsinline></video>
Solution

  • Safari on iOS does not support more than a single active camera at a time.

    https://bugs.webkit.org/show_bug.cgi?id=238492 is the most recent bug report about it but this behavior has been documented back in 2018 already: https://webrtchacks.com/guide-to-safari-webrtc/