Движение JPEG в холсте html5
Я пытаюсь обернуть поток движения JPEG (MJPEG) (с веб-камеры) в HTML5 холст. Я знаю, что Safari и Chrome имеют встроенную поддержку mjpeg, так что я могу поместить его вimg заставить это работать. Причина, по которой я хочу обернуть это в canvas, заключается в том, что я хочу выполнить некоторую постобработку.
Я знаю, что могу использоватьdrawImage загрузить изображение (и 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>
Тем не менее, он загружает mjpeg как изображение, поэтому отображать только первый кадр. Ставитьctx.drawImage(img, 0, 0) вwhile (true) Цикл тоже не поможет (не удивительно).
Я думаю, что должны быть некоторые уловки, чтобы заставить это работать, все еще гугл вокруг, только не уверенный, какое направление более перспективно. Это нормально, чтобы поддерживаться только некоторыми достаточно современными браузерами.