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>