How To Low-Code & No-Code Live Video With React and Express

React and Express has been the beginning points of many web applications. They are easy to learn, and a basic structure can be set up in minutes, if not a few hours. Because of the adoption of these technologies and speed to market, we will write a tutorial on how to low-code live video and audio into a basic web application.

At the end of this tutorial, you should be able to implement a video or audio application inside a React website with an Express backend.

Developer Requirements For This Tutorial

This tutorial will require the following technologies for a developer to use:

• Understanding of Command Line
• Node installed on your localhost
• Postman for making query calls
• Basic knowledge of React

Getting Started — Organizer Account

This tutorial will utilize BingeWave, a Live Media as a Service platform that allows the creation of fully custom video conferencing, audio conferencing, augmented reality and live streaming solutions to be built with no-code and low-code. Every tutorial on using BingeWave requires an organizer account. Organizer accounts are used to manage all aspects of live video and audio sessions, as well as subscriptions and payouts. You can read how to create an organizer account here.

After your organizer account is created, you can successfully complete the rest of the tutorial.

Setting Up Our Project Directory

To begin our project, we will set up the project’s directory using the command line. Start by making a new folder for your project. Let’s call it the ‘invirtu-react-express’.

mkdir invirtu-react-express
cd invirtu-react-express

We will have a front end and a back end to the application. So make two folders that represent that with:

mkdir frontend
mkdir backend

And for now, we are done. We will revisit this section later when we start coding.

No-Coding The Live Video Experience

The first part of this tutorial will involve no coding, as the hardest part of any live media application is the video or audio implementation. Normally when working with video and audio implementations, that are several things a developer has to think about:

• How to capture the user’s video/audio stream
• Connecting users over different networks (ie: co-turn servers)
• Sizing the videos as desktop and mobile have different aspect ratios
• Scaling the media servers
• etc etc etc

The no-code builder ensures that the developer does not have to worry about any of those concerns. We will start by heading over to the interface builder inside a template. From the developer’s portal

1. Click on the Organizers Link
2. Click on the Access Dashboard of a developer account
3. Click on the ‘Templates’ section
4. Create a ‘New Template’

How to get there with images as a guide:

After creating a new template, you will be brought to the Interface Builder. In this section, you will have to play around with the interface builder as a way of learning.

For the learning exercise, try to complete the following tasks:

1. In the widgets section, add the Video On/Off Widget and the Screenshare to the footer center of the experience
2. Add the audio mute/unmute to the player top left of each participant video player
3. Enable all the widgets for the roles of host, panelist, and participant.
4. For the audio mute/unmute widget, toggle the “Only For Current User” on.
5. Make sure all widgets are aligned and centered by using the Alignment section.
6. Have all roles use Horizontal Carousel for the video layout with dominant speaker toggling enabled
7. Using CSS from the advanced section as a border color of your choice for the video

The above exercise aims to give you an understanding of the basics of the interface builder. Scroll down to the Test Area and join the session to test the video technology.

After your template is completed, head out to the template’s section main area and remember your template_id:

You will need this later when creating your live sessions through the API.

Backend with Express

With the template created, we will start on the backend of our application using Express. Express is a web server in Node that is relatively easy to set up. Start by navigating to the backend folder of your project.

cd backend/

Now make the main file for your application:

touch server.js

Next, we are going to initialize a node app with the following:

npm init

Enter the required fields for creating the application. The main file is the server.js file we just created. Afterward, we need to install a few packages.

First, we are going to install the express web server:

npm install express --save

We are going to need to install the ability to retrieve dotenv files

npm install express dotenv --save

Installs CORS will allow browsers to access the API via HTTP Requests

npm install cors --save

We need to install BingeWave’s Javascript Library to connect with their API:

npm install invirtu-javascript-api --save

With the basics of the applications implemented, we can start to code! In the server.js file, copy and paste the following:

To summarize this code, we require Express, which creates the web server and sets the port to 4000. Next, we use an ‘app.get’ function to establish one route in Express. After saving the above, to test the application, run:

node server.js

on your command line and then in a browser, go to localhost:4000. Hello World will return.

Now we will set up the .env file. The .env will hold environment variables that we want to access throughout our Apps backend. Start by going to your organizer’s account and retrieve the Auth Token and Organizer ID. To navigate to these values:

