javascript - WebRTC getUserMedia() 仅适用于 Firefox

Question

我正在开发一个移动网络项目，该项目需要访问相机并拍摄照片，然后对其进行操作。问题是我们需要直接从浏览器中拍照，而不是打开原生的相机应用来拍照。

好的，我使用 WebRTC 来完成这项任务。我访问 getUserMedia() 并播放实时摄像机 View 的“视频”。此任务适用于 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 在选择相机时出现错误，所以我认为这就是问题所在。

Note that on Chrome Desktop it works perfectly, since there is only one camera and has not to delegate on the user to choose what camera should use. But on mobile devices with two cameras is impossible to choose how.

谢谢。

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

Answer 1

您是在 https 上部署吗？出于安全原因，Chrome 不允许在 http 页面上使用 getUserMedia。

另见 this sample用于枚举和选择相机。不幸的是，您所询问的面向模式约束现在已被打破。