javascript - 使用网络摄像头捕获个人资料图片并在 Canvas 中显示图片

Question

我有一个插件，我可以使用笔记本电脑或手机上的网络摄像头捕捉图像，然后将其放置在 Canvas 中。所有这些在 Chrome 中运行良好，但在使用 Firefox 时，它根本不起作用。我怀疑是 navigator.getUserMedia 导致了 firefox 中的问题，因为它已被弃用。

链接:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

Google 开发人员建议使用 navigator.getUserMedia，它也与我的应用程序兼容。

链接:https://developers.google.com/web/updates/2015/10/media-devices

所以请建议应该在下面的代码中进行哪些更改才能使其在 firefox 中工作。

提前致谢。

<script type="text/javascript">
var ctx = null;
var canvas = document.getElementById("tmpImage");
var localMediaStream = null;
var video = document.querySelector('video');

function snapshot() {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        var img = document.getElementById('CaptureImage');
        // "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png.
        img.src = canvas.toDataURL('image/webp');
    }
}

function hasGetUserMedia() {
    // Note: Opera builds are unprefixed.
    return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia);
}

function onFailSoHard(e) {
    if (e.code == 1) {
        alert('User denied access to their camera');
    } else {
        alert('getUserMedia() not supported in your browser.');
    }
}

function start() {

    if (hasGetUserMedia()) {
        if (navigator.webkitGetUserMedia)
            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        //var getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;


        //var gumOptions = { video: true, toString: function () { return 'video'; } };    
        if (navigator.getUserMedia) {

            navigator.getUserMedia({
                video: true,
                audio: false
            }, function (stream) {
                if (navigator.webkitGetUserMedia) {
                    video.src = window.webkitURL.createObjectURL(stream);
                } else {
                    video.src = stream; // Opera
                }
                localMediaStream = stream;
            }, onFailSoHard);
        } else {
            video.src = 'somevideo.webm'; // fallback.
        }
    }
}

function stop() {
    video.pause();
    video = document.getElementById('sourcevid');
    video.src = "";
    localMediaStream.stop();
}

function ResizeCanvas() {
    canvas.height = video.videoHeight;
    canvas.width = video.videoWidth;
}

$(document).ready(function () {
    ctx = canvas.getContext('2d');
});

Answer 1

使用官方adapter.js填充。问题解决了。

例如this fiddle适用于所有支持的浏览器。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

支持modern constraints syntax