Motion jpeg en html5 canvas

Je suis d'essayer d'envelopper motion jpeg (mjpeg) flux (à partir d'une webcam) en html5 canvas. Je sais que Safari et Chrome ont un support natif pour mjpeg, de sorte que je puisse le mettre dans img pour le faire fonctionner. La raison pour laquelle je veux l'envelopper dans de la toile, c'est que je veux faire du post-traitement.

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 comme une image de façon à afficher uniquement la première image. Mettre ctx.drawImage(img, 0, 0) dans un while (true) boucle aussi de ne pas l'aider (il n'est pas surprenant).

Je pense qu'il devrait y avoir quelques astuces pour le faire fonctionner, encore googler autour, pas sûr que la direction est la plus prometteuse. Il est OK pour être pris en charge uniquement par certains raisonnablement les navigateurs modernes.

Quel post-traitement avez-vous prévu de faire ?
Une simple vision de l'algorithme, telles que la détection de mouvement.

OriginalL'auteur clwen | 2012-11-21

  1. 5

    Une autre solution est d'ajouter ce dans vous javascript.

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

    Il va redessiner l'image dans le Canevas toutes les 10 ms.

    BR
    /Fredrik

    OriginalL'auteur Fredrik

  2. 3

    Finalement obtenu il fonctionne par l'utilisation de cette bibliothèque: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

    Bat toujours avec la croix-origine du problème. Mon autre question ALORS: Toile entachée par la croix-origine des données.

    OriginalL'auteur clwen