Javascript getUserMedia 在 iphone safari 中首次加载时显示黑屏

Question

我使用 HTML/Javascript 制作了二维码扫描功能并部署到站点。 当我在 iphone safari 上打开网站时，点击显示相机，它显示几秒钟然后崩溃，黑屏。

一个有趣的是，几秒钟后我就黑屏了。 在黑屏之前，如果我在iphone上按下home键并再次返回站点，那么它可以正常工作，没有崩溃，没有黑屏。

这是js的一部分。

const constraints = {
    audio: false,
    video: {
      facingMode: 'environment'
    }
  }

navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) {
      video.setAttribute("playsinline", true);
      video.setAttribute("autoplay", true);
      video.setAttribute("muted", true);
      video.srcObject = stream;
      video.play();
    })

我怎样才能让它在第一次加载时工作？

Answer 1

如here 所说，将playsinline 属性添加到视频元素：

const video = document.getElementById("video-element");    
video.setAttribute("playsinline", true);