Motion jpeg-Dateien in html5-canvas

Ich versuche zu wickeln, motion jpeg (mjpeg) stream (webcam) in html5 canvas. Ich weiß, Safari und Chrome haben native Unterstützung für mjpeg, so dass ich es in img machen, damit es funktioniert. Der Grund, warum ich wollen, wickeln Sie es im canvas-Bereich ist, dass ich möchte, um einige post-processing auf.

Ich weiß, dass ich verwenden können drawImage laden eines Bildes (und 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>

Jedoch, es zu laden mjpeg, wie ein Bild so zeigen nur den ersten frame. Setzen ctx.drawImage(img, 0, 0) in eine while (true) Schleife auch nicht helfen (nicht überraschend).

Ich denke, es sollte einige tricks, damit es funktioniert, immer noch googeln um nur nicht sicher, in welche Richtung ist vielversprechend. Es ist in Ordnung, nur unterstützt von einigen halbwegs modernen Browsern.

  • Was die Nachbearbeitung haben Sie geplant zu tun ?
  • Einige einfache vision Algorithmus, wie z.B. Bewegungserkennung.
InformationsquelleAutor clwen | 2012-11-21
  1. 5

    Andere Lösung ist, fügen Sie diese in javascript.

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

    Wird es Neuzeichnen des Bildes im Canvas-Bereich alle 10 ms.

    BR
    /Fredrik

    InformationsquelleAutor Fredrik
  2. 3

    Habe endlich es funktioniert durch die Verwendung dieser Bibliothek: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

    Kämpft immer noch mit cross-origin-problem. Meine andere Frage SO: Leinwand, befleckt von cross-origin-Daten.

    InformationsquelleAutor clwen
Schreibe einen Kommentar