如何使getUserMedia（）在所有浏览器上工作

Question

如何使getUserMedia（）在所有浏览器上工作

javascripthtmlhtml5-videowebrtc

26

我了解了 WebRTC，它说你可以捕获视频摄像头。我使用了这个演示程序，这只在Chrome中有效。

当我在Firefox上打开它时，我收到消息"getUserMedia() not supported in your browser."然而，当我打开这个HTML5-rocks演示程序时，它百分之百地工作了。

我错过了哪些更改、插件或其它让getusermedia()工作的东西？

- Muath

为了使其在IE和Safari中运行，需要插件，我没有尝试过其中的任何一个，例如OpenWebRTC（听起来不太理想但适合测试）。如果您只想从流中捕获单个图片或视频，则可以在此处找到描述如何执行此操作的步骤：https://dev59.com/uGnWa4cB1Zd3GeqP0Gfn。这需要某种浏览器敏感的页面处理。 - Ron Wertlen

1

提供信息：现在有一个单一的功能可供使用：navigator.mediaDevices.getUserMedia()，根据规范： getUserMedia()方法的官方定义，并鼓励开发人员使用MediaDevices。 - Andrew

7个回答

14

自从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);

- Johnny Oin

这对我有效，在Safari浏览器中navigator.getUserMedia(constraints, successCallback, errorCallback);无法正常工作。另外，Promise链更加方便优美。 - 4imble

9

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);

- Muath

5

在Safari浏览器中，这三个都没有定义：navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; - Ron Wertlen

@RonWertlen 我没有在Safari上检查过，但是在Chrome和Firefox上运行良好，请确保您拥有最新版本的Safari。 - Muath

@RonWertlen Safari目前还不支持它。 - Bilbo Baggins

2

getUserMedia需要加上webkit-或moz-前缀。第一个示例仅带有webkit-前缀。因此它将永远无法在Firefox上工作，只能在Chrome和Safari上使用。

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

可以通过以下方式添加前缀：

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

- Mikael Holmgren

你可以查看其他示例是如何解决的。（更新的答案） - Mikael Holmgren

1

我有一个示例网站 http://simpl.info/gum，它可以在 Firefox、Chrome 和 Opera 浏览器中运行。 - Sam Dutton

2

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

- Wide Awake

1

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

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

- webcpu

0

我知道有时候很痛苦，特别是在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

- Surya Pratap

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brianchirls · Accepted Answer

问题不仅仅在于函数名称前缀，而是在不同浏览器中提供的流（stream）工作方式不同。下面我将为您逐步解释。

我假设您已经在变量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;
}