MJPG-streamerのストリーミング映像をcanvasタグに描画する

4560 ワード
canvas MJPG-streamer JavaScript JavaScript テキストリンク

はじめに

MJPG-streamerのストリーミング映像をcanvasタグに描画するスクリプトを書いたので忘れないようメモ

※canvasじゃなくてvideoタグへの描画はこれ→MJPG-streamerのストリーミング映像をvideoタグに描画する

実行画面

ソース

作ったソース

sample.html
<html>
<head>
    <title>(sample) MJPG-streamer -> CANVAS Tag</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

function render() {
    const image = new Image();
    image.onload = function(){
      canvas.getContext("2d").drawImage(image, 0, 0, 400, 400);
    }
    // ↓ MJPG-streamerの静止画像をロード
    image.src = "http://xxxxxx:xxxx/?action=snapshot";
    requestAnimationFrame(render);
}
render();
</script>
</body>
</html>

補足

  • MJPG-streamerは、ラズパイで実装。
  • 先ほどのソース(sample.html)は、別にWebサーバーを立ててそこに置く
  • ラズパイにMJPG-streamerをインストールする手順 → リンク
  • ↓ は、MJPG-streamerのストリーミング実行のコマンド
$ /usr/local/bin/mjpg_streamer -i "input_raspicam.so -x 400 -y 400 -fps 15 -q 80" -o "output_http.so -p 8090 -w /usr/local/share/mjpg-streamer/www"
ERROR NoMethodError: private method `gsub' called for
Spring追加削除を実現