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

はじめに

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

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

実行画面

実行画面 pic.twitter.com/G5o0GgftJl
— j4amountain (@zsipparu) September 28, 2020

ソース

作ったソース

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"