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.
JavaScript
x
14
14
1
<script>
2
navigator.mediaDevices.getUserMedia({ audio: true, video: true})
3
.then(function(camera) { document.getElementById("video1").srcObject = camera;})
4
.catch(function(error) { console.error("ERROR", error) });
5
6
navigator.mediaDevices.getUserMedia({audio: true, video: { width: 400, height: 200}})
7
.then(function(remote_camera) { document.getElementById("video2").srcObject = remote_camera;})
8
.catch(function(error) { console.error("ERROR", error) });
9
10
</script>
11
12
<video id="video1" controls autoplay playsinline></video>
13
<video id="video2" controls autoplay playsinline></video>
14
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/