Streaming

A Low-Latency Live Stream React App

SUMMARY

Learn how to build your own low latency WebRTC streaming react app with a comprehensive code sample.


When building a streaming app or platform it is important to consider how the end user experiences and engages with the content being streamed. If your users need to engage with the content creator, the delay between capture and consumption should be minimal. To achieve this, many developers rely on WebRTC, a content-over-internet transfer protocol that boasts exceptionally low delays for video and audio. By leveraging WebRTC, developers can quickly build a low-delay immersive experience, leaving plenty of time to make the UI look outstanding using front-end libraries such as ReactJS.

In this guide, we’re going to showcase a WebRTC ReactJS streaming app powered by Dolby.io Streaming and NodeJS. 

The WebRTC React Example Code

The WebRTC React Streaming example app can be found on the dolbyio-samples GitHub.

To set up the project you need four things:

  1. A cloned copy of the sample app.
  2. Node v16 or greater installed.
  3. Yarn package manager v1.22.19 or greater installed.
  4. A Dolby.io account.

Once you’ve cloned the repo and set up the Node and Yarn, navigate to the main directory via the terminal and run the following command to install all dependencies:

yarn

While your project is installing we can briefly discuss how to set up your Dolby.io account. Once you’ve created an account you’ll be dropped off on the Dolby.io Dashboard where you can create and manage tokens required for leveraging Dolby.io Streaming servers.

Click the purple and white + Create button to create a new token. Give the token a label and your stream name a unique identifier, then switch to the Advanced tab to enable “Multisource” as shown in the image below:

Enabling Multisource allows you to leverage Dolby.io Streaming to capture and deliver multiple low-delay streams at once. With your Token created, we can now click on the newly created token and gather your stream namestream account id, and stream publishing token as shown in the image below:

Now that we have all the credentials required to connect to the Dolby.io servers, let’s update the project credentials. To do this we need to edit the .env.example, which can be found inside of apps/publisher/ and apps/viewer/, by renaming the file to .env and populating the file with the respective credentials.

Additionally inside of the apps/publisher/.env.example there is a parameter to adjust the viewer URL. For testing locally this can be set to a local host URL, however, in production, this should be a web-accessible endpoint.

VITE_RTS_VIEWER_BASE_URL=http://localhost:7070/

With all the credentials set up, we can now run the React streaming app. The app can be split into two functions, a publisher and a viewer. The publisher app, which is what a content creator would use, serves content to the end user who participates via the viewer app.

To start the publisher app experience:

yarn nx serve publisher

To start the viewer app experience:

yarn nx serve viewer

With both the viewer and the publisher running we now have a live streaming app with Node.js and React powered by Dolby.io WebRTC Streaming. This experience can be deployed on a cloud service such as Netlify to share publicly, just remember to add your branding and styling.

Building your own React WebRTC streaming app

With your Dolby.io account already created, building your own bespoke viewer and publisher experience is easy. Dolby.io Streaming has a React Native SDK allowing developers to quickly and easily build a streaming solution. If you are interested in learning more about Dolby.io Streaming check out some of our other blogs including building a Multiview web app or about our Dolby.io Streaming OBS integration

Feedback or Questions? Reach out to the team on TwitterLinkedIn, or via our support desk

Braden Riggs

Developer Advocate

Born and Raised in Australia and now Living in San Francisco, Braden joined the Developer Relations team in 2021 after graduating from UC San Diego with a degree in data science. Braden loves to create apps and content for the Dolby.io Blog, YouTube channel, and the samples GitHub. When not working you can find Braden surfing, hiking, or exploring San Francisco.

Get Started

Drive real-time interactions and engagement with sub-second latency

We are more than just a streaming solutions provider; we are a technology partner helping you build a streaming ecosystem that meets your goals. Get started for free and as you grow, we offer aggressive volume discounts protecting your margins.

Developer Resources

Explore learning paths and helpful resources as you begin development with Dolby.io.

Copy link
Powered by Social Snap