我试图每250毫秒将视频帧绘制到画布上,但画布没有获取任何图像数据。目前为止,我已经可以从网络摄像头获取视频流,请您指导一下,下面的代码是否有错:
<div>
<video id="live" width="320" height="240" autoplay style="border:5px solid #000000"> </video>
<canvas width="320" id="canvas" height="240" style="border:5px solid #000000"> </canvas>
<button id="btn" onclick="start()">Start</button>
</div>
<script>
var video = document.getElementById("live");
var canvas = document.getElementById("canvas");
var ctx = canvas.get()[0].getContext('2d');//changed this line to "canvas.getContext('2d')".
function start() {
navigator.webkitGetUserMedia({video:true}, gotStream, function() {});
btn.disabled = true;
}
function gotStream(stream) {
video.src = webkitURL.createObjectURL(stream);
}
timer = setInterval(
function () {
ctx.drawImage(video, 0, 0, 320, 240);
}, 250);
</script>
非常感谢您的帮助,我正在尝试分析从画布接收到的图像是否适合流式传输到Web服务器或类似设备。