Node-RED の OBS用ノード「node-red-contrib-obs-ws」で OBS を操作する【シーンの切り替え】

タイトル通りの内容です。

以下の OBS用ノードを使い、Node-RED から OBS を操作します。

●node-red-contrib-obs-ws (node) - Node-RED
　https://flows.nodered.org/node/node-red-contrib-obs-ws

## サクッと試す
それでは、OBS のシーンの切り替えをさくっと試していきます。

### OBS側の準備
#### プラグインの導入
OBS側は、過去に以下の記事でも書いたプラグインである「[obs-websocket](https://github.com/Palakis/obs-websocket)」を導入する必要があります。

●OBS をスマホや M5GO（M5Stack）から遠隔制御 〜 MQTT や obs-websocket を利用 〜 - Qiita
　https://qiita.com/youtoy/items/23fb0e16f1a4428b5c9b

プラグインのインストールをした後は、OBS のメニューから「ツール ⇒ Websocket サーバ設定」と進み、「WebSockets サーバーを有効にする」という部分にチェックを入れて OK を押してください。
（メニューもメニュー内も、WebSocket の表記がバラバラな感じが...）

![OBSのプラグインの設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ec6b893d-95a5-d04a-57a3-2afe16ad9777.jpeg)

サーバーポートは、他にご自身が使っているものとバッティングしていなければ、デフォルトのままで OK ですが、他とバッティングしてうまく動かない時は適宜変更してください。
また「認証」については、第3者がPCに接続できない構成の場合は、利用しない形でも大きな問題はないと思います。今回は認証なしにしています。

これらを完了させた状態にすると、OBS がアプリ外部からの通信を待ち受ける状態になります。

#### シーンの設定

また、シーンの切り替えを行うので、OBS上でシーンをいくつか作成しておきましょう。
自分は、以下の3つを用意しました。
![OBS上の3つのシーン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7feb6118-518d-00e2-140a-79741b69cf7d.jpeg)

ちなみに、上から順に以下のような表示を行うシーン設定となっています。

1. 黒背景の画面に、大きく「休憩中」という表示が出ている場面
2. PC のカメラ映像が画面全体に出ている画面
3. 画面全体に画像が表示されており、その一部にピクチャインピクチャで PC のカメラ映像が出ている

### Node-RED側の準備
以前、以下の記事を書いた際は Node-RED の「websocket out」ノードを使い、自分で中身を直書きした JSON を送る、というやり方で OBS の操作を行っていました。

●Node-RED を使って OBS を遠隔操作してみた話（obs-websocket を利用）｜豊田 陽介｜note
　https://note.com/youtoy/n/nf404040a91c0

今回は、OBS の外部操作を行う際に Node-RED で活用できる「node-red-contrib-obs-ws」を使います。

#### OBS用ノードの追加
冒頭でも記載をしていましたが、今回 Node-RED上で利用するノードは以下になります。

●node-red-contrib-obs-ws (node) - Node-RED
　https://flows.nodered.org/node/node-red-contrib-obs-ws

Node-RED右上のメニューから「パレットの管理」を選び、「ノードの追加」タブを選択した中で「obs-ws」というキーワードで検索をかけ、その結果に出てくる「node-red-contrib-obs-ws」ノードを選択してください。
この操作でノードの追加をすると、以下が利用可能になります。
![node-red-contrib-obs-wsのノード](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1bf01257-1af5-3fd0-308b-a10015dcc58e.jpeg)

今回は、この中の「SetCurrentScene」ノードを利用して、OBS のシーン切り替えを実現します。

#### フローを作って実行する
「SetCurrentScene」ノードを配置して、設定画面を開いてみます。
![SetCurrentSceneノード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e8ac312d-44e8-cc22-7bb9-094233b4506c.jpeg)

そうすると「OBS に接続されていない」というような表示が出ているので、OBS に接続するための設定を行います。
「OBS Instance」と書かれた横に、「新規に obs Instance を追加...」と書かれたメニューがありますが、その横のペンのマークのようなアイコンを押します。
そうすると、以下の画面が表示されるので、OBS のプラグイン設定画面でのポート番号と合致する内容にしてから、画面右上の「追加」ボタンを押しましょう。
![接続先の新規設定.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/67013d91-9748-6ecb-fcd5-18a71d5345bf.jpeg)

その後の画面で、いったん右上にある「完了」ボタンを押し、その後のフローが表示された画面右上の「デプロイ」ボタンを押します。
そうすると、以下のように「SetCurrentScene」ノードの設定画面に表示されていたエラーが消えています。
![エラーが消えた状態.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/18db8ae9-07b6-7b67-48bc-91482cee4a57.jpeg)

以下の公式の説明に書かれているのですが、このエラーメッセージが消えた状態（OBS とつながった状態）になると、OBS側で設定しているシーンの情報が Node-RED側で自動的に取得されるようです。
![node-red-contrib-obs-ws__node__-_Node-REDのコピー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/18d42e10-b847-4356-709a-cb1c4fc7211b.jpeg)

OBS から自動取得されたシーンのリストを使って、設定を進めてみます。
設定の中の「Scene Name」という部分で、以下の矢印で示した部分を押すと「Scene」という項目が選べるようになっています。
![シーンの自動取得後の画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ecdb3c27-7c15-6abb-04c1-fbc6bae41187.jpeg)
これを選ぶと、その右に OBS上で設定したシーンの名前が表示されます。

そして、シーン名の部分を押してみると、以下のように OBS で設定した全てのシーンのリストが表示されました。
この中の何れか 1つを選んで、画面右上の「完了」を押してください。
![シーンの選択画面.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/06b56618-28b0-4699-782d-d8305c7bba08.jpeg)

その後、以下のように「inject」ノードを追加してつなげたフローを作り、フローをデプロイします。
![フロー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e15ba81a-7a4e-a74d-1fde-6087919055cd.jpeg)

デプロイ後に「inject」ノードのボタン部分を押すと、OBS上のシーンが、先ほど「SetCurrentScene」ノードの設定画面で選んだシーンへ切り替わるのが確認できると思います。

#### 公式のサンプル
今回、シンプルなフローで OBS のシーン切り替えを試しました。
他にどのようなことができるかは、以下の公式の説明に書かれた公式サンプルのフローを見ると良さそうです。

![node-red-contrib-obs-ws__node__-_Node-RED.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/87e76537-e8e9-b908-6be9-220564a9ca2a.jpeg)

この公式サンプルを読み込んでみます。
Node-RED のフローの読み込み画面で、メニュー内の「サンプル」を選ぶと、その下の階層で以下のように公式サンプル「testing-flow」を選ぶことができます。
![追加したノードの公式サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/234ab568-a4c4-a5dd-1e0e-49fbff2074b4.jpeg)

これを実際に開いてみると、以下の画像におさまりきらないくらい、たくさんのフローの例が表示されます。
![追加したノードの公式サンプルのフロー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fe0174f0-be8f-05d2-17b6-441524970b7a.jpeg)

## まとめ
今回、Node-RED の OBS用ノード「node-red-contrib-obs-ws」を使って、Node-RED から OBS のシーン切り替えを行う仕組みを試しました。
「node-red-contrib-obs-ws」を利用することで、自前で「websocket out」ノードを使ったシーン切り替えを行った時より、簡単な設定・操作でシーン切り替えを実現できました。

「node-red-contrib-obs-ws」は、今回は利用しなかったたくさんのノードが用意されているため、それらの詳細も今後見ていければと思います。