Question

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

当我在firefox上打开它时，我收到消息"getUserMedia() not supported in your browser." 另一方面，当我打开这个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;
}

Answer 2

自从Safari 11推出以来，它无处不在（在最近版本的Chrome，Firefox和Safari 11上测试过）：

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

function successCallback(stream) {
  video.srcObject = stream;
  video.play();
}

function errorCallback(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.mediaDevices.getUserMedia(constraints)
  .then(successCallback)
  .catch(errorCallback);

Answer 3

Fiddles

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

var constraints = {audio: false, video: true};
var video = document.querySelector("video");

function successCallback(stream) {
  window.stream = stream; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

Answer 4

2021 年 1 月 - navigate.getUserMedia 已替换为 navigate.mediaDevices.getUserMedia

Answer 5

getUserMedia需要以webkit-或moz-为前缀。第一个示例仅以webkit-为前缀。因此，它永远不会在Firexox上运行，只能在Chrome和Safari上运行。

代码示例未显示前缀...

前缀可以这种方式完成：

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

Answer 6

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

此外，您必须使用https而不是http，否则iPadOS的Safari无法正常工作。

如何使getUserMedia（）适用于所有浏览器

6 个答案: