js의 웹캠에서 원본 이미지를 얻는 방법은 무엇입니까?

Question

왼쪽에서 웹캠 비디오를 가져 와서 이미지가 그려지는 위치와 같은 형식으로 만들 수 있습니까?

잠시 동안이 문제가 있었고 알아낼 수 없습니다! 당신은 당신의 비디오 HTML 요소의 크기 대신 스트림의 크기를 사용하는

document.getElementById('capture').addEventListener('click', function() { 
    var w = video.videoWidth; 
    var h = video.videoHeight; 
    canvas.width = w; 
    canvas.height = h; 
    context.drawImage(video,0,0,w,h); 
    canvas.style.display='block'; 

}); 

Answer 1

video.videoWidth는 비디오의 실제 너비가 아니므로 새로운 캔버스에서 다른 비율을 얻습니다. 이것을 시도하십시오 :

var videoRatio = video.videoWidth/video.videoHeight; 
var width = video.offsetWidth, height = video.offsetHeight; 
var elementRatio = width/height; 
if(elementRatio > videoRatio) width = height * videoRatio; 
else height = width/videoRatio; 

canvas.width = width; 
canvas.height = height; 
context.drawImage(video,0,0,width,height); 
canvas.style.display='block'; 

Answer 2

:

여기에 코드입니다. 그래서 사진이 늘어납니다. 비디오 트랙의 크기를 사용해야합니다.

MediaDevices.getUserMedia을 호출하는 동안 지정한 경우 해당 값을 사용하십시오. 그렇지 않으면 비디오 트랙 (MediaStreamTrack.getSettings())에서 검색하십시오.