Ruch jpeg w html5 canvas

Próbuję zawinąć ruch strumienia jpeg (mjpeg) (z kamery internetowej) na płótno html5. Wiem, że Safari i Chrome mają natywne wsparcie dla mjpeg, więc mogę je umieścić w img, aby działało. Powodem, dla którego chcę go zawinąć na płótnie, jest to, że chcę na nim trochę przetworzyć.Ruch jpeg w html5 canvas

Wiem, że można używać drawImage aby załadować obraz (i 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>

jednak załadować MJPEG jako obraz tak tylko wyświetlić pierwszą klatkę. Wstawianie ctx.drawImage(img, 0, 0) do pętli while (true) również nie pomaga (co nie jest zaskakujące).

Myślę, że powinny istnieć pewne sztuczki, które sprawią, że zadziała, wciąż googlując, po prostu nie wiedząc, który kierunek jest bardziej obiecujący. Jest w porządku, aby być obsługiwanym tylko przez niektóre rozsądnie nowoczesne przeglądarki.

Źródło

2012-11-21 clwen

Co postu masz planował zrobić? – jazzytomato

Niektóre proste algorytmy widzenia, takie jak wykrywanie ruchu. – clwen

Nareszcie zadziałało, używając tej biblioteki: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas.

Mimo to nadal walczymy z problemem krzyżowym. Moje kolejne pytanie na temat: Canvas tainted by cross-origin data.

Źródło

2012-12-04 21:53:25 clwen

Innym rozwiązaniem jest dodanie tego do ciebie javascript.

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

Odświeży obraz na płótnie co 10 ms.

BR /Fredrik przetwarzanie

Źródło

2013-03-31 10:06:35 Fredrik

Odpowiedz

Powiązane problemy