캔버스를 사용하여 비디오 화면 캡처

Question

getusermedia()을 사용하여 웹캠과 마이크를 브라우저로 스트리밍했습니다. 그러나 캔버스를 사용하여 캡쳐 한 비디오는 검은 색 이미지를 출력합니다! ctx.drawImage(video, 0,0,640,480); window.open(canvas.toDataURL('image/jpeg')); 검은 이미지가 표시되는 이유는 무엇입니까? Ingmars가 문제를 해결했습니다.

이제 최대 10 초 비디오를 원한다면 프레임을 반복하고 .png를 하나씩 결합하는 방법을 생각해보십시오. 가능한가? 대체 방법이 없다면?

Answer 1

당신은 루프를 필요

//assuming canvas, ctx and video is set previously and available in all scopes. 

var fps = 1000/25; //Approximately 25 frames per second 

var videoDrawInterval = setInterval(function() { 
    ctx.drawImage(video, 0, 0, 640, 480); 
}, fps); 


something.onclick = function() { 
    clearInterval(videoDrawInterval); 

    var snapshotImg = new Image(); 
    snapshotImg.src = canvas.toDataURL('image/jpeg', 0.5); //Second param is jpg quality 

    var win = window.open('', 'Snapshot', 'width=640, height=480' ); 
    win.document.body.appendChild(snapshotImg); 
} 

곰 테스트를 위해 내가 PNG 형식을 사용하는 것이 좋습니다 것 때문에 JPEG 압축은 모든 브라우저에서 지원되지 않는 것을 염두에두고 :

canvas.toDataURL('image/png');