WebRTC getUserMedia() 仅适用于 Firefox

Question

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

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

这在 Firefox 上完美运行。我假设在 Safari 中这是不可能实现的，因为 getUserMedia() 仍然不受此浏览器的支持，但是 Google Chrome 有支持，但我无法让它在 Chrome.

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

我的代码非常简单，我从 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 相机有一个错误 select，所以我认为这就是问题所在。

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 以了解枚举和选择相机的信息。不幸的是，您所询问的 facingmode 约束现在已被打破。

Answer 2

要选择相机，请添加约束参数并将 facingMode 设置为 "user" or "environment"。为了让用户选择不添加这些详细信息。

var myConstraints = {
    audio: false, 
    video: {
        facingMode: "user"
    }
};

见https://w3c.github.io/mediacapture-main/#dom-mediadevices-getusermedia

新的 API 将基于 Promised：

navigator.getUserMedia(myConstraints).then(function(stream) {
    video.srcObject = stream;
    video.play();
}).catch(errBack);

要使用面向未来的证明 API 并使其现在可用，您可以使用像 https://github.com/webrtc/adapter

这样的 polyfill

WebRTC getUserMedia() 仅适用于 Firefox

WebRTC getUserMedia() works only on Firefox

javascript

firefox

google-chrome

webrtc

getusermedia