1. If you are on the organizers’ site, click on the COG, and scroll down to the API Token. Clicking on it will allow you to create and retrieve JWT Token.

Step 1: The Cog

Step 2: The API Tokens

2. If you are on the developers’ site, scroll to the stop and click on Organizers. Click on Tokens and either create or retrieve a JWT Token.

Now create the .env file

touch .env

Copy and paste those values inside a .env file that is created at the root directly of your project.

ORGANIZER_ID=[Replace with the organizer ID]
ORGANIZER_TOKEN=[Replace with the Organizer Token]

Also, this is an excellent time to put the template ID from the template created in the previous step. Copy and paste it into the .env file as well.

TEMPLATE_ID=[Replace with the template ID]

Next, we need to retrieve values from the .env file and have them imported into the server.js file. Using the dotenv package we installed earlier, import that .env as such in the server.js:

//Setup to get variables from .env file
const dotenv = require(‘dotenv’);
dotenv.config({ path: ‘./.env’ });

This is also a good time to enable CORS. By default browsers will block http requests to server from a different domain. Enabling Cross-Origin Resource Sharing (CORS) will allow browsers to make request. Import cors as such in the server.js file:

const cors = require('cors')

And enable it for the app, also in the server.js file:

//Allow CORS for call endpoints
app.use(cors());

In a previous step, we installed the API with `npm i — save invirtu-javascript-api`; now, we will call that API endpoint. But, first, we are going to import some classes we are going to need.

const { Config, Events } = require(‘invirtu-javascript-api’);

The Config is used to set the JWT auth tokens that will be passed into the API. From the .env file, set the Authorization token as a global variable.

Config.setAuthToken(process.env.ORGANIZER_TOKEN);

Now we will define a route for creating a live event. All video conferencing, audio conferencing, and live streams are considered Live Events. Start by looking at the live event documentation here:

https://developers.bingewave.com/docs/events#create

At a minimum, the required fields are the organizer_id, and the event_type, which can be found here:

https://developers.bingewave.com/types#event_types

We are going to create an INSTANT EVENT. We will also include the template id from the previous step so that the live session will copy the experience we made in the template. Then, going back into the Express backend, we will add the following POST route that will call the API endpoint for creating a live event.

The current server.js file should resemble something like the below code:

And then either restart the web server if it is already running, or start the web server using node.

node server.j

The web server should be using Port 4000. If you have Postman, you can test the API route but sending a post request to:

http://localhost:4000/events

Your Postman call and response should look as such:

Now that an event is created let’s add more routes to get a list of live events you have previously made. The documentation for getting the events is here:

https://developers.bingewave.com/docs/events#list

All that is required to get a list of events is the organizer_id. Then, using the Events import, we can start to write our code as such:

A completed version of the backend code will look as such:

Restart the node server and use Postman GET request to retrieve a list of live events you have created.

Congrats, your backend is done and you correctly interfacing with the API! Now, we can start programming our front end in React.

Required Step: Enable The WebRTC For Localhost

Before moving on to the next steps, you must enable the WebRTC for localhost. By default, browsers will block WebRTC connections that are not behind an SSL website, and you will get an error message that says something like:

getUserMedia Permission Denied

To get around this limitation, read here on how to enable WebRTC for localhost. Afterward, your local host will work fine for video and audio connections.

React Frontend Setup

The frontend application will be a very simple React application that can be used to create and retrieve live events. First, we can start by creating the React application using npx. First, go back to the root directory of the project.

cd ..

You will know if you are in the correct root directory when you see both the frontend and backend folders. In the root directory of the project folder, run the following command to create the Frontend Application.

npx create-react-app frontend

This command will create the react application inside the frontend folder. We will now go into the frontend folder and install some required libraries for our application to work correctly.

Go into the directory:

cd frontend

Install BingeWave Widgets Library for rendering the components:

npm install invirtu-react-widgets --save

Install React Router for navigation:

npm install react-router-dom@6 --save

Install Bootstrap for basic styling

npm install react-bootstrap bootstrap --save

The front end will have its own .env, so start by creating one as such:

touch .env

Inside the frontend’s .env file, we are going to set our API endpoint to the backend as such:

REACT_APP_API_URL=http://localhost:4000/

Now we are going to create the pages of our application that we will be navigating to:

