Technical Blog | Build a Live Streaming App in React JS

Live Streaming is gaining popularity among younger audiences due to its ability to create a sense of community and provide immersive experiences, diverse content, and monetization opportunities. It's used by content creators, influencers, brands, celebrities, events, and educators to create engaging and meaningful content.

As a software developer in the video space, it's essential to understand the difference between traditional and Interactive Live Streaming. The latter allows for real-time engagement between the streamer and the audience, offering a personalized and innovative experience. This form of media is becoming increasingly popular and provides unique opportunities for content creators and businesses to build a loyal community and monetize their streams.

React Interactive Live Video Streaming (Demo) Several platforms in the market offer Interactive Live Streaming, and among the most popular ones are Twitch, YouTube Live, Facebook Live, and Instagram Live.

To successfully host an Interactive Live Streaming platform, a robust infrastructure is essential to handle the workload of serving thousands of participants while maintaining reliability, stability, and optimizations. However, building this type of highly complex application is indeed possible. In fact, Video SDK already provides a well-tested infrastructure that can handle this kind of workload.

Therefore, we will be creating our Interactive Live Streaming App using VideoSDK.live, which will ensure a reliable and stable platform for our users. Let's get started!

VideoSDK.Live's React SDK

VideoSDK.Live's HLS Composition

VideoSDK.Live's HLS Streaming

I will be creating this app for 2 types of users Speaker and Viewer

Speakers will have all media controls i.e. they can toggle their webcam and mic to share their information to the viewers. Speakers can also start a HLS stream so that viewers consume the content.

The viewer will not have any media controls, they will just watch VideoSDK HLS Stream, which was started by the speaker

You need VideoSDK Account, if not you can Signup from https://app.videosdk.live/signup

Coding Environment for React

Good Understanding of React

After our coding environment is set, we can now start writing our code, first I will create a new React App using create-react-app, also we will install useful dependencies.

I will create 3 screens:

Welcome Screen

Speaker Screen

Viewer Screen

Below is the folder structure of our app.

I will prepare a basic App.js, this file will contain all the screens. and render all screens conditionally according to the appData state changes.

Creating a new meeting will require an API call, so we will write some code for that

A temporary auth-token can be fetched from our user dashboard, but in production, we recommend using an authToken generated by your servers.

Follow this guide to get a temporary auth token from the user Dashboard.

WelcomeScreenContainer will be useful for creating a new meeting with speakers. it will also allow you to enter already created meetingId to join the existing session.

This screen will contain all media controls and the participant's grid. First I will create a name input pox for participants who will be joining.

This container will be used for toggling the mic and webcam. Also, we will add some code for starting HLS streaming.

This will get all joined participants from useMeeting Hook and render them individually. Here we will be using SingleParticipantContainer for rendering a single participant webcam stream

This container will get participantId from props and will get webcam streams and other information from useParticipant hook.

It will render both Audio and Video streams of the participant whose participantId is provided from props.

Our speaker screen is completed, not we can start coding ViewerScreenContainer

A viewer screen will be used for viewer participants, they will be watching the HLS stream when the speaker starts to stream.

Same as the Speaker screen this screen will also have an initialization process.

Our ViewerScreen is completed, and now we can test our application.

The Source Code of this app is available in this Github Repo.

This was a very basic example of an interactive Live Streaming App using Video SDK, you can customize it in your own way.

Add more CSS to make the UI more interactive

Add Chat using PubSub

Implement Change Mode, by this, we can switch any participant from Viewer to Speaker, or vice versa.

You can also take reference from our Prebuilt App which is built using VideoSDK's React package. Here is the Github Repo.