Creating A Live Broadcast Web and Mobile App With React & React Native

Published in

BingeWave

8 min readFeb 8, 2022

As we enter an area where high-speed internet is available to the masses, and people are cutting cords, there is a new opportunity to create solutions that bring live experiences that connect directly to a targeted audience without a middle-man. Call it Direct-To-Consumer entertainment.

With Direct-To-Consumer entertainment, distributors and production companies can build apps that are deployed on computers, mobile phones, and OTT devices. Directly connecting with an audience allows complete control of when the engagement happens, how it occurs, and complete control of the monetization. Furthermore, they can elevate experiences and make them interactive with consumers to create at time, two way engagement.

In this tutorial, we are going to cover how to build a simple broadcasting app that is designed to take input from a live source (concert, sporting event, live performance, etc.) and broadcast it directly to an audience that has either paid or subscribed to an app.

Video Tutorial

Code And Requirements

Please read the information below on how to download the code and the developer requirements.

Developer Requirements

To create this app, we will be using the following tools and ask that the developer already know the basics of:

Command Line
React
React Native
Expo
FFMPEG

Download The Code

The code in this tutorial is available online at our Github repository and can be downloaded and ran on your local computer. To get the code, please visit:

https://github.com/BingeWave/Building-A-Live-Broadcast-Web-and-Mobile-App

Organizer Account

Like all of our tutorials, our starting point will be a organizer account. This will allow you to access all our API features. Please read the tutorial on Setting up an Organizer Account if you have not already; it should only take a minute or two.

Making Your Project Root Folder

To begin, we are going to make your project’s root directory. The root directory is where we will have both the mobile app and and web app. Lets make a directory as such:

mkdir my-broadcast-appcd mkdir my-broadcast-app

Next, just create two folders:

mkdir webmkdir mobile

The folder web is where the web app will reside, and the folder mobile is where the mobile app code will be placed. Now let us start to understand the API.

Creating A Live Event

To start broadcasting a stream, we will create a live event. In BingeWave, all live streams and live video chats are considered live events. We will create an Instant Event for this tutorial, but for other purposes, you can also schedule live events. You read about the event types here: https://developers.bingewave.com/types#event_types .

Start by going to the Query Builder and navigate to the Create Live Event section. The query builder is designed to help developers test out the documentation prior to writing code.

We are going to need two fields to create the live event: the organizer ID and the Event Type. The organizer ID is the organizer you created in the previous step. The Event Type can be selected the event type list above.

Choosing the Instant Event, create your Live Event, and a JSON response will be returned.

In that JSON response, there are a few key fields to pay attention to:

id
rtmp_ingestion_endpoint
rtmp_ingestion_key
webview_livestream
embed_livestream

id: The id is the UUID (universally unique identifier) for the live event event. This string will be used to reference this live event and all its properties.

rtmp_ingestion_endpoint: This is the endpoint you will send an RTMP stream to. The stream’s source could be a camera, a video file, OBS, anything that sends out an RTMP stream.

rtmp_ingestion_key: The key to accessing the RTMP. The key must be added as part of a query string as `?sign=[key]`, otherwise the stream will be blocked.

webview_livestream: This is a live stream that can be used inside a webview. Webview are embedded inside mobile applications.

embed_livestream: This is the embed for the live stream that goes into a webpage. The embed is different from a web view as it will requires the embed script to be injected.

Now that we have our data, let us create the react application to start.

React App

This React App will be a simple one-page app for demonstration purposes only. For more complex React Applications, you may read the other tutorials. Let’s start by first creating the React web application. On your command line and inside your projects root folder, type the following:

npx create-react-app web

This will create a basic React Web Application in the folder name web. Now go into that folder.

cd web

We are going to modify the src/App.js file slightly. First, we need to get the embed script. Refer to http://developers.bingewave.com/javascript/bwconnector to load the connector object and the init function.

