如何通过用户捕获图像's使用getUserMedia的网络摄像头
How can I capture an image via the user's webcam using getUserMedia?
我想在网上制作一个程序,通过用户的网络摄像头捕捉图像。
我正在使用getUserMedia
Web API。这是我的代码,但它不起作用。如何更改它以捕获网络摄像头图像?
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
</script>
有JS:
var video = document.querySelector("#videoElement");
navigator.getUserMedia, elem = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
console.log(navigator.getUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
}
function videoError(e) {
// do something
}
您可以使用此工作样本
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="init();">
<h1>Take a snapshot of the current video stream</h1>
Click on the Start WebCam button.
<p>
<button onclick="startWebcam();">Start WebCam</button>
<button onclick="stopWebcam();">Stop WebCam</button>
<button onclick="snapshot();">Take Snapshot</button>
</p>
<video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
<p>
Screenshots : <p>
<canvas id="myCanvas" width="400" height="350"></canvas>
</body>
<script>
//--------------------
// GET USER MEDIA CODE
//--------------------
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var video;
var webcamStream;
function startWebcam() {
if (navigator.getUserMedia) {
navigator.getUserMedia (
// constraints
{
video: true,
audio: false
},
// successCallback
function(localMediaStream) {
video = document.querySelector('video');
video.srcObject=localMediaStream;
webcamStream = localMediaStream;
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
}
function stopWebcam() {
webcamStream.stop();
}
//---------------------
// TAKE A SNAPSHOT CODE
//---------------------
var canvas, ctx;
function init() {
// Get the canvas and obtain a context for
// drawing in it
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
}
function snapshot() {
// Draws current image from the video element into the canvas
ctx.drawImage(video, 0,0, canvas.width, canvas.height);
}
</script>
</html>
getUserMedia api已经更新,现在公开了takePhoto和grabFrame。grabFrame方法不那么令人兴奋,因为它做了我们一直在做的事情,只是从流中返回下一个视频帧,但takePhoto会中断流,使用相机的"最高可用摄影相机分辨率"来捕捉压缩图像斑点。更多详细信息请点击此处:谷歌开发者
var stream, imageCapture;
function getMediaStream()
{
window.navigator.mediaDevices.getUserMedia({video: true})
.then(function(mediaStream)
{
stream = mediaStream;
let mediaStreamTrack = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(mediaStreamTrack);
console.log(imageCapture);
})
.catch(error);
}
function error(error)
{
console.error('error:', error);
}
function takePhoto(img)
{
const img = img || document.querySelector('img');
imageCapture.takePhoto()
.then(blob => {
let url = window.URL.createObjectURL(blob);
img.src = url;
window.URL.revokeObjectURL(url);
})
.catch(error);
};
/* just call */
getMediaStream();
/* and when you want to capture an image */
takePhoto();
getUserMedia不受IE11支持,请查看此链接:https://caniuse.com/#search=getuserMedia
因此,如果您仍然想使用getUserMedia的核心属性,那么您需要使用polyfill。看看这个polyfillink:https://github.com/addyosmani/getUserMedia.js
相关文章:
- 使用navigator.getUserMedia(Javascript)访问移动麦克风
- 使用webqr和getusermedia脚本扫描二维码
- getUserMedia()在使用Ajax加载时不起作用
- 使用Cordova和JavaScript(无需getUserMedia)从android麦克风获取音频数据
- 使用getUserMedia()同时录制来自多个麦克风的音频
- 使用PHP将通过getUserMedia()和Javascript获得的音频文件上传到服务器
- 使用getUserMedia后关闭网络摄像头/相机
- 在Chrome中使用HTML5和getUserMedia录制音频
- 使用 ScriptProcessorNode 实时处理 getUserMedia 音频
- 指示 getUserMedia 使用最佳可用相机分辨率
- 使用getUserMedia停止视频
- 如何使用getUserMedia流中的数据更新角度绑定
- 如何通过用户捕获图像's使用getUserMedia的网络摄像头
- 尝试使用getUserMedia帧率约束
- 使用getUserMedia访问设备相机
- 当在html和javascript中使用getUserMedia时,摄像头不显示
- 在初始拒绝后,使用getUserMedia()重新提示权限
- 试图使用getUserMedia和canvas捕获桌面图像
- 停止/关闭网络摄像头使用getUserMedia和RTCPeerConnection Chrome 25
- 使用getUserMedia()API时出现404错误