mkdir -p src/pages
touch src/pages/HomePage.js
touch src/pages/CreatePage.js
touch src/pages/EventsPage.js
touch src/pages/JoinPage.js
touch src/pages/StreamPage.js
touch src/pages/BroadcastPage.js
touch src/pages/ConferencePage.js
touch src/pages/PopupPage.js
touch src/pages/TicketingPage.js

The reason we have so many pages is there are a lot of different widget types that BingeWave provides, and we want to demonstrate each one clearly. So, inside each page, paste the following boilerplate.

src/pages/HomePage.js

src/pages/CreatePage.js

src/pages/EventsPage.js

src/pages/JoinPage.js

src/pages/StreamPage.js

src/pages/BroadcastPage.js

src/pages/ConferencePage.js

src/pages/PopupPage.js

src/pages/TicketingPage.js

And then we can start the React application with npm start on the command line:

npm start

Important: In a separate tab on your command line, start the node server. We will need it running to make API requests.

In your browser, the React Application will start with the default home screen. Let’s start making some changes to the code in the src/index.js file.

Start by importing the React Dom CLient:

import { BrowserRouter } from “react-router-dom”;

And then import Bootstrap.

import ‘bootstrap/dist/css/bootstrap.min.css’;

Now we are going to wrap our application in the browser router.

root.render(
  <BrowserRouter>
     <App />
 </BrowserRouter>
);

The page complete code will look as the following:

Next, we are going to need to include all the pages inside the application. In the src/App.js, import the React Router requirements:

import CreatePage from './pages/CreatePage';
import EventsPage from './pages/EventsPage';
import HomePage from './pages/HomePage';
import ConferencePage from './pages/ConferencePage';
import StreamPage from './pages/StreamPage';
import BroadcastPage from './pages/BroadcastPage';
import JoinPage from './pages/JoinPage';
import PopupPage from './pages/PopupPage';
import TicketingPage from './pages/TicketingPage';

Followed by adding a simple navigation to the top of the page so the user can navigate the example app in the src/App.js file.

The complete code for the src/App.js should resemble the following:

Next, let us create a very simple home page. In the src/pages/Home.js, we will implement the page with two links to create a new event, and list pasts live events.

For the Create Live Event page located in the src/pages/CreatePage.js, we will call the API endpoint we created in our Express web server and then render the results on the screen. The code should look as such:

And then, for the final page of this first section, we are going have the src/pages/EventsPage.js that will list all of the events. We are going to call our backend web server again to return the results and then display the options to the end user.

And that completes our base pages for the React app. If you test out the above pages, make sure your backend server is running to accept request! Next, we are going to create the pages for rendering each type of widget.

Widget Pages

Widgets are the rendering of BingeWave’s functionality to appear on-screen. This includes video conferencing, live streaming to even ticketing. The section below will cover each widget page as the information is filled in.

Video/Audio Conferencing

The video conferencing functionality is when one more person can join a live session with their video and/or audio to either talk to the audience or talk amongst each other. The widget used the VideoConferencing component and can be implemented as such into the src/pages/ConferencePage.js file:

Live Streaming

Live streaming is when content that has been pre-recorded (i.e., film) or content that is being streamed live through an external RTMP source (i.e., a video camera) is to be shown to the users. The Live Stream widget can be implemented into src/pages/StreamPage.js as such:

Broadcasting

Broadcasting is when the stream from a video conference is live streamed to users who can watch it like a movie but not be prompted for their camera or mics. The Broadcast widget can be implemented into /src/pages/BroadcastPage.js as such:

Join Widget

The join page acts as a “preview” page for the user where they can set up their camera and mic before joining a session. This page also can collect information such as name and email. The code to implement the Join widget into src/pages/JoinPage.js is the following:

Pop-up Widget

There will be instances a live event widget will not work inside a web page and require its own page. The pop-up widget will open a widget inside a pop-up and can be implemented into /src/pages/PopupPage.js as such:

Ticketing Widget

For some live events, you want to either charge a ticket price or have people RSVP to a future event. This widget will collect the RSVP information and can be implemented into src/pages/TicketingPage.js with the following code:

Demo Code and Finishing Up

With the final code implemented, you can test the various widgets and their functionality. Code for this tutorial is provided at: https://github.com/Invirtu-Tutorial-Examples/React-Express-Low-Code-Video-App