HTML5网络摄像头提要，试图在计时器上将图像绘制到画布上

我试图每隔250ms将视频提要（帧）绘制到画布中，但画布没有任何图像数据。这是我迄今为止所做的，我可以从网络摄像头获取视频，如果我在以下代码中做了任何错误，请给出建议：

   <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>

开始
var video=document.getElementById（“live”）；
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.get（）[0].getContext（'2d'）//将此行更改为“canvas.getContext（'2d'）”。
函数start（）{
webkitGetUserMedia（{video:true}，gotStream，function（）{}）；
btn.disabled=true；
}
函数gotStream（stream）{
video.src=webkitURL.createObjectURL（流）；
}
定时器=设置间隔(
函数（）{
ctx.drawImage（视频，0，0，320，240）；
}, 250);

感谢您的帮助，我正在尝试分析画布上接收到的图像是否适合流式传输到web服务器或类似的东西。

将行从

var ctx = canvas.get()[0].getContext('2d');

到

---

解决了这个问题。谢谢。

请将您的答案作为答案发布，谢谢：）

var ctx = canvas.getContext('2d');