Как сделать изображение с веб-камеры в HTML

Question

Я просто хочу знать, как сделать снимок с веб-камеры с помощью javascript и создать это изображение на веб-странице. Я видел другие способы сделать это, но никто из них не объясняет, как его использовать. Может ли кто-нибудь объяснить, как это сделать?

Answer 1

Первоначально на дисплее элемента холста установлено значение none. Видно только видеокадра. Когда пользователь нажимает на CAPTURE, отображается холст и отображается видеоэлемент. Содержимое кнопки изменяется на RETAKE.

работает демо на codepen capture image using javascript

(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() { 
 
    \t video.style.display = "none"; 
 
    canvas.style.display = "block"; 
 
    startbutton.innerText= "RETAKE"; 
 
    \t 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) { 
 
    \t if(startbutton.innerText==="CAPTURE") 
 
    { 
 
    \t takepicture(); 
 
    } 
 
    else 
 
    { 
 
    \t video.style.display = "block"; 
 
    \t canvas.style.display = "none"; 
 
     startbutton.innerText= "CAPTURE"; 
 
    } 
 
    ev.preventDefault(); 
 
    }, false); 
 

 
})();

<video id="video"></video> 
 
<canvas id="canvas" style="display:none;"></canvas> 
 
<div id="buttoncontent"> 
 

 
</div> 
 
<button id="startbutton">CAPTURE</button>