[[331445]]

WebSocket を簡素化するこれらのオープンソース サポート ツールを使用して、ストリーミング メディアを制御します。

OBSは、現在主流の動画ストリーミングサービスの一つです。近年最も人気のあるライブ動画ストリーミングサイトの一つであるTwitchへのライブ動画配信に最も適したソフトウェアです。配信者が配信中の動画に影響を与えることなく、スマートフォンやその他の画面から配信を制御できる優れたアドオンもいくつかあります。Node-REDとobs-websocketsプラグインを使えば、独自のコントロールパネルを構築するのも非常に簡単です。

私のOBSコントロールパネル

皆さんの多くがこう考えていることは承知しています。「WebSocketとシンプルさを同じ文で言っているのか？」WebSocketは、Webサーバーへの単一の接続を介して双方向通信を可能にするため、多くの人が設定と使用に苦労しています。Node-REDがWebSocketを組み込みでサポートしていることが、少なくとも独自のクライアント/サーバーを作成する場合と比べて、これらすべてをシンプルにしている理由の一つです。

始める前に、OBSのインストールと設定が完了していることを確認してください。まず、obs-websocketsプラグインの最新の安定版をダウンロードしてインストールしてください。この記事ではデフォルト設定で十分ですが、obs-websocketsのセキュリティを確保するために、後ほど説明する手順に従うことを強くお勧めします。

次に、Node-REDをダウンロードしてインストールします。同じシステムでも、別のシステム（Raspberry Piなど）でも構いません。この記事ではデフォルトのインストールで十分ですが、安全にインストールするには、Node-REDのウェブサイトの指示に従うことをお勧めします。

さあ、いよいよお楽しみパートです。Node-REDを起動し、Webインターフェース（デフォルトはhttp://localhost:1880）を開いてください。これで空白のキャンバスができました。右側のハンバーガーメニューを開いて「…」を選択してください。味覚の管理味覚を管理する次に、「インストール」タブをクリックし、 node-red-contrib-dashboardおよびnode-red-contrib-rbeモジュールを検索します。

これらのモジュールをインストールした後、右側のリストをクリックして、次のモジュールをキャンバスにドラッグします。

• 1 Websocket出力
• 1 Websocket入力
• 1 デバッグ
• 1 注入
• スイッチ1個
• 1 変更
• 2 JSON
• 1 キャッチ

次の順序で接続します。

 Inject -> Button -> Change -> JSON -> Websocket Out
 Websocket In -> JSON -> Switch -> RBE -> Debug
 Catch -> Debug 

基本的なプロセス

「ボタン」が押されると（または「Inject」ノードがタイムスタンプを送信すると）、ペイロードは「change」ノードを介して送信され、JSONオブジェクトから文字列に変換された後、「WebSocket Out」ノードに送信されます。「WebSocket In」ノードはメッセージを受信すると、それをJSONオブジェクトに変換し、重複していない場合は「Debug」ノードに出力します。「Catch」ノードはエラーをキャッチし、「Debug」パネルに表示します。

ペイロードには何が入っているのでしょうか？すべてを設定して調べてみましょう。

まず、「ボタン」をダブルクリックして設定ダイアログボックスを開きます。ドロップダウンメニューを使ってペイロードを「JSON」に変更します。そのフィールドに以下の内容を追加します。

 { "request-type" : "GetVersion" }

「入力時にメッセージが到着した場合、ボタンクリックをエミュレートする」チェックボックスをオンにし、「完了」をクリックして「ボタン」設定を無効にします。「Inject」ノードからメッセージが到着するか、UI上の「ボタン」が押されると、JSONペイロードが次のノードに送信されます。

「ボタン」を設定する

