271.ラズパイ無双[15_ｽﾄﾘｰﾐﾝｸﾞ]
初回：2022/8/24
Raspberry Pi （ラズベリーパイ、通称"ラズパイ"）で何か作ってみようという新シリーズです。今回は、ストリーミングに関するまとめを行いたいと思います。
P子「勉強編ね」※1
【目次】
2.requestAnimationFrame
3.HLSストリーミング
4.RTSP(Real Time Streaming Protocol)
5.サーバープッシュ技術
6.まとめ
1.MJPEG over HTTP
まずは、今回のopenCVストリーミングサーバーで実装した、multipart/x-mixed-replace 方式から。
90年代に Netscape 社により server push の手法として実装されました。 現在でも MJPEG の実現手法として用いられています。
P子「参考からの丸写し説明ね」
≪参考≫
https://wiki.suikawiki.org/n/Motion%20JPEG%20over%20HTTP$3087
Motion JPEG over HTTP
multipart/x-mixed-replace (MIME型)
この方式は、クライアントからのリクエストに対して、サーバー側が自分の都合でデータを送出し、クライアントは受信した本体部分をレンダリングしていきます。この一連の動作は、通信経路を閉じずに、連続でイメージデータを受信し、連続で表示するため、動画のように見えます。
P子「動画と言っても、静止画の繰り返しだもんね」
そういう特性なのか、それとも私の作り方に問題があるのか判りませんが、最初の動画の始まりまでに少し時間がかかります。それと、前回サンプルを提示したように、イメージデータの作成部分にスレッド制御を入れるなど、サーバー側が複雑になるようです。ですが、クライアント側のソースコードは簡単なので、一度、きちんと動くサーバーを作れば、それ以上触ることもないので、ストリーミングサーバー候補としては、有りだと思います。
2.requestAnimationFrame
『動画と言っても、静止画の繰り返し』です。これをサーバー側からのプッシュ技術ではなく、クライアント側からの非同期リクエストで処理する方法もあります。
すぐに思いつくのは、JavaScriptのsetTimeoutやsetIntervalで、一定時間間隔で静止画を取得する方法です。
もう一つは、Window インターフェイスのメソッドである『requestAnimationFrame() 』を使う方法です。
≪参考≫
https://www.webdesignleaves.com/pr/jquery/requestAnimationFrame.html
requestAnimationFrame の使い方
これは、ブラウザの描画のタイミングに合わせて指定したコールバック関数を実行する関数です。ただし、呼出は1回しか実行されませんので、コールバック関数の中で、requestAnimationFrame() を使って自身を呼び出して繰り返し処理を行うのが一般的な使い方になります。
<div>
<canvas id="img_C" width="640px" height="480px">ｲﾒｰｼﾞ表示領域</canvas>
</div>
<script>
const canvas = document.querySelector('canvas'); // document.getElementById("img_C");
const ctx = canvas.getContext('2d');
var v = 0; // ｷｬｯｼｭを OFF にしないと、変わらない。
function render() {
const image = new Image();
image.onload = function(){
ctx.drawImage(image, 0, 0, 640, 480);
}
// 静止画像をロード(v変数でｷｬｯｼｭ OFF)
image.src = "/snapshot?v=" + v++;
requestAnimationFrame(render);
}
render();
</script>
3.HLSストリーミング
HLSとは、Appleが実装したHTTPベースのメディアストリーミングプロトコルのことで、HTTP Live Streamingといいます。
≪参考≫
https://www.cloudflare.com/ja-jp/learning/video/what-is-http-live-streaming/
HTTPライブストリーミングとは？| HLSストリーミング
P子「なら、HLSストリーミングって、HTTP Live ストリーミングストリーミングって事になるわね」
細かいことは気にしないでください。
実はよく分かっていませんが、メディアストリーミングでの方式では最もよく使われていますが、リアルタイムのカメラ映像を描画するには、不向きでしょう。ザクっと調べたレベルでは、動画ファイルを分割して予め仕込んでおく必要がありそうで、よく分かりません。という事で、興味がある人は自分で調べてみましょう。
P子「調査自体を丸投げね」
4.RTSP(Real Time Streaming Protocol)
RTSPとは「Real Time Streaming Protocol」という名前のプロトコルで、「映像・音声のリアルタイムなストリーミング配信を制御」を目的としています。
これを再生する場合に、もっとも有名なのは『VLC media player』でしょう。というか、私は他に知りません。
≪参考≫
https://systemk-camera.jp/camera-blog/knowledge/what-rtsp.php
TSP(Real Time Streaming Protocol)とは？ネットワークカメラに関する知識
なので、手軽に動画を再生するという目的から言うと、クライアントにプログラムをインストールしないと再生できないというのは、ちょっと困りもんです。
5.サーバープッシュ技術
冒頭に説明しました『MJPEG over HTTP』も、サーバープッシュ技術と紹介しましたが、もっと一般的な手法はないのでしょうか？
≪参考≫
https://progzakki.sanachan.com/technology/server-push-technology/
HTTPサーバーからPushする技術の進化【まとめ】
2020年12月26日 2021年2月21日
P子「参考の一覧に、『MJPEG over HTTP』が乗ってないわよ」
サーバープッシュ技術というより、巨大なドキュメントを分割送信している技術なので、サーバープッシュには含まれないのかもしれません。
今後の話で言うと、HTTP/2 ベースの方式が良いのですが、その場合、https の場合、証明書（SSLサーバ証明書）が必要になってきます。『オレオレ証明書』でもよいのですが、当面は、http のままで使える技術が欲しいところです。
そうなると、一番の候補は『WebSocket』かなと思っています。特に、今目指しているのは、ラズパイが配信しているカメラ映像なので、同時アクセスも多くても数名程度だという認識です。
6.まとめ
前回まで、『MJPEG over HTTP』での画像配信サーバーを構築していました。一通り完成したと思っています。
しかし、もう一つの候補である、『WebSocket』ベースの画像配信サーバーを構築していきたいと思います。
どちらが良いか判りませんが、色々とテストしていきたいと思います。
ほな、さいなら
======= <<注釈>>=======
※1 P子「勉強編ね」
P子とは、私があこがれているツンデレPythonの仮想女性の心の声です。