我找不到任何解释。从我读到的内容来看,Safari 11似乎正在使用iOS 11的getUserMedia API。所以我不明白这段代码有什么问题(我的目标是在直播中获取QR码,但在这里被阻止):
控制器
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>
有什么建议吗?
2条答案
按热度按时间mwkjh3gx1#
问题不在于API,因为移动的浏览器需要一个有效的
click
事件才能开始播放视频,所以如果没有用户交互,video.play()
将无法在移动设备上工作。例如,这篇文章证明了这一点:https://stackoverflow.com/a/16860922/6053654 .我通常做的是:我只是在视频上添加play
图标(仅在移动的上)以诱导用户点击,然后,我将video.play()
绑定到这个click
事件。听起来很简单ioekq8ef2#
在我的例子中,我需要设置
video.playsInline = true;
。video
是指视频元素。Source