3

ビデオ フィード (フレーム) を 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サーバーまたは同様のものにストリーミングされるのに適しているかどうかを分析しようとしています。

4

1 に答える 1

1

から行を変更しました

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

に

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

問題を解決しました。ありがとう。

于 2012-10-08T14:50:13.623 に答える