모션 JPEG (html5 캔버스)

모션 캡쳐 (webcam) 스트림을 html5 캔버스로 변환하려고합니다. Safari와 Chrome이 mjpeg에 대한 네이티브 지원을 가지고 있으므로 작동하도록하려면 img에 넣을 수 있습니다. 캔버스에 포장하려는 이유는 그 위에 몇 가지 사후 처리를하고 싶다는 것입니다.모션 JPEG (html5 캔버스)

는 I 내가 이미지 (와 MJPEG)를로드 drawImage 사용할 수 알고 화상이므로 첫 번째 프레임을 표시로

<html> 
    <body> 
    <canvas id='test_canvas' width='640px' height='480px' style='border:1px solid #d3d3d3'> 
    </canvas> 
    <script language="JavaScript"> 
     var ctx = document.getElementById('test_canvas').getContext('2d'); 
     var img = new Image(); 
     img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     }; 
     var theDate = new Date(); 
     img.src = "http://some.video.stream.edu/axis-cgi/mjpg/video.cgi?"; 
    </script> 
    </body> 
</html>

그러나, MJPEG로드. ctx.drawImage(img, 0, 0)을 while (true) 루프에 넣어도 도움이되지 않습니다 (놀랍지 않게).

나는 그것이 주위를 둘러싼 검색을하기 위해 몇 가지 트릭이 있어야한다고 생각하며 어느 방향이 더 유망한 지 확신하지 못합니다. 합리적으로 현대적인 브라우저에서만 지원되는 것이 좋습니다.

출처

2012-11-21 clwen

무엇 사후 처리는 당신이 할 계획이? – jazzytomato

모션 감지와 같은 간단한 비전 알고리즘. – clwen

마지막으로이 라이브러리를 사용하여 작동합니다 : http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

크로스 원점 문제로 여전히 싸우고 있습니다. 그래서 내 다른 질문 : Canvas tainted by cross-origin data.

출처

2012-12-04 21:53:25 clwen

다른 해결책은 이것을 자바 스크립트에 추가하는 것입니다.

window.setInterval("refreshCanvas()", 10); 
function refreshCanvas(){ 
    ctx.drawImage(img, 0, 0); 
};

캔버스의 이미지를 10ms마다 다시 그립니다.

BR /프레드릭

출처

2013-03-31 10:06:35 Fredrik

모션 JPEG (html5 캔버스)

답변

관련 문제