如何使getUserMedia（）在所有浏览器上都能工作 [英] how to make getUserMedia() work on all browsers

问题描述

我了解 web-rtc ，它说你可以捕获视频摄像头，使用
i demo ，以及此工作仅适用于Chrome。

I learn about web-rtc, it says that you can capture video-cam , i used demo , well this worked on chrome only..

当我打开它在Firefox上，我的消息getUserMedia（）不支持在您的浏览器。
另一方面，当我打开此 HTML5-rocks-demo

when i open it on firefox i get message "getUserMedia() not supported in your browser." on another hand when i open this HTML5-rocks-demo

它100％工作。
更改或插件或我错过的任何内容让 getusermedia（）有效。

it worked 100%. what changes or plugins or something i miss that let getusermedia() works.

推荐答案

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

The issue is not just the prefixed function name; the stream provided works differently in different browsers. Here, I'll walk you through it.

我假设您已经在变量中设置了一个名为 video 。

I assume you've already set up a video element in the variable called 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还不支持它。

This should cover you for Firefox, Chrome and Opera. IE and Safari don't support it yet.

另一个可能令人讨厌的事情是，如果你想在离开之前停止使用它，如何关闭相机网页。使用这个函数：

Another potentially annoying thing to be aware of is how to turn off the camera if you want to stop using it before leaving the web page. Use this function:

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

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

这篇关于如何使getUserMedia（）在所有浏览器上都能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！