Node-RED から ATEM mini を操作してみた。

# はじめに
最近、特定少人数のオフラインイベントの配信や完全オンラインイベントの配信活動が増えてきました。
その時に大活躍してくれるのが <A HREF="https://www.blackmagicdesign.com/jp/products/atemmini">ATEM mini</A> ですが、USB Type-C で接続する他にネットワーク経由で操作することができます。
手元でボタン操作ができない時にリモートから画面を切り替える場合、ATEM Software Control を使用します。
ネットワーク経由で操作できるということで、Node-RED から ATEM mini を操作してみました。

<img width="75%" alt="title.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/a4497c73-3903-48a6-86e6-a169891a421b.png">

# BMD プロトコル
ネットワーク経由で操作する際に <A HREF="http://skaarhoj.com/fileadmin/BMDPROTOCOL.html">BMD (Black Magic Design)</A> というプロトコルが使用されていることが分かりました。Wireshark を起動してプロトコルの内容を見てみることにします。
デフォルトの Wireshark では BMD プロトコルを解析できませんので、<A HREF="https://github.com/peschuster/wireshark-atem-dissector">プラグイン</A>をインストールします。
以下、macOS を例に説明します。

### lua のインストール

```bash
$ brew install lua
```

### 解析プラグインのインストール

```bash
$ mkdir ~/.config/wireshark
$ mkdir ~/.config/wireshark/plugins
$ git clone https://github.com/peschuster/wireshark-atem-dissector
$ mv wireshark-atem-dissector/atem_dissector.lua ~/.config/wireshark/plugins
```

Wireshark を起動すると、ATEM mini と ATEM Software Control が通信している内容を確認することができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/916b8b83-20c3-8f3b-9967-895a877bb0ce.png" width=75%">

# ATEM Switchers SDK
ATEM Switchers 8.1.2 SDK (執筆時点) が公開されており、オリジナルのスイッチャーアプリを作成することができます。
サンプルのアプリケーションがソースコードと一緒に含まれていますので、すぐに試すことができます。
以下はシンプルなスイッチャーパネルアプリです。
<img width="50%" alt="SDK_explorer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/2c00f65b-6449-53fb-40ae-2a80634e676d.png">
<img width="50%" alt="ATEM_SDK.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/97cda18d-ef47-e64c-a0f5-e9153fbb13e2.png">

# Node-RED モジュール
以下、macOS 上の Node-RED デスクトップアプリ を例に説明します。
Node-RED を起動して右上の「Menu (メニュー)」から「Manage palette (パレットの管理)」を選択すると「User Settings (ユーザ設定)」画面が表示されます。
<img width="75%" alt="node-red_desktop.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/edba988c-a3a8-4c0d-441b-fc9fc10cad8c.png">
「Install (ノードを追加)」タブを選択し、検索フォームで「blackmagic」と入力して検索するといくつかリストアップされます。
「<A HREF="https://flows.nodered.org/node/blackmagic-atem-nodered">blackmagic-atem-nodered</A>」の「install (ノードを追加)」ボタンを押下します。
<img width="50%" alt="node-red_modules 2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/de189327-18fa-1f16-a7bb-bd09a3aa4c1b.png">
パレットに新しいノード (BlackMagic / ATEM) が追加されていることを確認します。
<img width="75%" alt="flow_atem_00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0863488c-1539-6786-01e2-c67a7ed6595e.png">

## サンプルフロー
ATEM mini の入力 1 と 入力 2 を切り替えるシンプルなフローを作成しました。
(サンプルフローは<A HREF="https://github.com/kitazaki/flow-sample/blob/master/ATEM_mini_flow_sample_01.json">こちら</A>からダウンロードできます。)

<img width="75%" alt="flow_atem_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b19552f5-cd6d-9dbe-b307-667cac6f038d.png">
ATEM ノードの設定は ATEM mini の IP アドレスを設定するだけです。
<img width="45%" alt="ATEM_node_01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b229802e-369b-e830-dc8e-89965257e6d8.png">
<img width="45%" alt="ATEM_node_02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/72a30371-5f94-1021-b9c8-8861b4118c86.png">

ATEM ノードへの入力は function ノードで msg.payload にコマンドとデータを設定するだけです。
<img width="45%" alt="input1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7a75840b-0b49-1f59-456a-4960c40bee73.png"> <img width="45%" alt="input2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/95492f00-f7f8-9a1c-3460-08b8f9b8be11.png">

他に使用できるコマンドとデータについては<A HREF="https://github.com/haydendonald/blackmagic-atem-nodered/blob/master/howToUse.md">こちら</A>で確認することができます。

それでは、みなさまも良き配信ライフを！