Raspberry Piカメラのストリーミング映像をNode-REDのダッシュボードに埋め込む
Raspberry Piカメラのストリーミング映像をNode-REDのダッシュボードに埋め込むときのTipsです。
RPi-Cam-Web-Interfaceを使うと簡単にRaspberry Piカメラの映像をストリーミングしてウェブブラウザで閲覧できるようになります。
このRPi-Cam-Web-Interfaceのストリーミングの映像をNode-REDのダッシュボードにキレイに埋め込もうとすると一工夫必要です。
インターネットを検索すると、RPi-Cam-Web-Interfaceをインストールしたときに入っているmin.phpをtemplateノードを使って埋め込む方法が出てきます。 t3alliance.org
この方法で基本的にはうまくいくのですが、（上記のサイトの説明画像の通り）ライブ映像の周りにスクロールバーが出てしまいます。
これを解消するには、min.phpを改造した以下のソースをnode-red.phpという名前でRPi-Cam-Web-Interfaceのディレクトリ(/var/www/)に保存します。
上記の例ではカメラの映像が1fpsでストリーミング再生されます。init関数の第二引数でフレームレートを設定することができるので、適宜調整してください。（監視カメラやベビーモニター用途だと、1~3fpsぐらいで十分。あまりフレームレートを高くするとクライアントもサーバも消費が大きくなりますので、必要最低限がおすすめ）
次に、node-REDでテンプレートノードを作り、HTMLコードとして以下のコードを入力します。
<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=500 width=500 src="http://192.168.xxx.xxx/node-red.php"></iframe>
画像のサイズは、RPi-Cam-Web-InterfaceのメインページにあるCamera Settings にある、Video res:で変更できます。値はテンプレートノードで指定したheightとwidthに合わせます。（ビデオのフレームレートを変更する項目もありますが、これは上記のnode-red.phpには反映されないので注意してください。）
これで、きれいにNode-redのダッシュボードにストリーミング映像を埋め込めます。
