navigator.mediaDevices.getUserMedia shows black screen in ios devices

Question

The screen shows blank in ios devices when the stream displayed on the html5 video tag, it shows black screen. but work fines everywhere on other devices. Here is the js code

it works in single screen but when peer to peer js called for twillio it shows a black screen while video session starts between two devices and user

navigator.mediaDevices.getUserMedia({video:true}).then(function(stream) {
                 document.getElementById("myVideo").setAttribute('autoplay', '');
    document.getElementById("myVideo").setAttribute('muted', '');
    document.getElementById("myVideo").setAttribute('playsinline', '');   
                      
        document.getElementById("myVideo").srcObject = stream;
   document.getElementById("myVideo").play();
   
   }).catch(function(error) {
    console.log(error.name + ": " + error.message);
    alert(error.name + ": " + error.message);
    
  });

Here Is the HTML code

<video id="myVideo" allow="camera;microphone" class="silhouetteVideo" style="" autoplay playsinline controls="false"></video>

Answer 1

Safari iOS requires the web app to explicitly require permission of such medias. You need to define the usage permission of camera in the manifest file, one such example is:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "permissions": {
    "audio-capture": {
      "description": "Required to capture audio using getUserMedia()"
    },
    "video-capture": {
      "description": "Required to capture video using getUserMedia()"
    }
  }
}

Then, reference the manifest file in your index.html

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />