mediaDevices.getUserMedia 在 iOs 11 中无法使用 Safari 11（视频为黑色）

Question

我找不到这方面的解释。从我读到的内容来看，Safari 11 似乎正在使用来自 iOs 11 的 getUserMedia API。所以我不明白这段代码有什么问题（我的目标是在直播中获取二维码，但被阻止了这里）：

控制器

function BarcodeReaderQRCtrl($scope) {
  /* widget controller */
  var c = this;
  var constraints = { audio: true, video: { width: 640, height: 480 } };

  c.startMedia = function() {
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function(mediaStream) {
        var video = document.getElementById('idvideo');
        video.srcObject = mediaStream;
        video.onloadedmetadata = function(e) {
          video.play();
        };
      })
      .catch(function(err) {
        console.log(err.name + ': ' + err.message);
      });
  };
}

HTML

<div>
  <a class="btn btn-default" href="#" role="button" ng-click="c.startMedia()">Start</a>
  <div>
    <video id="idvideo"></video>
  </div>
</div>

有什么建议吗？

Answer 1

问题不在你说的 API 中，这是因为移动浏览器需要一个有效的 click 事件才能开始播放视频，所以 video.play() 在没有用户的情况下无法在移动设备上运行相互作用。例如，这个 post 证明了它：。我通常做的：我只是在视频上添加 play 图标（仅在移动设备上）以诱导用户点击，然后，我将 video.play() 绑定到此 click 事件。听起来很简单。

mediaDevices.getUserMedia 在 iOs 11 中无法使用 Safari 11（视频为黑色）

mediaDevices.getUserMedia not working with Safari 11 in iOs 11 (video is black)

javascript

mobile-safari

angularjs

getusermedia

ios11