作者akb49 (永和藤木直人)
看板Ajax
標題[問題] mjpeg 放入 canvas
時間Fri Nov 30 12:27:36 2012
有一段 webcam 的影片
我想放進 canvas 但不太確定怎麼作
webcam 的格式是 motion jpeg (mjpeg)
用 <img src='xxx.edu/mjpg/video.cgi?'> 其實可以跑的不錯
但放到 canvas 的話
我目前是這樣寫只會秀第一個 frame 就不動了
<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://xxx.edu/axis-cgi/mjpg/video.cgi?";
</script>
</body>
</html>
當然也沒有辦法把 drawImage 那段放進 while true 回圈就搞定這麼簡單
如果有板友知道解法的
還請指教一下 謝謝！
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 50.138.182.95
1F：推 LaPass:如果用JS就能做到的話，我也想學.... 11/30 12:29
2F：→ akb49:L 大的意思是說不太可能用 js 作到？ 11/30 12:33
3F：推 LaPass:我到目前為止沒看過js直接動stream的狀況，可能是我不知道 11/30 12:42
4F：→ LaPass:或是沒有。 11/30 12:42
5F：→ LaPass:像youtube那種，都是用flash去寫的..... 11/30 12:43
6F：→ LaPass:websocket可以傳東西，可是他有自己的格式。 11/30 12:45
7F：→ akb49:不過已經可以直接操作筆電 webcam 了 11/30 12:47
8F：→ alpe:用 video 吧. 11/30 13:41
9F：→ akb49:我要在上面套用一些簡單的演算法 需要各 pixel value 11/30 13:43
10F：→ akb49:所以得放到 canvas，用video 不夠 11/30 13:43
11F：→ fillano:video也可以用drawImage畫到canvas上阿，每次畫的都是當時 12/07 18:07
12F：→ fillano:frame 12/07 18:07