如何在 Safari 和 IE 中访问网络摄像头？ getUserMedia 是否有任何替代 API？答案

【问题标题】：How to access webcam in Safari and IE? Are there any alternative API to getUserMedia?如何在 Safari 和 IE 中访问网络摄像头？ getUserMedia 是否有任何替代 API？
【发布时间】：2020-03-02 23:42:18
【问题描述】：

我目前正在使用 javascript 访问网络摄像头，然后使用 getUserMedia 流式传输到浏览器，caniuse.com 显示 Safari 和 Internet Explorer 11 及更高版本无法访问 getUserMedia。

我用它来检查是否有网络摄像头，

navigator.getUserMedia  =   navigator.getUserMedia ||
                        navigator.webkitGetUserMedia ||
                        navigator.mozGetUserMedia ||
                        navigator.msGetUserMedia;

然后我用这个显示：

if (navigator.getUserMedia){
//document.getElementById("webcam").style.display = "block";

window.addEventListener("DOMContentLoaded", function() {
    // Grab elements, create settings, etc.
    var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        errBack = function(error) {
            console.log("Video capture error: ", error.code);
        };

    // Put video listeners into place
    if(navigator.getUserMedia) { // Standard
        navigator.getUserMedia(videoObj, function(stream) {
            video.src = stream;
            video.play();
        }, errBack);
    }
    else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
        navigator.webkitGetUserMedia(videoObj, function(stream){
            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    else if(navigator.mozGetUserMedia) { // Firefox-prefixed
        navigator.mozGetUserMedia(videoObj, function(stream){
            video.src = window.URL.createObjectURL(stream);
            video.play();
        }, errBack);
    }
    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
        canvasToDataURLString = canvas.toDataURL();
        var blob = dataURItoBlob(canvasToDataURLString);
        base64result = canvasToDataURLString.split(',')[1];
        //console.debug(base64result);
        document.getElementById("base64result").innerHTML = base64result;

    });
}, false);

}

或者根本无法使用 IE 和 safari 访问网络摄像头？我了解 Chrome 存在一些限制，因为该网页必须从安全来源访问。

我想知道我是否做错了...... 我想知道 getUserMedia 是否还有其他选择！谢谢你，请善待，我已经尝试过谷歌搜索，结果有很多，我只是在寻找替代品，如果真的不可能，那好吧。谢谢！

【问题讨论】：

首先，navigator.getUserMedia 多年来已被弃用。请改用 navigator.mediaDevices.getUserMedia。然后 Safari 从 v11 开始支持 mediaDevices.gUM。而对于较旧的浏览器，当时唯一的方法就是使用 flash，但无论如何您可能都不想支持这些。

标签： javascript html safari getusermedia

【解决方案1】：

IE：没有。 fuggedaboudit。（好消息是，即使是旧版本的 Windows 现在也可以使用新的 Edge，而且就 gUM 和 MediaRecorder 而言，它是 Chromium。）

Safari，包括移动设备和 Mac，是的。 gUM 有效，但 MediaRecorder 很古怪。

这些示例可让您测试各种浏览器的功能，并且您可以使用源代码来指导您的项目。

https://webrtc.github.io/samples/

【讨论】：