[[331445]]

 用這些簡化了 WebSockets 的開源支持工具來控制你的流媒體。

OBS 是現(xiàn)在視頻直播的主流之一。它是直播流媒體到 Twitch 的首選軟件，Twitch 是近來最受歡迎的視頻直播網(wǎng)站之一。有一些非常好的附加組件，可以讓流媒體人從他們的手機(jī)或另一個(gè)屏幕上進(jìn)行控制，而不影響正在運(yùn)行的視頻。事實(shí)證明，使用 Node-RED 和 obs-websockets 插件來構(gòu)建自己的控制面板真的很容易。

我的 OBS 控制儀表盤

我知道你們很多人在想什么 —— “他在同一句話中提到了 WebSockets 和簡單？”很多人在設(shè)置和使用 WebSockets 時(shí)遇到了困難，WebSockets 允許通過 Web 服務(wù)器的單一連接進(jìn)行雙向通信。Node-RED 內(nèi)置了對(duì) WebSockets 的支持，是讓這一切變得簡單的原因之一，至少與編寫自己的客戶端/服務(wù)器相比是如此。

在開始之前，請(qǐng)確保你已經(jīng)安裝和配置了 OBS。首先下載并安裝最新穩(wěn)定版的 obs-websockets插件。對(duì)于本文來說，默認(rèn)的設(shè)置就可以了，但我強(qiáng)烈建議你之后按照說明來保護(hù) obs-websockets 的安全。

接下來，下載并安裝 Node-RED，可以在同一個(gè)系統(tǒng)上，也可以在不同的系統(tǒng)上（比如樹莓派）。同樣，默認(rèn)的安裝對(duì)我們這篇文章來說是夠了，但最好按照他們網(wǎng)站上的指示進(jìn)行安全安裝。

現(xiàn)在是有趣的部分。啟動(dòng) Node-RED，打開網(wǎng)頁界面（默認(rèn)在 http://localhost:1880），你有了一個(gè)空白的畫布。打開右邊的“漢堡”菜單，選擇“管理口味Manage Palate”。然后點(diǎn)擊“安裝”標(biāo)簽，搜索 node-red-contrib-dashboard 和 node-red-contrib-rbe 模塊。

安裝好這些模塊后，點(diǎn)擊右側(cè)列表，將以下模塊拖拽到畫布上。

• 1 Websocket Out
• 1 Websocket In
• 1 Debug
• 1 Inject
• 1 Switch
• 1 Change
• 2 JSON
• 1 Catch

以下列順序連接它們：

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

基本流程

當(dāng) “Button” 被按下時(shí)（或 “Inject” 節(jié)點(diǎn)發(fā)送一個(gè)時(shí)間戳），有效載荷通過 “change” 節(jié)點(diǎn)發(fā)送，從 JSON 對(duì)象轉(zhuǎn)換為字符串，然后發(fā)送到 “WebSocket Out” 節(jié)點(diǎn)。當(dāng) “WebSocket In” 節(jié)點(diǎn)收到消息后，會(huì)將其轉(zhuǎn)換為 JSON 對(duì)象，如果不是重復(fù)的，則發(fā)送到 “Debug” 節(jié)點(diǎn)進(jìn)行輸出。而 “Catch” 節(jié)點(diǎn)會(huì)捕捉到任何錯(cuò)誤，并將其放入 “Debug” 面板中。

那有效載荷里有什么呢？讓我們?cè)O(shè)置好一切，一探究竟。

首先，雙擊 “Button” 打開設(shè)置對(duì)話框。先使用下拉菜單將有效載荷改為 “JSON”。在該字段中，添加以下內(nèi)容：

{"request-type":"GetVersion"}

啟用 “If msg arrives on input, emulate a button click” 復(fù)選框，然后點(diǎn)擊 “Done” 關(guān)閉 “Button” 配置。當(dāng)消息從 “Inject” 節(jié)點(diǎn)傳來時(shí)，或者 UI 中的 “Button” 被按下，它將把 JSON 有效載荷發(fā)送到下一個(gè)節(jié)點(diǎn)。

設(shè)置 “Button”

現(xiàn)在打開 “Change” 節(jié)點(diǎn)。我們要將 msg.payload.message-id 設(shè)置為 msg._msgid，方法是將第一個(gè)字段從 payload改為 payload.message-id，然后使用第二個(gè)字段的下拉菜單將類型從 String 改為 msg.，然后我們將 _msgid 放入該字段。這樣就會(huì)把唯一的消息 ID 復(fù)制到 JSON 對(duì)象的有效載荷中，這樣每個(gè)請(qǐng)求就有一個(gè)唯一的 ID 進(jìn)行跟蹤。

