navigator.mediaDevices.getUserMedia 在 ios 设备中显示黑屏

Question

当流显示在 html5 视频标签上时，iOS 设备中的屏幕显示空白，显示黑屏。但在其他设备上到处都可以正常工作。这是js代码

它在单屏中工作，但是当点对点 js 调用 twillio 时，它会显示黑屏，而视频会话在两个设备和用户之间启动

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

这是 HTML 代码

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

Answer 1

Safari iOS 要求网络应用程序明确要求此类媒体的许可。您需要在清单文件中定义相机的使用权限，例如：

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

然后，引用您的清单文件index.html

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