Node-RED でカメラを使う（Simple Webcam pic と image-output）

Node-RED でカメラから得られた画像を使った処理を行ってみたくて、ググって見つかった内容の 1つである「[Simple Webcam pic](https://flows.nodered.org/flow/f8e97b37fdf51b1093032451f048a40e)」を試してみた話の記事です。

## はじめに
### Simple Webcam pic の概要
Node-RED でカメラからの入力を得る方法を調べた際、PC を使うものと Raspberry Pi を使うものとがあり、PC で利用できそうなものが下記でした。
　●Simple Webcam pic (flow) - Node-RED
　　https://flows.nodered.org/flow/f8e97b37fdf51b1093032451f048a40e

ページ内の冒頭の説明を見ると、実現できる内容は以下のとおり「ノートPC 内蔵のカメラか Webカメラから画像をキャプチャし、ダッシュボード内に表示する」というもののようです。
> From your Laptop Camera or Webcam, capture a picture and display in the dashboard

その続きを見ると、以下のとおり「node-red-contrib-browser-utils、node-red-dashboard、node-red-node-base64」の3つのノードを利用するもののようです。
> Needs the following Nodes to be added to the Palette
・node-red-contrib-browser-utils
・node-red-dashboard
・node-red-node-base64

具体的なフローの構成（ページ内に記載された JSON）は以下のとおりです。

```JSON
[{"id":"e43a7ed1.97b08","type":"tab","label":"Simple Webcam","disabled":false,"info":""},{"id":"f25e3092.364ac","type":"camera","z":"e43a7ed1.97b08","name":"","x":280,"y":280,"wires":[["619a99c4.faafa8"]]},{"id":"18edd75b.945009","type":"ui_template","z":"e43a7ed1.97b08","group":"7c71c7b8.2c9fe8","name":"Pic","order":0,"width":"6","height":"6","format":"<div>\n      <img src=\"data:image/png;base64,{{msg.payload}}\">\n</div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":770,"y":440,"wires":[[]]},{"id":"619a99c4.faafa8","type":"base64","z":"e43a7ed1.97b08","name":"","action":"","property":"payload","x":520,"y":340,"wires":[["18edd75b.945009"]]},{"id":"7c71c7b8.2c9fe8","type":"ui_group","z":"","name":"Default","tab":"fbf5c038.d632b","disp":true,"width":"6","collapse":false},{"id":"fbf5c038.d632b","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
```

## Simple Webcam pic を読み込んで動作させる
それでは、上記のフローを Node-RED に読み込ませてみます。

### 3つのノードを追加する
もし、以下の 3つのノードが追加されていない場合は、最初にこれらを追加します。

- node-red-contrib-browser-utils
- node-red-dashboard
- node-red-node-base64

ノードの追加は、画面右上のハンバーガーメニュー（3本の線が縦に並んだアイコン）から「パレットの管理」を選択して進めていきます。
ノードの追加方法について、[以前書いた記事で画像付きで説明した部分](https://qiita.com/youtoy/items/102c9ab8b5f25d542056#teachable-machine%E7%94%A8%E3%81%AE%E3%83%8E%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)があるので、よろしければご参照ください。

### フローを読み込む
3つのノードの準備が終わった後は、冒頭でも記載したフローの内容（JSON で書かれたもの）を Node-RED上で追加します。

以下の画像のとおり、画面右上のハンバーガーメニュー（緑矢印で示した部分）をクリックし、その下に出てくるメニューの「読み込み」を選択します。
<img width="509" alt="Node-REDでのフローの追加.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/37461e67-1215-15f4-158c-b65a0b52bbcb.jpeg">

そして以下の緑矢印で示した部分に JSON形式のテキストをコピペし、以下の緑矢印で示した「読み込み」ボタンをクリックします。
<img width="463" alt="Node-REDでのフローの読み込み.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/34692a34-0b15-50f5-8cc5-a2fba69c8215.jpeg">

フローの読み込みが完了した後の画面は以下となります。
<img width="722" alt="フローの読み込み後.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/00c9717f-b8b7-5c8b-64a4-e2e8df778c69.jpeg">

### フローを実行する

読み込めたら画面右上の「デプロイ」ボタンを押しましょう。
<img width="876" alt="デプロイ.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f740e927-b231-0941-251e-7d4df22ef11e.jpeg">

実行結果の画像出力は別画面に出てくるので、実行前にそれを開いておきます。
まず、以下の赤矢印で示した部分を押します。
<img width="864" alt="ダッシュボードを開く1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/3679d478-a5bb-3e1b-3ac1-6012c0198edc.jpeg">

さらに、以下の赤矢印で示した部分を押します。
<img width="406" alt="ダッシュボードを開く2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5ea5d70f-1eb1-17c3-3044-37351c63b4fd.jpeg">

そうすると、別タブでページが開き、以下のような画面が表示されます。
<img width="825" alt="ダッシュボードを開く3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f371e2bf-0b64-036b-b6d4-44ddf9c5354f.jpeg">

その後、フローが表示された画面に戻り、以下の赤矢印で示した部分を押してフローを実行します。
<img width="481" alt="フローの実行.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/68e4f4f1-5984-6849-f22a-83f2cd6bf91f.jpeg">

先ほどの別タブで開いた画面に戻ると、PC内蔵のカメラで取得した画像が表示されました。
<img width="683" alt="画像の出力.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4a8da00f-73fd-1090-06c2-51ea006fde45.jpeg">

## フローの表示された画面内でも画像を表示させる
[以前、記事を書いた際に追加をしたノードの「node-red-contrib-image-output」を追加](https://qiita.com/youtoy/items/102c9ab8b5f25d542056#teachable-machine%E7%94%A8%E3%81%AE%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%92%E5%8B%95%E3%81%8B%E3%81%99)して、フロー上にもカメラ画像が表示されるようにしてみます。

以下の赤矢印で示した image のノードを右側のフローのほうへ移動させます。
<img width="582" alt="画像プレビューを追加する.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ad07a709-da9c-a376-f3ad-d7d733ab3889.jpeg">

そして、以下の赤矢印で示したように camera と image のノードの間をつなぎます。
<img width="714" alt="画像プレビューをつなげる.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/15369036-566a-c3b1-cd2e-095ea1e31c5c.jpeg">

そして、**フローに変更を加えたので画面右上の「デプロイ」ボタンを押し**、変更を反映させます。

以下の赤矢印で示した部分を押して、再度フローを実行してみましょう。
<img width="525" alt="再度フローを実行する.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6aaf89df-8a9b-b27a-f743-214f19eecea1.jpeg">

以下のように、フロー上でもカメラからキャプチャした画像を確認することができるようになりました。
<img width="525" alt="画像のプレビュー.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b549470b-d85c-28d1-d25d-700cc4ab1189.jpeg">

## まとめ
今回、Node-RED でカメラからの画像取得を行って、画面に表示させてみました。
「[Simple Webcam pic](https://flows.nodered.org/flow/f8e97b37fdf51b1093032451f048a40e)」と「node-red-contrib-image-output」を合わせて使うことで、カメラから取得した画像をフロー上にもダッシュボード上にも表示できました。

今後、カメラから取得した画像を使った、新たな処理を加えたものを作ってみようと思います。