9

モーション jpeg (mjpeg) ストリーム (ウェブカメラから) を html5 キャンバスにラップしようとしています。Safari と Chrome が mjpeg をネイティブにサポートしていることは知っているので、mjpeg を使用しimgて動作させることができます。キャンバスでラップしたいのは、後処理をしたいからです。

私drawImageは画像（および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>

ただし、mjpeg を画像として読み込むため、最初のフレームのみを表示します。ループに入れctx.drawImage(img, 0, 0)てwhile (true)も役に立ちません (驚くべきことではありません)。

それを機能させるにはいくつかのトリックが必要だと思いますが、まだグーグルで調べていますが、どちらの方向がより有望かはわかりません. ある程度最新のブラウザーでのみサポートされていても問題ありません。

4

2 に答える 2

6

別の解決策は、これを JavaScript に追加することです。

window.setInterval("refreshCanvas()", 10);
function refreshCanvas(){
  ctx.drawImage(img, 0, 0);
};

キャンバス内の画像を 10 ミリ秒ごとに再描画します。

BR / フレドリック

于 2013-03-31T10:06:35.857 に答える
3

最後に、このライブラリを使用して動作するようになりました: http://www.ros.org/wiki/mjpegcanvasjs/Tutorials/CreatingASingleStreamCanvas。

ただし、まだクロスオリジンの問題と戦っています。SO に関する別の質問: Canvas tainted by cross-origin data。

于 2012-12-04T21:53:25.153 に答える