如何使 getUserMedia() 在所有浏览器上工作答案

【问题标题】：how to make getUserMedia() work on all browsers如何使 getUserMedia() 在所有浏览器上工作
【发布时间】：2014-01-27 17:53:48
【问题描述】：

我了解了 web-rtc，它说你可以捕获 video-cam ，我使用了demo，这仅适用于 chrome..

当我在 Firefox 上打开它时，我收到消息 "getUserMedia() not supported in your browser." 另一方面，当我打开这个HTML5-rocks-demo

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

【问题讨论】：

为了让它在 IE 和 Safari 中工作，有一些插件，我没有尝试过任何一个，例如OpenWebRTC（听起来不太理想，但适合测试）。如果您只想从流中捕获单个图片或视频，这里有一个描述，如何做到这一点：stackoverflow.com/questions/12811361/… 这需要某种浏览器敏感的页面处理。
仅供参考现在您可以使用一个函数：navigator.mediaDevices.getUserMedia() 根据the specs：getUserMedia() 方法的官方定义，鼓励开发人员使用, 现在在 MediaDevices。

标签： javascript html html5-video webrtc

【解决方案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;
}

【讨论】：

以下图表显示了浏览器对此的支持：caniuse.com/#feat=stream
我在 Chrome 控制台中使用它，它只有在我向 getUserMedia 调用提供第三个参数（错误回调）时才有效。
这个答案有更新吗？我读到我们现在需要使用navigator.mediaDevices.getUserMedia。
@navigator 是的，Firefox 以前是 navigator.mozGetUserMedia，现在是 navigator.mediaDevices.getUserMedia
只是对你们所有人的更新，不要使用video.src = window.webkitURL.createObjectURL(stream); ，因为它现在会给你错误，你可以包括像这样的直接流video.src = stream;在这里查看更多信息@987654322 @

【解决方案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);

【讨论】：

这对我有用，navigator.getUserMedia(constraints, successCallback, errorCallback); 在 safari 上失败了。 Promise 链也更好。

【解决方案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);

【讨论】：

在 Safari 中，这三个都是未定义的：navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
@RonWertlen 我没有在 safari 上检查它，但它在 chrome 和 firefox 上运行良好，请确保您获得了最新版本的 safari。
@RonWertlen Safari 还不支持它。

【解决方案4】：

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

代码示例没有显示前缀...

可以这样加前缀：

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

【讨论】：

您可以检查其他示例如何解决它。（更新答案）
我在simpl.info/gum 有一个适用于 Firefox、Chrome 和 Opera 的示例。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

另外，你必须使用 https 而不是 http，否则 iPadOS 的 Safari 将无法使用。

【讨论】：

【解决方案7】：

我知道有时候很痛苦。特别是在 Mac Safari 最新的浏览器中所以我在这里为您提供解决方案。

// Check for WebRTC
if (!navigator.webkitGetUserMedia && !navigator.mozGetUserMedia && !navigator.mediaDevices.getUserMedia) {
  alert('WebRTC is not available in your browser.');
}
console.log(navigator);
// navigator object will help you to understand all browsers.
// for Safari !navigator.mediaDevices.getUserMedia

【讨论】：