javascript - 如何使 getUserMedia() 在所有浏览器上工作

Question

我了解到web-rtc，它说你可以捕获视频摄像头，我用了demo ，好吧，这只适用于 chrome ..

当我在 firefox 上打开它时，我收到消息 “您的浏览器不支持 getUserMedia()。”另一方面，当我打开这个 HTML5-rocks-demo

100% 有效。让 getusermedia() 工作的更改或插件或我想念的东西。

Answer 1

问题不只是前缀函数名；提供的流在不同浏览器中的工作方式不同。在这里，我将引导您完成它。

我假设您已经在名为 video 的变量中设置了一个视频元素。

//I don't usually like to overwrite publicly accessible variables, but that's just me
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var cameraStream;

getUserMedia.call(navigator, {
    video: true,
    audio: true //optional
}, function (stream) {
    /*
    Here's where you handle the stream differently. Chrome needs to convert the stream
    to an object URL, but Firefox's stream already is one.
    */
    if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
    } else {
        video.src = stream;
    }

    //save it for later
    cameraStream = stream;

    video.play();
});

这应该涵盖 Firefox、Chrome 和 Opera。 IE 和 Safari 尚不支持。

另一个需要注意的可能令人讨厌的事情是，如果您想在离开网页之前停止使用相机，如何关闭它。使用此功能:

function stopWebCam() {
    if (video) {
        video.pause();
        video.src = '';
        video.load();
    }

    if (cameraStream && cameraStream.stop) {
        cameraStream.stop();
    }
    stream = null;
}