Original Article Published Here

构建流媒体应用程序或平台时，重要的是要考虑最终用户如何体验并与所流的内容进行互动。如果您的用户需要与内容创建者互动，则捕获和消费之间的延迟应很小。为了实现这一目标，许多开发人员依靠WEBRTC，这是一种具有异常低的视频和音频延迟的内容与互联网传输协议。通过利用WebRTC，开发人员可以快速建立低延迟的沉浸式体验，留出大量时间，使UI使用诸如Reactjs之类的前端库看起来很出色。

在本指南中，我们将展示由Dolby.io Streaming和nodej的动力的Webrtc Reactjs流应用程序。

WEBRTC React示例代码

WebRTC React流示例应用程序可以在dolbyio-samples GitHub中找到。

要设置项目，您需要四件事：

1. A cloned copy of the sample app.
2. Node v16 or greater安装了。
3. Yarn package管理v1.22.19或更大的安装。
4. A Dolby.io account.

您将存储库克隆并设置节点和纱线后，通过终端导航到主目录并运行以下命令以安装所有依赖关系：

yarn

在您的项目安装时，我们可以简要讨论如何设置您的dolby.io帐户。 created an account之后

单击紫色和白色+创建'按钮以创建一个新的令牌。给令牌标签和您的流名称为唯一标识符，然后切换到“高级”选项卡以启用“多源”，如下图所示：

启用Multisource使您可以利用Dolby.io流媒体一次捕获和交付多个低延迟流。通过创建您的令牌，我们现在可以单击新创建的代币并收集您的流名称，流帐户ID ，和 stream Publishing token 如下图所示：

现在，我们已经拥有连接到dolby.io服务器的所有凭据，让我们更新项目凭据。 .env并用各自的凭据填充文件。

此外，在apps/publisher/.env.example内部还有一个参数可以调整查看器URL。但是，对于本地测试，可以将其设置为local host URL，但是，在生产中，这应该是一个可访问的端点。

VITE_RTS_VIEWER_BASE_URL=http://localhost:7070/

在所有设置的凭据时，我们现在可以运行React Streaming应用程序。该应用程序可以分为两个功能，一个发布者和一个查看器。内容创建者将使用的发布者应用程序将内容提供给通过Viewer App参与的最终用户。

启动发布者应用体验：

yarn nx serve publisher

启动查看器应用体验：

yarn nx serve viewer

在查看器和运行的发布者的情况下，我们现在拥有一个带有node.js的实时流媒体应用程序，并且由dolby.io webrtc流提供的反应。这种经验可以是公开分享的deployed on a cloud service such as Netlify，请记住添加您的品牌和造型。

构建自己的React WebRTC流媒体应用程序

借助您已经创建的Dolby.io帐户，构建自己的定制查看器和出版商体验很容易。 dolby.io流具有React Native SDK，允许开发人员快速轻松地构建流媒体解决方案。如果您有兴趣了解有关dolby.io流的更多信息，请查看我们的其他一些博客，包括构建Multiview web app或有关我们的Dolby.io Streaming OBS integration。

反馈还是问题？与Twitter，LinkedIn或通过我们的support desk接触团队。