html摄像头图片抓取,javascript-如何从HTML网络摄像头中获取图像

我只想知道如何使用javascript从网络摄像头拍摄图像并将其创建到网页上.我已经看到了其他方法,但是没有一个方法说明如何使用它.有人可以解释如何做吗？

解决方法:

最初,canvas元素的显示设置为none.仅视频帧可见.当用户单击“捕获”时,将显示画布并显示视频元素.按钮内容更改为RETAKE.

(function() {

var streaming = false,

video = document.querySelector('#video'),

canvas = document.querySelector('#canvas'),

buttoncontent = document.querySelector('#buttoncontent'),

photo = document.querySelector('#photo'),

startbutton = document.querySelector('#startbutton'),

width = 320,

height = 0;

navigator.getMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

navigator.getMedia({

video: true,

audio: false

},

function(stream) {

if (navigator.mozGetUserMedia) {

video.mozSrcObject = stream;

} else {

var vendorURL = window.URL || window.webkitURL;

video.src = vendorURL.createObjectURL(stream);

}

video.play();

},

function(err) {

console.log("An error occured! " + err);

}

);

video.addEventListener('canplay', function(ev) {

if (!streaming) {

height = video.videoHeight / (video.videoWidth / width);

video.setAttribute('width', width);

video.setAttribute('height', height);

canvas.setAttribute('width', width);

canvas.setAttribute('height', height);

streaming = true;

}

}, false);

function takepicture() {

video.style.display = "none";

canvas.style.display = "block";

startbutton.innerText= "RETAKE";

canvas.width = width;

canvas.height = height;

canvas.getContext('2d').drawImage(video, 0, 0, width, height);

var data = canvas.toDataURL('image/png');

photo.setAttribute('src', data);

}

startbutton.addEventListener('click', function(ev) {

if(startbutton.innerText==="CAPTURE")

{

takepicture();

}

else

{

video.style.display = "block";

canvas.style.display = "none";

startbutton.innerText= "CAPTURE";

}

ev.preventDefault();

}, false);

})();

CAPTURE

标签：camera,javascript

来源： https://codeday.me/bug/20191111/2022814.html