Javascript 如何使用 getUserMedia 通过用户的网络摄像头捕获图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33975431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I capture an image via the user's webcam using getUserMedia?
提问by PumpkinSeed
I want to make a program on the web which will capture an image via the user's webcam.
我想在网上制作一个程序，通过用户的网络摄像头捕捉图像。
I am using the getUserMediaWeb API. Here is my code, but it does not work. How can I change it to capture the webcam image?
我正在使用getUserMediaWeb API。这是我的代码，但它不起作用。如何更改它以捕获网络摄像头图像？
<div id="container">
<video autoplay="true" id="videoElement">
</video>
</div>
<script>
</script>
There is the JS:
有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
}
回答by scaisEdge
You can use this working sample
您可以使用此工作示例
<!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.src = window.URL.createObjectURL(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>
回答by tech-e
There have been updates to the getUserMedia api that now expose takePhoto and grabFrame. The grabFramemethod is less exciting because it does what we have been doing all along and just returning the next video frame from the stream but takePhoto interupts the stream to use the cameras "highest available photographic camera resolution" to capture a compressed image blob. More details here: google devs
getUserMedia api 已经更新，现在公开 takePhoto 和grabFrame。抓取帧方法不那么令人兴奋，因为它执行我们一直在做的事情，只是从流中返回下一个视频帧，但 takePhoto 中断流以使用相机“可用的最高摄影相机分辨率”来捕获压缩图像 blob。更多细节在这里：谷歌开发者
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();
回答by Santosh
getUserMediais not supported by IE11, take a look on this link: https://caniuse.com/#search=getuserMedia
IE11 不支持getUserMedia，请查看此链接：https: //caniuse.com/#search=getuserMedia
So if you are still wanted to use the core property of getUserMedia then you need to use polyfill. Take a look on this polyfilllink: https://github.com/addyosmani/getUserMedia.js
所以如果你仍然想使用 getUserMedia 的核心属性，那么你需要使用 polyfill。看看这个 polyfilllink：https: //github.com/addyosmani/getUserMedia.js
