A Low-Latency Live Stream React App
Tags: webdev, react, webrtc, javascript
Published: 2023-04-03 18:36:01

[Original Article Published Here](https://dolby.io/blog/a-low-latency-live-stream-react-app/)

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](https://dolby.io/products/real-time-streaming/) and NodeJS. 

![](https://dolby.io/wp-content/uploads/2023/03/publisher-scaled.jpg)

The WebRTC React Example Code
-----------------------------

The WebRTC React Streaming example app can be found on the [dolbyio-samples GitHub](https://github.com/dolbyio-samples/rts-app-react-publisher-viewer).

To set up the project you need four things:

1.  A cloned [copy of the sample app](https://github.com/dolbyio-samples/rts-app-react-publisher-viewer).
2.  [Node v16 or greater](https://nodejs.org/en) installed.
3.  [Yarn package](https://yarnpkg.com/) manager v1.22.19 or greater installed.
4.  [A Dolby.io account](https://dashboard.dolby.io/signup).

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](https://dashboard.dolby.io/signup/) you'll be dropped off on the [Dolby.io Dashboard](https://streaming.dolby.io/#/tokens) 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:

![](https://dolby.io/wp-content/uploads/2023/03/token-1.png)

![](https://dolby.io/wp-content/uploads/2023/03/multit.png)

Enabling [Multisource](https://docs.dolby.io/streaming-apis/docs/multisource-streams) 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 name*, *stream account id*, and *stream publishing token* as shown in the image below:

![](https://dolby.io/wp-content/uploads/2023/03/creds.png)

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.

![](https://dolby.io/wp-content/uploads/2023/03/tempsnip.png)

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](https://www.hostinger.com/tutorials/what-is-localhost), 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
```

![](https://dolby.io/wp-content/uploads/2023/03/publisher-1-scaled.jpg)

To start the viewer app experience:

```
yarn nx serve viewer
```

![](https://dolby.io/wp-content/uploads/2023/03/viewer-scaled.jpg)

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](https://www.netlify.com/with/react/) 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](https://docs.dolby.io/streaming-apis/docs/rn) 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](https://dolby.io/blog/building-a-webrtc-live-stream-multiviewer-app/) or about our [Dolby.io Streaming OBS integration](https://www.youtube.com/watch?v=jUP4vyzbu5Y). 

Feedback or Questions? Reach out to the team on [Twitter](https://twitter.com/DolbyIO?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor), [LinkedIn](https://www.linkedin.com/company/dolbyio/), or via our [support desk](https://www.millicast.com/contactus/).