我了解了web-rtc,它说你可以捕获视频摄像头,我使用了演示,这只适用于镀铬..
当我在firefox上打开它"getUserMedia() not supported in your browser."
时,当我打开这个HTML5-rocks-demo时,我会在另一只手上收到消息
它100%工作.什么改变或插件或我想念的东西让我的getusermedia()
工作.
小提琴
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);
问题不仅仅是前缀函数名称; 提供的流在不同浏览器中的工作方式不同 在这里,我将引导您完成它.
我假设你已经在变量中设置了一个视频元素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; }
由于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);