Motion jpeg in html5 canvas

Sto provando a eseguire il wrapping del flusso jpeg (mjpeg) (dalla webcam) nella tela html5. So che Safari e Chrome hanno il supporto nativo per mjpeg in modo da poterlo inserire in img per farlo funzionare. Il motivo per cui voglio avvolgerlo nella tela è che voglio fare un po 'di post-elaborazione su di esso.Motion jpeg in html5 canvas

so di poter utilizzare drawImage per caricare un'immagine (e MJPEG):

<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>

Tuttavia, caricare MJPEG come immagine così visualizzare solo il primo fotogramma. Inserire ctx.drawImage(img, 0, 0) in un ciclo while (true) anche non aiutare (non sorprendentemente).

Penso che ci dovrebbero essere alcuni trucchi per farlo funzionare, ancora su Google, ma non sono sicuro di quale direzione sia più promettente. Va bene essere supportati solo da alcuni browser ragionevolmente moderni.

fonte

2012-11-21 clwen

Che messaggio ha pianificato di fare? – jazzytomato

Alcuni semplici algoritmi di visione, come il rilevamento del movimento. – clwen

Finalmente funziona utilizzando questa libreria: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

Ancora in lotta con problemi di origine incrociata però. Un'altra mia domanda su SO: Canvas tainted by cross-origin data.

fonte

2012-12-04 21:53:25 clwen

Un'altra soluzione è aggiungere questo in javascript.

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

Ridisegnerà l'immagine nella tela ogni 10 ms.

BR /Fredrik elaborazione

fonte

2013-03-31 10:06:35 Fredrik

Motion jpeg in html5 canvas

risposta

Problemi correlati