はじめに
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"