Ruch jpeg w kanwie HTML5
Usiłuję zawinąć ruch strumienia jpeg (mjpeg) (z kamery internetowej) w kanwę HTML5. Wiem, że Safari i Chrome mają natywną obsługę mjpeg, dzięki czemu mogę to zrobićimg aby to działało. Powodem, dla którego chcę zawinąć go w płótnie, jest to, że chcę na nim wykonać pewne przetwarzanie końcowe.
Wiem, że mogę użyć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 ładuje mjpeg jako obraz, więc wyświetlaj tylko pierwszą klatkę. Położyćctx.drawImage(img, 0, 0) w awhile (true) pętla też nie pomaga (nic dziwnego).
Myślę, że powinny istnieć pewne sztuczki, które sprawią, że zadziała, nadal będzie się poruszać, nie wiem, który kierunek jest bardziej obiecujący. Wspieranie się tylko przez niektóre nowoczesne przeglądarki jest w porządku.