WebRTC getUserMedia()仅适用于Firefox

Question

我正在开发一个移动网络项目,需要访问相机并拍照并进行操作.问题是我们需要直接从浏览器拍摄照片,而不是打开原生相机应用程序来拍摄它.

好的,我使用WebRTC来完成这项任务.我访问getUserMedia()并播放"视频",即实时摄像机视图.此任务适用于Android和iOS.

这适用于Firefox.我认为在Safari中这是不可能实现的,因为getUserMedia()这个浏览器仍然不支持,但Google Chrome有支持,但我无法在Chrome上运行.

Chrome上的问题似乎是用户无法选择后置或前置摄像头的错误,因此图像永远不会显示,它始终是黑色图像.

我的代码非常简单,我从https://davidwalsh.name/browser-camera获取它,但理论上它适用于所有浏览器,但我无法在Chrome上运行.这是代码:

<video id="video" width="480" height="640" autoplay controls></video>
<button id="snap">Capture</button>
<canvas id="canvas" width="480" height="740"></canvas>

<script>
// Grab elements, create settings, etc.
var video = document.getElementById('video');
var i = 0;
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    // Not adding `{ audio: true }` since we only want video now
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
    });
}
else if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia({ video: true }, function(stream) {
        video.src = stream;
        video.play();
    }, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia({ video: true }, function(stream){
    alert(window.webkitURL);
    alert(window.webkitURL.createObjectURL(stream));
        video.src = window.webkitURL.createObjectURL(stream);
        video.play();
    }, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
    navigator.mozGetUserMedia({ video: true }, function(stream){
        video.src = window.URL.createObjectURL(stream);
        video.play();
    }, errBack);
}

// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
    context.drawImage(video, 0, 0, 640, 480);
});
</script>

如何在Chrome上运行？如何让Chrome向用户询问他需要使用的相机(后/前)？我发现互联网用户告诉Chrome有选择相机的错误,所以我认为这是问题所在.

请注意,在Chrome桌面上它完美运行,因为只有一个摄像头,并且没有委托用户选择应该使用的摄像头.但是在带有两个摄像头的移动设备上是不可能选择的.

谢谢.

我没有使用polyfill.重复标记不能解决我的问题.我需要一些帮助.我需要一个规范的答案来解决问题.感谢您的时间!我提供赏金.

Answer 1

你在https上部署？出于安全原因,Chrome不允许在http网页上使用getUserMedia.

另请参阅此示例以查看和选择摄像机.你正在询问的facesmode约束现在不幸被破坏了.