如何使用getUserMedia通过用户的摄像头捕获图像？
如何使用getUserMedia通过用户的摄像头捕获图像？
提问于 2015-11-29 03:20:17
我想在网络上做一个程序，这将捕获通过用户的摄像头的图像。
我使用的是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
}回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-29 05:29:05
您可以使用此工作示例
<!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>Stack Overflow用户
发布于 2017-03-21 09:02:27
现在已经对公开takePhoto和grabFrame的getUserMedia应用程序接口进行了更新。grabFramemethod不那么令人兴奋，因为它做了我们一直在做的事情，只是从流中返回下一个视频帧，但takePhoto中断了流，以使用相机“最高可用的摄影相机分辨率”来捕获压缩的图像斑点。更多详细信息请访问：google devs
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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33975431
复制相关文章
相似问题