7
Tôi đang cố gắng bọc dòng chuyển động jpeg (mjpeg) (từ webcam) vào canvas html5. Tôi biết Safari và Chrome có hỗ trợ gốc cho mjpeg để tôi có thể đặt nó vào img để làm cho nó hoạt động. Lý do tôi muốn bọc nó trong vải là tôi muốn làm một số bài xử lý trên đó.Chuyển động jpeg trong html5 canvas
Tôi biết tôi có thể sử dụng drawImage để tải một hình ảnh (và 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>
Tuy nhiên, nó tải mjpeg như một hình ảnh để chỉ hiển thị frame đầu tiên. Đặt ctx.drawImage(img, 0, 0) vào vòng lặp while (true) cũng không giúp (không đáng ngạc nhiên).
Tôi nghĩ rằng cần có một số thủ thuật để làm cho nó hoạt động, vẫn googling xung quanh, chỉ cần không chắc chắn đó là hướng hứa hẹn hơn. Chỉ có thể được hỗ trợ bởi một số trình duyệt hợp lý hiện đại.
Bạn đã lên kế hoạch xử lý hậu kỳ nào? – jazzytomato
Một số thuật toán thị giác đơn giản, chẳng hạn như phát hiện chuyển động. – clwen