Motion jpeg en toile html5

J'essaie d'enrouler le mouvement jpeg (mjpeg) flux (de la webcam) en toile html5. Je sais que Safari et Chrome ont un support natif pour mjpeg afin que je puisse le mettre en img pour le faire fonctionner. La raison pour laquelle je veux envelopper dans la toile est que je veux faire un post-traitement sur elle.Motion jpeg en toile html5

Je sais que je peux utiliser drawImage pour charger une image (et 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>

Cependant, il charge MJPEG sous forme d'image affiche si seule la première image. Mettez ctx.drawImage(img, 0, 0) dans une boucle while (true) aussi pas aider (pas étonnant).

Je pense qu'il devrait y avoir quelques astuces pour le faire fonctionner, encore googler, mais je ne sais pas quelle direction est la plus prometteuse. Il est acceptable d'être uniquement pris en charge par certains navigateurs raisonnablement modernes.

Source

2012-11-21 clwen

Qu'est-ce que le post-traitement avez-vous prévu de faire? – jazzytomato

Un algorithme de vision simple, tel que la détection de mouvement. – clwen

Enfin obtenu cela fonctionne en utilisant cette bibliothèque: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

Toujours en train de se battre avec un problème d'origine croisée. Mon autre question sur SO: Canvas tainted by cross-origin data.

Source

2012-12-04 21:53:25 clwen

Une autre solution consiste à ajouter ceci dans votre javascript.

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

Il va redessiner l'image dans la toile toutes les 10 ms.

BR /Fredrik

Source

2013-03-31 10:06:35 Fredrik

Motion jpeg en toile html5

Répondre

Questions connexes