mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-23 21:20:42 +08:00
TSL&PRF
This commit is contained in:
Xingyu Wang
parent
52b6549c42
commit
1e61ab1295
@ -1,140 +0,0 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: (wxy)
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (How I stream video with OBS and WebSockets)
|
||||
[#]: via: (https://opensource.com/article/20/6/obs-websockets-streaming)
|
||||
[#]: author: (Kevin Sonney https://opensource.com/users/ksonney)
|
||||
|
||||
How I stream video with OBS and WebSockets
|
||||
======
|
||||
Take control of your streaming with these open source supporting tools
|
||||
that simplify WebSockets.
|
||||
![An old-fashioned video camera][1]
|
||||
|
||||
[OBS][2] is one of the staples of live streaming videos now. It is the preferred software for streaming to Twitch, one of the most popular live video sites around. There are some really nice add-ons to allow a streamer to control things from their phone or another screen without disrupting the running video. It turns out, it is really easy to build your own control panel using [Node-RED][3] and the [obs-websockets][4] plugin.
|
||||
|
||||
![My OBS Control Dashboard][5]
|
||||
|
||||
My OBS control dashboard
|
||||
|
||||
I know what many of you are thinking—"He said WebSockets and easy in the same sentence?" Many people have had difficulty setting up and using WebSockets, which allow for bi-directional communication over a single connection via a web server. Node-RED has built-in support for WebSockets and is the part that makes this easy, at least compared to writing your own client/server.
|
||||
|
||||
Before starting, make sure you have OBS installed and configured. Start by downloading and installing the [latest stable release of the obs-websockets][6] plugin. For this article, the default settings are fine, but I strongly recommend following the instructions for securing obs-websockets in the future.
|
||||
|
||||
Next, [download and install Node-RED][7], either on the same system or on a different one (like a Raspberry Pi). Again, the default installation is fine for our purposes, but it would be wise to secure the installation following the directions on their site.
|
||||
|
||||
Now for the fun parts. Start Node-RED and open up the web interface (by default at <http://localhost:1880>), and you have a blank canvas. Open up the "hamburger" menu on the right and select "Manage Palate." Then click on the "Install" tab and search for the "node-red-contrib-dashboard" and "node-red-contrib-rbe" modules.
|
||||
|
||||
Once those are installed, click on the right-hand list and drag-and-drop the following blocks to the canvas:
|
||||
|
||||
* 1 Websocket Out
|
||||
* 1 Websocket In
|
||||
* 1 Debug
|
||||
* 1 Inject
|
||||
* 1 Switch
|
||||
* 1 Change
|
||||
* 2 JSON
|
||||
* 1 Catch
|
||||
|
||||
|
||||
|
||||
Connect them in the following orders:
|
||||
|
||||
|
||||
```
|
||||
Inject->Button->Change->JSON->Websocket Out
|
||||
|
||||
Websocket In->JSON->Switch->RBE->Debug
|
||||
|
||||
Catch->Debug
|
||||
```
|
||||
|
||||
![The basic flows][8]
|
||||
|
||||
The basic flows
|
||||
|
||||
When the button is pushed (or the Inject node sends a timestamp), a payload is sent through the change node, converted from a JSON object to a string, then sent to the WebSocket Out node. When a message is received by the WebSocket In node, it is converted to a JSON object, and if it is not a duplicate, sent to the Debug node for output. And the Catch node will catch any errors and put them into the debug panel.
|
||||
|
||||
What is in that payload? Let's set everything up and find out.
|
||||
|
||||
First, double click the `button` to open the settings dialog. Start by changing the payload to "JSON" using the drop-down menu. In the field, add the following:
|
||||
|
||||
|
||||
```
|
||||
{"request-type":"GetVersion"}
|
||||
```
|
||||
|
||||
Enable the checkbox for "If msg arrives on input, emulate a button click" and click Done to close the button config. When a message comes from the Inject node, or if the button is pressed in the UI, it will send the JSON payload to the next node.
|
||||
|
||||
![Setting up the button][9]
|
||||
|
||||
Setting up the button
|
||||
|
||||
Now open up the Change node. We want to set `msg.payload.message-id` to `msg._msgid` by changing the first field from `payload` to `payload.message-id` and then using the drop-down on the second field to change the type from `String` to `msg.,` then we will put `_msgid` in the field. This copies the unique message ID to the JSON object payload so that each request has a unique ID for tracking.
|
||||
|
||||
This is then sent to the JSON node to convert from a JSON object to a string, and then passed to the Websocket Out node. Open up the Websocket Out node to configure the connection to OBS. First, change the `Type` to `Connect to` and then click the pencil icon to create a new connection URL. Set that to `ws://OBSMachine:4444/` and close the dialog to save. `OBSMachine` is the name of the machine OBS and obs-websocket are running on. For example, if Node-RED is running on the same machine, this would be `ws://localhost:4444`, and if it is on a machine named "luxuria.local" then it would be `ws://luxuria.local:4444`. Close and update the Websocket Out node. This sends the payload text string to the WebSocket in OBS.
|
||||
|
||||
![Websocket Out Node configuration][10]
|
||||
|
||||
Websocket Out Node configuration
|
||||
|
||||
On to the WebSocket In flow! Open the WebSocket In node, and set it to a `Type` of `Connect to` and the URL to the connection we defined before (it should auto-fill). Next in line is the second JSON node, which we can leave alone. This accepts output from OBS and converts it into a payload object.
|
||||
|
||||
Next, we will filter the regular heartbeat and status updates from everything else. Open up the switch and set the "Property" value to `payload["update-type"]`. Now select `Is Not Null` from the drop-down below it. Click `+` to add a second option and select `otherwise` from the drop-down.
|
||||
|
||||
![Switch Node configuration][11]
|
||||
|
||||
Switch Node configuration
|
||||
|
||||
Connect the new output on the switch directly to the Debug node input.
|
||||
|
||||
The RBE node, which will filter out duplicates, needs to be told what field to watch for. Since it should be connected to the output from the switch that sends nothing but status updates, this is important, as obs-websocket is sending updates every few seconds. By default, the RBE compares the entire payload object, which will constantly be changing. Open up the RBE Node, and change the `Property` from `payload` to `payload.streaming`. If the `streaming` value of the payload changes, then pass the message through; otherwise, discard it.
|
||||
|
||||
The final step is to change the Debug node output from `msg.payload` to the complete msg object. This allows us to see the entire object, which sometimes has useful information outside the `payload`.
|
||||
|
||||
Now, click `Deploy` to activate the changes. Hopefully, the WebSocket nodes will have a green "Connected" message underneath them. If they are red or yellow, the connection URL is likely incorrect and needs to be updated, or the connection is being blocked. Make sure that port 4444 on the remote machine is open and available, and that OBS is running!
|
||||
|
||||
Without the RBE node filtering on the `streaming` value, the debug panel (the bug icon on the right of the canvas) would be filling with Heartbeat messages about now. Click the button to the left of the Inject node to send a signal that will simulate a button click. If all is well, you should see an object arrive that has a listing of all the things `obs-websocket` can do.
|
||||
|
||||
![The response to "GetVersion"][12]
|
||||
|
||||
The response to "GetVersion"
|
||||
|
||||
Now open up `http://localhost:1880/ui` in another tab or window. It should show a single button. Press it! The debug panel should show the same information as before.
|
||||
|
||||
Congrats! You have sent your first (and hopefully not last) WebSocket message to OBS!
|
||||
|
||||
This is just the beginning of what can be done with `obs-websockets` and Node-RED. The complete documentation of what is supported is documented in the protocol.md file in the GitHub repository for obs-websockets. With a little experimentation, you can create a full-featured control panel to start and stop streaming, change scenes, and a whole lot more. If you are like me, you'll have all kinds of controls set up before you know it.
|
||||
|
||||
![OBS Websocket][13]
|
||||
|
||||
I may have gotten a little mad with power.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/20/6/obs-websockets-streaming
|
||||
|
||||
作者：[Kevin Sonney][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/ksonney
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/LIFE_film.png?itok=aElrLLrw (An old-fashioned video camera)
|
||||
[2]: https://obsproject.com/
|
||||
[3]: https://nodered.org/
|
||||
[4]: https://github.com/Palakis/obs-websocket
|
||||
[5]: https://opensource.com/sites/default/files/uploads/obscontrol-img1.png.jpg (My OBS Control Dashboard)
|
||||
[6]: https://github.com/palakis/obs-websocket/releases
|
||||
[7]: https://nodered.org/docs/getting-started/
|
||||
[8]: https://opensource.com/sites/default/files/uploads/obscontrol-img2.png.jpg (The basic flows)
|
||||
[9]: https://opensource.com/sites/default/files/uploads/obscontrol-img3.png.jpg (Setting up the button)
|
||||
[10]: https://opensource.com/sites/default/files/uploads/obscontrol-img4.png.jpg (Websocket Out Node configuration)
|
||||
[11]: https://opensource.com/sites/default/files/uploads/obscontrol-img5.png.jpg (Switch Node configuration)
|
||||
[12]: https://opensource.com/sites/default/files/uploads/obscontrol-img6.png.jpg (The response to "GetVersion")
|
||||
[13]: https://opensource.com/sites/default/files/uploads/obscontrol-img7.png.jpg (OBS Websocket)
|
||||
@ -0,0 +1,137 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: (wxy)
|
||||
[#]: reviewer: (wxy)
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (How I stream video with OBS and WebSockets)
|
||||
[#]: via: (https://opensource.com/article/20/6/obs-websockets-streaming)
|
||||
[#]: author: (Kevin Sonney https://opensource.com/users/ksonney)
|
||||
|
||||
如何用 OBS 和 WebSockets 播放视频流
|
||||
======
|
||||
|
||||
> 用这些简化了 WebSockets 的开源支持工具来控制你的流媒体。
|
||||
|
||||
![老式摄像机][1]
|
||||
|
||||
[OBS][2] 是现在视频直播的主流之一。它是直播流媒体到 Twitch 的首选软件，Twitch 是近来最受欢迎的视频直播网站之一。有一些非常好的附加组件，可以让流媒体人从他们的手机或另一个屏幕上进行控制，而不影响正在运行的视频。事实证明，使用 [Node-RED][3] 和 [obs-websockets][4] 插件来构建自己的控制面板真的很容易。
|
||||
|
||||
![My OBS Control Dashboard][5]
|
||||
|
||||
*我的 OBS 控制仪表盘*
|
||||
|
||||
我知道你们很多人在想什么 —— “他在同一句话中提到了 WebSockets 和简单？”很多人在设置和使用 WebSockets 时遇到了困难，WebSockets 允许通过 Web 服务器的单一连接进行双向通信。 Node-RED 内置了对 WebSockets 的支持，是让这一切变得简单的原因之一，至少与编写自己的客户端/服务器相比是如此。
|
||||
|
||||
在开始之前，请确保你已经安装和配置了 OBS。首先下载并安装[最新稳定版的 obs-websockets][6]插件。对于本文来说，默认的设置就可以了，但我强烈建议你之后按照说明来保护 obs-websockets 的安全。
|
||||
|
||||
接下来，[下载并安装 Node-RED][7]，可以在同一个系统上，也可以在不同的系统上（比如树莓派）。同样，默认的安装对我们这篇文章来说是够了，但最好按照他们网站上的指示进行安全安装。
|
||||
|
||||
现在是有趣的部分。启动 Node-RED，打开网页界面（默认在 <http://localhost:1880>），你有了一个空白的画布。打开右边的“汉堡”菜单，选择“<ruby>管理口味<rt>Manage Palate</rt></ruby>”。然后点击“安装”标签，搜索 `node-red-contrib-dashboard` 和 `node-red-contrib-rbe` 模块。
|
||||
|
||||
安装好这些模块后，点击右侧列表，将以下模块拖拽到画布上。
|
||||
|
||||
* 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
|
||||
```
|
||||
|
||||
![The basic flows][8]
|
||||
|
||||
*基本流程*
|
||||
|
||||
当 “Button” 被按下时（或 “Inject” 节点发送一个时间戳），有效载荷通过 “change” 节点发送，从 JSON 对象转换为字符串，然后发送到 “WebSocket Out” 节点。当 “WebSocket In” 节点收到消息后，会将其转换为 JSON 对象，如果不是重复的，则发送到 “Debug” 节点进行输出。而 “Catch” 节点会捕捉到任何错误，并将其放入 “Debug” 面板中。
|
||||
|
||||
那有效载荷里有什么呢？让我们设置好一切，一探究竟。
|
||||
|
||||
首先，双击 “Button” 打开设置对话框。先使用下拉菜单将有效载荷改为 “JSON”。在该字段中，添加以下内容：
|
||||
|
||||
```
|
||||
{"request-type":"GetVersion"}
|
||||
```
|
||||
|
||||
启用 “If msg arrives on input, emulate a button click” 复选框，然后点击 “Done” 关闭 “Button” 配置。当消息从 “Inject” 节点传来时，或者 UI 中的 “Button” 被按下，它将把 JSON 有效载荷发送到下一个节点。
|
||||
|
||||
![Setting up the button][9]
|
||||
|
||||
*设置 “Button”*
|
||||
|
||||
现在打开 “Change” 节点。我们要将 `msg.payload.message-id` 设置为 `msg._msgid`，方法是将第一个字段从 `payload` 改为 `payload.message-id`，然后使用第二个字段的下拉菜单将类型从 `String` 改为 `msg.`，然后我们将 `_msgid` 放入该字段。这样就会把唯一的消息 ID 复制到 JSON 对象的有效载荷中，这样每个请求就有一个唯一的 ID 进行跟踪。
|
||||
|
||||
然后将其发送到 “JSON” 节点，以便将 JSON 对象转换为字符串，然后传递给 “Websocket Out” 节点。打开 “Websocket Out” 节点，配置到 OBS 的连接。首先，将 `Type` 更改为 `Connect to`，然后单击铅笔图标以创建新的连接 URL。将其设置为 `ws://OBSMachine:4444/`，然后关闭对话框进行保存。`OBSMachine` 是 OBS 和 obs-websocket 运行的机器名称。例如，如果 Node-RED 运行在同一台机器上，则为 `ws://localhost:4444`，如果是在名为 `luxuria.local` 的机器上，则为 `ws://luxuria.local:4444`。关闭并更新 “Websocket Out” 节点。这将向 OBS 中的 WebSocket 发送有效载荷文本字符串。
|
||||
|
||||
![Websocket Out Node configuration][10]
|
||||
|
||||
*“Websocket Out” 节点配置*
|
||||
|
||||
进入 “WebSocket In” 流程！打开 “WebSocket In” 节点，并对其设置 `Type` 为 `Connect to` 和我们之前定义的连接的 URL（应自动填充）。接下来是第二个 “JSON” 节点，我们可以不用管它。它接受 OBS 的输出，并将其转换为有效载荷对象。
|
||||
|
||||
接下来，我们将从中过滤出常规的心跳和状态更新。打开 “Switch”，将 `Property` 值设置为 `payload["update-type"]`。现在从它下面的下拉菜单中选择 `Is Not Null`。点击 `+` 添加第二个选项，并从下拉菜单中选择 `otherwise`。
|
||||
|
||||
![Switch Node configuration][11]
|
||||
|
||||
*“Switch” 节点配置*
|
||||
|
||||
将 “Switch” 上的新输出直接连接到 “Debug” 节点的输入。
|
||||
|
||||
RBE 节点将过滤掉重复的内容，需要告诉它要观察什么字段。由于它应该连接到 “Switch” 的输出，而它只发送状态更新，所以这一点很重要，因为 obs-websocket 每隔几秒钟就会发送更新。默认情况下，RBE 会比较整个有效载荷对象，它将不断变化。打开 RBE 节点，将 `Property` 从 `payload` 改为 `payload.streaming`。如果 `payload` 的 `streaming` 值发生了变化，那么就把消息传递过去，否则就丢弃。
|
||||
|
||||
最后一步是将 “Debug” 节点的输出从 `msg.payload` 改为完整的 `msg` 对象。这使我们能够看到整个对象，有时在 `payload` 之外还有有用的信息。
|
||||
|
||||
现在，单击 “Deploy” 以激活更改。希望 WebSocket 节点下面会有绿色的 `Connected` 消息。如果它们是红色或黄色的，则连接 URL 可能不正确，需要更新，或者连接被阻止。请确保远程机器上的 4444 端口是开放的、可用的，并且 OBS 正在运行!
|
||||
|
||||
如果没有 RBE 节点对 `streaming` 值的过滤，调试面板（点击画布右侧的“虫子”图标）大约现在就会被心跳消息填满。点击 “Inject” 节点左边的按钮，发送一个模拟按钮点击的信号。如果一切顺利，你应该会看到一个对象到达，它有一个 `obs-websocket` 可以做的所有事情的列表。
|
||||
|
||||
![The response to "GetVersion"][12]
|
||||
|
||||
*对 “GetVersion” 的回应*
|
||||
|
||||
现在在另一个标签或窗口中打开 `http://localhost:1880/ui`。它应该显示一个单一的按钮。按下它! 调试面板应该会显示和之前一样的信息。
|
||||
|
||||
恭喜你！你已经发送了你的第一个（希望不是最后一个）WebSocket 消息！
|
||||
|
||||
这只是使用 obs-websockets 和 Node-RED 可以做的事情的起步。支持的完整文档记录在 obs-websockets 的 GitHub 仓库的 `protocol.md` 文件中。通过一点点的实验，你可以创建一个功能齐全的控制面板来启动和停止流媒体、改变场景，以及更多。如果你和我一样，在意识到之前，你就可以设置好各种控件了。
|
||||
|
||||
![OBS Websocket][13]
|
||||
|
||||
*如此多的能力让我有点疯*
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/20/6/obs-websockets-streaming
|
||||
|
||||
作者：[Kevin Sonney][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[wxy](https://github.com/wxy)
|
||||
校对：[wxy](https://github.com/wxy)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/ksonney
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/LIFE_film.png?itok=aElrLLrw (An old-fashioned video camera)
|
||||
[2]: https://obsproject.com/
|
||||
[3]: https://nodered.org/
|
||||
[4]: https://github.com/Palakis/obs-websocket
|
||||
[5]: https://opensource.com/sites/default/files/uploads/obscontrol-img1.png.jpg (My OBS Control Dashboard)
|
||||
[6]: https://github.com/palakis/obs-websocket/releases
|
||||
[7]: https://nodered.org/docs/getting-started/
|
||||
[8]: https://opensource.com/sites/default/files/uploads/obscontrol-img2.png.jpg (The basic flows)
|
||||
[9]: https://opensource.com/sites/default/files/uploads/obscontrol-img3.png.jpg (Setting up the button)
|
||||
[10]: https://opensource.com/sites/default/files/uploads/obscontrol-img4.png.jpg (Websocket Out Node configuration)
|
||||
[11]: https://opensource.com/sites/default/files/uploads/obscontrol-img5.png.jpg (Switch Node configuration)
|
||||
[12]: https://opensource.com/sites/default/files/uploads/obscontrol-img6.png.jpg (The response to "GetVersion")
|
||||
[13]: https://opensource.com/sites/default/files/uploads/obscontrol-img7.png.jpg (OBS Websocket)
|
||||
Loading…
Reference in New Issue
Block a user