然后將其發(fā)送到 “JSON” 節(jié)點(diǎn)，以便將 JSON 對(duì)象轉(zhuǎn)換為字符串，然后傳遞給 “Websocket Out” 節(jié)點(diǎn)。打開 “Websocket Out” 節(jié)點(diǎn)，配置到 OBS 的連接。首先，將 Type 更改為 Connect to，然后單擊鉛筆圖標(biāo)以創(chuàng)建新的連接 URL。將其設(shè)置為 ws://OBSMachine:4444/，然后關(guān)閉對(duì)話框進(jìn)行保存。OBSMachine 是 OBS 和 obs-websocket 運(yùn)行的機(jī)器名稱。例如，如果 Node-RED 運(yùn)行在同一臺(tái)機(jī)器上，則為 ws://localhost:4444，如果是在名為 luxuria.local 的機(jī)器上，則為 ws://luxuria.local:4444。關(guān)閉并更新 “Websocket Out” 節(jié)點(diǎn)。這將向 OBS 中的 WebSocket 發(fā)送有效載荷文本字符串。

“Websocket Out” 節(jié)點(diǎn)配置

進(jìn)入 “WebSocket In” 流程！打開 “WebSocket In” 節(jié)點(diǎn)，并對(duì)其設(shè)置 Type 為 Connect to 和我們之前定義的連接的 URL（應(yīng)自動(dòng)填充）。接下來是第二個(gè) “JSON” 節(jié)點(diǎn)，我們可以不用管它。它接受 OBS 的輸出，并將其轉(zhuǎn)換為有效載荷對(duì)象。

接下來，我們將從中過濾出常規(guī)的心跳和狀態(tài)更新。打開 “Switch”，將 Property 值設(shè)置為 payload["update-type"]?，F(xiàn)在從它下面的下拉菜單中選擇 Is Not Null。點(diǎn)擊 + 添加第二個(gè)選項(xiàng)，并從下拉菜單中選擇 otherwise。

“Switch” 節(jié)點(diǎn)配置

將 “Switch” 上的新輸出直接連接到 “Debug” 節(jié)點(diǎn)的輸入。

RBE 節(jié)點(diǎn)將過濾掉重復(fù)的內(nèi)容，需要告訴它要觀察什么字段。由于它應(yīng)該連接到 “Switch” 的輸出，而它只發(fā)送狀態(tài)更新，所以這一點(diǎn)很重要，因?yàn)?obs-websocket 每隔幾秒鐘就會(huì)發(fā)送更新。默認(rèn)情況下，RBE 會(huì)比較整個(gè)有效載荷對(duì)象，它將不斷變化。打開 RBE 節(jié)點(diǎn)，將 Property 從 payload 改為 payload.streaming。如果 payload 的 streaming值發(fā)生了變化，那么就把消息傳遞過去，否則就丟棄。

最后一步是將 “Debug” 節(jié)點(diǎn)的輸出從 msg.payload 改為完整的 msg 對(duì)象。這使我們能夠看到整個(gè)對(duì)象，有時(shí)在 payload 之外還有有用的信息。

現(xiàn)在，單擊 “Deploy” 以激活更改。希望 WebSocket 節(jié)點(diǎn)下面會(huì)有綠色的 Connected 消息。如果它們是紅色或黃色的，則連接 URL 可能不正確，需要更新，或者連接被阻止。請(qǐng)確保遠(yuǎn)程機(jī)器上的 4444 端口是開放的、可用的，并且 OBS 正在運(yùn)行!

如果沒有 RBE 節(jié)點(diǎn)對(duì) streaming 值的過濾，調(diào)試面板（點(diǎn)擊畫布右側(cè)的“蟲子”圖標(biāo)）大約現(xiàn)在就會(huì)被心跳消息填滿。點(diǎn)擊 “Inject” 節(jié)點(diǎn)左邊的按鈕，發(fā)送一個(gè)模擬按鈕點(diǎn)擊的信號(hào)。如果一切順利，你應(yīng)該會(huì)看到一個(gè)對(duì)象到達(dá)，它有一個(gè) obs-websocket 可以做的所有事情的列表。

對(duì) “GetVersion” 的回應(yīng)

現(xiàn)在在另一個(gè)標(biāo)簽或窗口中打開 http://localhost:1880/ui。它應(yīng)該顯示一個(gè)單一的按鈕。按下它! 調(diào)試面板應(yīng)該會(huì)顯示和之前一樣的信息。

恭喜你！你已經(jīng)發(fā)送了你的第一個(gè)（希望不是最后一個(gè)）WebSocket 消息！

這只是使用 obs-websockets 和 Node-RED 可以做的事情的起步。支持的完整文檔記錄在 obs-websockets 的 GitHub 倉庫的 protocol.md 文件中。通過一點(diǎn)點(diǎn)的實(shí)驗(yàn)，你可以創(chuàng)建一個(gè)功能齊全的控制面板來啟動(dòng)和停止流媒體、改變場(chǎng)景，以及更多。如果你和我一樣，在意識(shí)到之前，你就可以設(shè)置好各種控件了。

如此多的能力讓我有點(diǎn)瘋