The key item we want to load is ‘https://connect.bingewave.com/connect.js' into a script in React using an effect, and then call the BingewaveConnector.init() function. The effect will place the code in the footer of the application, and the code will look as such:

Now refer back to the webview_livestream discussed earlier, and put that inside the main body of the app. It is required to use the dangerouslySetInnerHTML option, or React will not parse the tags.

The ‘xxxx’ should be replaced with the stream id returned from the API in the previous step. Your entire React application should look like this:

Testing Out The App

Use npm start to start the application. Now we can test it out. Refer back to rtmp_ingestion_endpoint and the rtmp_ingestion_key.

The rtmp_ingestion_endpoint is combined with the rtmp_ingestion_key, where the key is a parameter in the query string as such: ‘?sign=[key]’. An example of how your key might look is this:

rtmp://ingest.bingewave.com/live/[live_event_id]?sign=[key]

To test the stream, you must have FFmpeg installed on your computer and use a video file. Either download this sample one here or use one on your computer. Paste following FFmpeg command into your console, and remember to replace local_video_file, live_event_id and key with the correct values.

ffmpeg -re -i [local_video_file] -maxrate 5M -crf 24 -bufsize 6000k -c:v libx264 -preset superfast -tune zerolatency -strict -2 -c:a aac -ar 44100 -attempt_recovery 1 -max_recovery_attempts 5 -drop_pkts_on_overflow 1 -max_muxing_queue_size 9999 -f flv "rtmp://ingest.bingewave.com/live/[live_event_id]?sign=[key]"

When done correctly, your React App should be playing a video file. Congrats! Next let us move on to build a React Native app for mobile.

React Native Application

To build the mobile app, we are going to require that Expo be installed. If you have not already installed Expo, you can install it globally using node as such:

npm install — global expo-cli

Go back to the root folder of your project and create the Expo app using this game:

expo init mobile

When prompted, choose the minimal application. After Expo is done installing, go into the folder.

cd mobile

We have to install one package, react-native-webview, to use the WebView component. If you are a yarn user, use yarn. Below is how to install it with npm:

npm install --save react-native-webview

Now lets start the expo application:

expo start

When Expo starts, open up the App.js. At the top, right below the last import, add the following line:

import { WebView } from ‘react-native-webview’;

This will make sure our WebView component is callable. Referring back to the webview_livestream, that url will go into your Webview. Next, we are going to replace the render function with the WebView as such:

In the code above, we set the uri the webview_livestream url, and added extra options such as allow the Javascript to be enabled and allowing inline media so the player does not go full screen. The entire app file should look something similar to this:

Start expo using the following command:

expo start

Choose the emulator you want and bring up your app. Now run the ffmpeg you can ran earlier, remember to replace the placeholders:

ffmpeg -re -i [local_video_file] -maxrate 5M -crf 24 -bufsize 6000k -c:v libx264 -preset superfast -tune zerolatency -strict -2 -c:a aac -ar 44100 -attempt_recovery 1 -max_recovery_attempts 5 -drop_pkts_on_overflow 1 -max_muxing_queue_size 9999 -f flv “rtmp://ingest.bingewave.com/live/[live_event_id]?sign=[key]”

And you will have live video now playing on both website and mobile app! Awesome you’re done. Let’s add one more caveat to this tutorial with on-screen engagement.

On-Screen Engagement

The webview_livestream and the embed_livestream both utilize BingeWave’s player. This means that the built-in interactive functionality of the player can be used as well. For the remainder of this tutorial, we will cover how to send on-screen content in real-time to users.

Start by heading over to on-screen engagement options at https://developers.bingewave.com/queries/onscreen#content.

This function allows you to send any HTML content to appear on-screen in an overlay. For this example we are simply going to have Hello World appear on-screen.

In the Query Builder, replace the {id} with the id of your live event. And in the message column, insert the <h1>Hello World</h1> and click send.