「Change」ノードを開きます。`msg.payload.message msg.payload.message-id msg._msgidに変更します。最初のフィールドをpayloadからpayload.message-idに変更し、次に2番目のフィールドのドロップダウンメニューを使用して、型をStringからmsg.変更し、最後にそのフィールドに_msgidを入力します。これにより、JSONオブジェクトのペイロードに一意のメッセージIDがコピーされ、各リクエストに追跡用の一意のIDが付与されます。

次に、それを「JSON」ノードに送信してJSONオブジェクトを文字列に変換し、「Websocket Out」ノードに渡します。「Websocket Out」ノードを開き、OBSへの接続を設定します。まず、 TypeをConnect toに変更し、鉛筆アイコンをクリックして新しい接続URLを作成します。 ws://OBSMachine:4444/ 」に設定し、ダイアログボックスを閉じて保存します。OBSMachine OBSMachine 、OBSとobs-websocketが動作しているマシン名です。例えば、Node-REDが同じマシンで動作している場合はws://localhost:4444 、 luxuria.localというマシンで動作している場合はws://luxuria.local:4444となります。「Websocket Out」ノードを閉じて更新します。これにより、ペイロードテキスト文字列がOBSのWebSocketに送信されます。

「Websocket Out」ノード構成

「WebSocket In」フローに進みましょう！「WebSocket In」ノードを開き、 TypeをConnect toに設定し、先ほど定義した接続のURLを入力します（自動的に入力されるはずです）。次は2つ目の「JSON」ノードですが、これは無視して構いません。このノードはOBSからの出力を受け取り、ペイロードオブジェクトに変換します。

次に、通常のハートビートとステータス更新をフィルタリングします。「Switch」を開き、 Property値をpayload["update-type"]に設定します。その下のドロップダウンメニューからIs Not Nullを選択します。 +をクリックして2つ目のオプションを追加し、ドロップダウンメニューから「Null otherwiseを選択します。

「スイッチ」ノード構成

「Switch」ノードの新しい出力を「Debug」ノードの入力に直接接続します。

RBEノードは重複コンテンツをフィルタリングするため、監視するフィールドを指定する必要があります。これは重要です。なぜなら、RBEノードは「Switch」の出力に接続し、obs-websocketが数秒ごとに更新を送信するため、状態の更新のみを送信する必要があるからです。デフォルトでは、RBEは継続的に変化するペイロードオブジェクト全体を比較します。RBEノードを開き、 Property payloadからpayload.streaming変更します。 payloadのstreaming値が変化した場合はメッセージを通過させ、変化しなかった場合は破棄します。

最後のステップは、「Debug」ノードの出力をmsg.payloadから完全なmsgオブジェクトに変更することです。これによりオブジェクト全体を確認できるようになり、 payload以外にも有用な情報が含まれている場合があります。

「デプロイ」をクリックして変更を有効化してください。WebSocketノードの下に緑色の「 Connected 」メッセージが表示されます。赤色または黄色の場合は、接続URLが正しくないため更新が必要、または接続がブロックされている可能性があります。リモートマシンのポート4444が開いていて利用可能であること、そしてOBSが起動していることを確認してください。

RBEノードがstreaming値をフィルタリングしていなければ、デバッグパネル（キャンバス右側の「バグ」アイコンをクリック）はおそらく今頃ハートビートメッセージで溢れかえっているでしょう。「Inject」ノードの左側にあるボタンをクリックして、ボタンクリックをシミュレートする信号を送信してください。すべてがうまくいけば、 obs-websocket実行できるすべての機能のリストを含むオブジェクトが到着するはずです。

「GetVersion」への応答

別のタブまたはウィンドウでhttp://localhost:1880/uiを開いてください。ボタンが1つ表示されるはずです。それを押してください。デバッグパネルには以前と同じ情報が表示されるはずです。

おめでとうございます！最初の（そして願わくば最後ではない）WebSocket メッセージを送信しました。

これは、obs-websocketsとNode-REDでできることのほんの始まりに過ぎません。サポートに関する完全なドキュメントは、obs-websockets GitHubリポジトリのprotocol.mdファイルでご覧いただけます。少し実験するだけで、ストリーミングの開始と停止、シーンの変更など、様々な機能を備えたコントロールパネルを作成できます。私と同じように、気づかないうちに様々なコントロールを設定できているはずです。

能力が多すぎてちょっと気が狂いそうです。