我了解了 WebRTC,它说你可以捕获视频摄像头。我使用了这个演示程序,这只在Chrome中有效。
当我在Firefox上打开它时,我收到消息"getUserMedia() not supported in your browser."
然而,当我打开这个HTML5-rocks演示程序时,它百分之百地工作了。
我错过了哪些更改、插件或其它让getusermedia()
工作的东西?
我了解了 WebRTC,它说你可以捕获视频摄像头。我使用了这个演示程序,这只在Chrome中有效。
当我在Firefox上打开它时,我收到消息"getUserMedia() not supported in your browser."
然而,当我打开这个HTML5-rocks演示程序时,它百分之百地工作了。
我错过了哪些更改、插件或其它让getusermedia()
工作的东西?
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;
}
getUserMedia
调用提供第三个参数(错误回调)时才能正常工作。 - Brilliandnavigator.mediaDevices.getUserMedia
。 - navigatorvideo.src = window.webkitURL.createObjectURL(stream);
,因为现在会出错,你可以直接包含流,如下:video.src = stream;
。更多信息,请查看此处:https://dev59.com/aF4d5IYBdhLWcg3wJvsp#33759534 - rohitcoder自从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);
无法正常工作。另外,Promise链更加方便优美。 - 4imblenavigator.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);
navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
- Ron WertlengetUserMedia
需要加上webkit-或moz-前缀。第一个示例仅带有webkit-前缀。因此它将永远无法在Firefox上工作,只能在Chrome和Safari上使用。
代码示例没有显示前缀...
可以通过以下方式添加前缀:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
2021年1月 - navigate.getUserMedia
已被替换为navigate.mediaDevices.getUserMedia
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
我知道有时候很痛苦,特别是在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
navigator.mediaDevices.getUserMedia()
,根据规范: getUserMedia()方法的官方定义,并鼓励开发人员使用MediaDevices。 - Andrew