navigator.mediaDevices.getUserMedia affiche un écran noir sur les appareils ios

Question

L'écran est vide sur les appareils ios lorsque le flux s'affiche sur la balise vidéo html5, il affiche un écran noir. Mais il fonctionne bien partout sur les autres appareils. Voici le code js

il fonctionne en écran unique mais lorsque peer to peer js est appelé pour twillio, il affiche un écran noir alors que la session vidéo démarre entre deux appareils et l'utilisateur.

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);

  });

Voici le code HTML

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

Answer 1

Safari iOS exige que l'application web demande explicitement la permission de ces médias. Vous devez définir l'autorisation d'utilisation de la caméra dans le fichier manifeste, par exemple :

{
  "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()"
    }
  }
}

Ensuite, faites référence au fichier manifeste dans votre index.html

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