Question

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

好的，我使用WebRTC来完成这项任务。我访问getUserMedia()并播放＆＃34;视频＆＃34;那是实时相机视图。此任务适用于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。

另见this sample枚举和选择摄像机。不幸的是，你现在正在讨论的facesmode约束。

WebRTC getUserMedia（）仅适用于Firefox

1 个答案: