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>
Advertisement
Answer
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/