PDHにつないだUSBカメラ画像(動画)の表示

Contents

PDH につないだUSBカメラ画像(動画)の表示
1. 概要
2. 導入手順
3. 使用した機材
4. mjpg-streamer のインストールと動作確認
4-1. mjpg-streamerのインストール
4-2. mjpg-streamerの動作確認
5.Node-RED画面での表示
5-1. ダッシュボードに表示
5-2. Node-REDでmjpg_streamerを起動+表示確認
Appendix1 mjpg_streamerのオプション
1) プラグイン input_uvc.so
2) プラグイン output_http.so

PDH につないだUSBカメラ画像(動画)の表示

1. 概要

PDH(Physical Data Hub)として使用しているRaspberry Pi 4に外付けカメラを設置し、その画像をNode-REDのダッシュボードに表示する手順をまとめます。

2. 導入手順

導入手順の概要を以下にまとめます。
1) mjpg-streamer の Raspberry Pi 4へのインストールと動作確認
2) Node-RED画面での表示：dashboardのTemplateノードを使用し表示

3. 使用した機材

今回導入の動作確認を行った機材を以下に示す。
1)Raspberry Pi 4 ： OS Raspbian GNU/Linux 10 (buster)
2)USBカメラ：ELECOM製 200万画素Webカメラ UCAM-C520FBBK

4. mjpg-streamer のインストールと動作確認

・mjpg-streamerは、Linux互換カメラの映像をWeb配信するためのアプリケーションです。カメラから直接JPEGデータを生成し、リアルタイムに高速なストリームを出力します。CPUやメモリリソースの少ない組み込みデバイス向けに作成されたアプリであり、Rasberry Pi zeroのようなCPU処理量やメモリが少ない機器でも動作します。

・参考HP：Raspberry Pi で MJPG-Streamer を使って監視カメラを作ってみよう

・ mjpg-streamerのソースページ：https://github.com/neuralassembly/mjpg-streamer

4-1. mjpg-streamerのインストール

・参考HPに従ってインストール。Raspberry Piの端末画面で以下のコマンドを順次実行します。
a) update情報の更新
$ sudo apt update

b) ライブラリのインストール
$ sudo apt install -y git cmake libjpeg-dev

c) mjpg-streamerのソースの取得

$ git clone https://github.com/neuralassembly/mjpg-streamer.git

d) mjpg-streamerのコンパイル

$ cd mjpg-streamer/mjpg-streamer-experimental
$ make
$ sudo make install

以上でmjpg-streamerのインストールは終了です。
次に、動作確認を行います。

4-2. mjpg-streamerの動作確認

・ mjpg-streamerの動作確認を行います。
・ mjpg-stremerは、何から入力して、何に出力するのかを’-i’と’-o’の後に指定するプラグインで明示します。
そのため、’-i’の後に指定する入力用プラグインの.soファイルが入力毎に異なります。また、’-o’ の後に指定する出力用プラグインの.soファイルも出力毎に異なります。
また、プラグインの後に記述できるオプションもプラグイン毎に異なります。
・サポートされている入出力を表1に示します。
ここでは、USBカメラ入力で、http送信の動作確認を行います。

表1. サポートされている入出力名とプラグイン名一覧

各プライグインのオプションの確認は、~/mjpg-streamer/mjpg-streamer-experimentalのフォルダ内で、
$ ./mjpg_streamer –output “output_file.so –help” or mjpg_streamer -i ‘input_uvc.so –help’ のようにコマンドを実行して確認してください。
Appendix 1に、 input_uvc.so と output_http.so のオプション一覧を示します。

・実際にコマンドを入力します。

$ mjpg_streamer -o ‘./output_http.so -w ./www -p 8080’ -i ‘./input_uvc.so –r 640×480 -fps 10 –q 80’

・ Web Browserを立ち上げて、http://localhost:8080/ にアクセスします。以下の様な画面が表示されますので、左のメニューからStreamをクリックします。

さらに、Hintsの文字の中にある”click here”の”here”をクリックします。次のように、動画だけの画面になります。

・ソースを確認すると、以下のように<img src=“./?action=stream” /> で読んでいることが分かります。これは次のNode-REDに表示する際に使用します。

・以上で、動作確認が完了です。
・次に、Node-REDでの表示に移ります。

■補足
前ページと本ページのhtmlは、~/mjpg-streamer/mjpg-streamer-experimental/www/の下にある以下のhtmlファイルが表示されている
・ index.html
・ stream.html
・ stream_simple.html

5.Node-RED画面での表示

ここからNode-REDのダッシュボードに表示させます。
次の2ステップで進めます。
1)ダッシュボードに表示：mjpg_streamerは端末で起動しておく
2)Node-REDでmjpg_streamerを起動+表示確認

5-1. ダッシュボードに表示

dashboardのTemplateノードを使用します。

① Templateノードを配置します

② Templateノードのタブを新規設定します

③ Templateノードのグループを新規設定します

④ HTMLコードを変更します。

<div align="center">
  <img ng-src="{{src}}" style="width: 640px;">
</div>
<script>
  (function (scope) {
    const url = 'http://' + location.hostname + ':8080/?action=stream’;
    scope.src = url;
  })(scope);
</script>

⑤ 完了したら、デプロイをします。

⑥ 端末画面で、以下のコマンドを打ち、mjpg_streamerを起動します。

$ mjpg_streamer -o ‘./output_http.so -w ./www -p 8080’ -i ‘./input_uvc.so –r 640×480 -fps 10 –q 80’

⑦ Node-REDのダッシュボード画面を開きます。

Node-REDのダッシュボード上に画像が表示されています。

■ 補足

上記のHTML内のURLの指定方法は、汎用性を持たせるために、hostnameで書いていますが、
const url = ‘http://’ + location.hostname + ‘:8080/?action=stream’;
上手くいかないときの確認などのために、以下のように直接host名を記載しても問題ないです。
const url = ‘http://gw15c1:8080/?action=stream’;

5-2. Node-REDでmjpg_streamerを起動+表示確認

5-1.では、mjpg-streamerを端末で起動しましたが、Node-REDの画面から起動するようにNode-REDを変更します。

① 端末で起動しているmjpg_streamerを[Ctrl+C]で止めます。

② Node-REDのエディタ画面で、Injectノードとexecノードを配置します。2つのノードを繋いでおきます。

③ Injectノードをダブルクリックし、名前を変更します。

④ execコマンドを開き、コマンドを入力します。プラグインを表1に記載してあるフルパスで入力して下さい。

mjpg_streamer -o ‘/usr/local/lib/mjpg-streamer/output_http.so
-w ./www -p 8080′ -i ‘/usr/local/lib/mjpg-streamer/input_uvc.so –r 640×480 -fps 10 –q 80’

⑤ 名前を変更します。