Node-REDで使用するカメラの接続手段を調べてみた

この記事は[Node-RED Advent Calendar 2022](https://qiita.com/advent-calendar/2022/node-red) 17日目の記事です。

# はじめに
今回はNode-REDで使用できるカメラの接続できる方法を調べてみました。
ブラウザ上からカメラに接続できることを知ってNode-REDでできるかを調べてみたら色々な方法があったので一覧にしてみました。


# node-red-contrib-browser-utils Version: 0.0.11
### 使用できるノード
<img width="260px" alt="10527202-1509-1d4f-4bf2-d38cdfc31d17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/10527202-1509-1d4f-4bf2-d38cdfc31d17.png">

### cameraノード
<img width="180px" alt="6a0d2b07-66c2-fb02-5938-9acfd5d0f14f.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/6a0d2b07-66c2-fb02-5938-9acfd5d0f14f.png">

画像で見たようにスナップショットになります。クリックした時にカメラに接続し、カメラ映像を切り取ります。
希望としてはinjectをトリガーにして定期的にスナップショットができれば嬉ししい機能でした。
注意としてカメラに接続しっぱなしなのでカメラOFFの手段も併せて考えるといいです。

#### cameraノードの設定内容
<img width="460px" alt="d1851081-7d57-9a2f-67d1-55196dd920d2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/d1851081-7d57-9a2f-67d1-55196dd920d2.png">


# node-red-contrib-usbcamera Version: 0.0.6
USB カメラを使用して Raspberry Pi で写真を撮るためのノードになります。
### 使用できるノード
<img width="260px" alt="452436c4-bc6f-d22e-44ea-d450bf44011f.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/452436c4-bc6f-d22e-44ea-d450bf44011f.png">

### usbcameraノード
Raspberry Piに良く使用されるノードですね。injectをトリガーにして定期的にスナップショットができます。

#### usbcameraノードの設定内容
<img width="460px" alt="6b256a68-a95b-ea37-6c12-9d91947489d8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/6b256a68-a95b-ea37-6c12-9d91947489d8.png">


# node-red-node-ui-webcam Version: 0.4.0
node-red-dashboard内で使用できるWebカメラからのライブ画像を表​​示する UI ウィジェットになります。
### ui_webcameraノード
<img width="260px" alt="165e3075-9c4f-4a0d-bb47-bad000b10904.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/165e3075-9c4f-4a0d-bb47-bad000b10904.png">

#### ui_webcameraノードの設定内容
<img width="460px" alt="224b42fd-78fe-9af8-7514-2f72552da1d0.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/224b42fd-78fe-9af8-7514-2f72552da1d0.png">


このノードひとつでカメラに接続することができます。
注意としてnode-red-dashboardをインストールしていないとui_webcameraノードの表示が何も表示しません

実行方法の流れはこんな感じです。
- ダッシュボードの場所は、デバッグ表示横にあるメニューを開き、ダッシュボードの項目をクリックします。
- ダッシュボードの表示に移り、矢印の場所をクリックすると、ダッシュボードのブラウザが表示されます。

webcameraの表示はダッシュボードのWebで確認できます。

# node-red-dashboard Version: 3.2.3
ダッシュボード（計器盤）が作れる便利な部品が多くあります。 例外としてtemplateを使用して

### templateノード

<img width="180px" alt="48b3a0dc-d6e9-0204-52f5-a8663d8b5bfd.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/48b3a0dc-d6e9-0204-52f5-a8663d8b5bfd.png">


JavaScriptの getUserMedia() を使用してフロントカメラとリアカメラにアクセスする方法があります。
```haml
    <div>
        <video id="video"></video>
    </div>
    <script>
        const video = document.getElementById("video")
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false,
        }).then(stream => {
            video.srcObject = stream;
            video.play()
        }).catch(e => {
          console.log(e)
        })
    </script> 
```

#### templateノードの設定内容
<img width="460px" alt="3b04d943-2310-efa8-3f2a-7b2ffc8a20b4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/3b04d943-2310-efa8-3f2a-7b2ffc8a20b4.png">


上手く取りまとめできていませんが何かの参考にして頂ければ幸いです。 :bow: 

それでは、Node-REDでEnjoyしましょう！！