Motion JPEG en lienzo html5
Estoy tratando de envolver el flujo de movimiento jpeg (mjpeg) (de la cámara web) en el lienzo html5. Sé que Safari y Chrome tienen soporte nativo para mjpeg para poder ponerlo enimg para que funcione. La razón por la que quiero envolverlo en un lienzo es porque quiero hacer un procesamiento posterior en él.
Sé que puedo usardrawImage para cargar una imagen (y 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>
Sin embargo, carga mjpeg como una imagen, por lo que solo se muestra el primer cuadro. Ponerctx.drawImage(img, 0, 0) en unawhile (true) Bucle tampoco ayuda (no es de extrañar).
Creo que debería haber algunos trucos para hacer que funcione, seguir buscando en Google, pero no estoy seguro de qué dirección es más prometedora. Está bien que solo sea compatible con algunos navegadores razonablemente modernos.