How To Build A Video Recording App

As video and audio technology expand to new use cases, one frequent requirement asked for is the recording of live content. Recordings are a commonly used feature now when developing an application that serve a variety of different needs such as:

• Recording an interview
• Recording a live event
• Recording a product review
• Recording how-to presentations

And many other use cases that a recording will be required. This tutorial will go into how to create a recording using BingeWave’s video technology. We will use this demonstration to show the recording functionality in both mobile and web apps.

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 Native
• Expo
• Javascript

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/Build-A-WebRTC-Video-Recording-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.

Create A Live Event

Before we build out our application in React Native and Javascript for web browsers, we need to create our video session in what is known as a live event. All video chats, audio sessions, film screenings, and augmented reality experiences on BingeWave are live events. A live event will have all the functionality ranging from recording users to chat messages.

To create a live event, first, you have to understand the event types. There are several types of live events as indicated here in the docs:

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

Except for the Instant Event, every event type requires a date/time as they have to be scheduled. For the brevity of this tutorial, we are going to create an Instant Event. The documentation for creating a live event can found here:

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

To test making the event, we will use a tool called the Query Builder. The Query Builder is an interface with the API that allows developers to test queries and learn the route behaviors before writing code. We will we use Query Builder for creating a Live Event, we are going to create run a query as such:

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

Notice how the type is set to 7 for an instant event, and your organizer account’s ID has been inserted. Click ‘Send’ to run the query, which will return results like below when successful:

There are three fields we want to pay attention to in the JSON response:

1. id: The id of the live event, we will reference it a few times later
2. embed_video_chat: A tag that is placed in HTML web pages for creating BingeWave’s interface.
3. webview_video_chat: A URL placed inside Webviews for mobile apps to use BingeWave’s interface.

This live event object created will be used through the remainder of this tutorial, so keep the data returned available to re-use those values.

Add A Record Button To Your Live Event

Next, we need to add the ability to record your video session on BingeWave. Recording a video call can be done in three ways:

1. We have an API route here that can be used to start and stop recording. This is for highly customized apps that want control outside the video interface.
2. There are pre-built widgets that can perform recording. Widgets are functionality we add to our live event video session.
3. You can build your own widget for doing recordings with the above API.

For the brevity of this tutorial, we are going to use a pre-built widget. Widgets are apps written in HTML, CSS, and Javascript that can be placed anywhere into the experience using the grid system. The grid system is a coordinate system that overlays the entire video player.

You can read more about widgets and grid systems here, but here is a good illustration of the grid system:

We are going to take a pre-built widget for recording and place it in the above grid. There is a widget API available here:

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

We will start by getting a list of widgets and finding the Recording one. Using the Query Builder again, we are going to make a call to the widgets endpoint:

https://developers.bingewave.com/queries/widgets#list

When the results return, there is a Record Widget present with the ID of ‘f5099483–8c38–48e7–88ba-7864220b19a0’.

We want to add that widget to the live event we created above. First, proceed to the documents for adding a widget to an event:

https://developers.bingewave.com/docs/eventwidgets#addwidget

The fields to pay attention to in the documentation are:

• event_id: The id of the live event.
• widget_id: The id of the widget we are adding to the live event.
• accessible_for_host: We will make the widget usable by users with the role hosts.
• accessible_for_participant: We will make the widget usable by suers with the role participant. The participant role is the default role, meaning that all users will have access to the widget.
• position: Where the widget will go inside the grid

Most of the values above are self-explanatory on what values would go in a field. The value that goes into the position field is a field found in our widget positions layout chart:

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

The position we want to place the Record Button in is the Footer Center, and the value for the position is 18. Once again, we will return to the Query Builder and test all the gathered information against the API. Head over to the Query Builder here:

https://developers.bingewave.com/queries/eventwidgets#addwidget

Remember that you have the correct live event id in the route. When the values are correctly entered and you press send, the Record Widget will be added to the Live Event footer you created previously, and the host and participant will now be able to record. Congrats! Next, we can test our application.

Application Structure

Before creating our web and mobile apps, let us add a little structure to this project. On your command line, create a folder for this project.

mkdir recording_app
cd recording_app

This folder will act as our root folder for the project. In this folder, we are going to create a directory for the web and mobile apps.

mkdir web
mkdir mobile

And that’s it! We will use these two folders to build our application in the next steps.

Recording In A Web Application

First, we are going to create a simple web application so that people can record from their computers. You have to start with understanding BingeWave’s embed system that is discussed here:

https://developers.bingewave.com/javascript/bwconnector

For web apps, BingeWave’s Javascript connector is loaded into the web page. The connector then looks for tags that resemble the following:

<bw:widget></bw:widget>

The tags are taken and turned into an interface for the user. Referring back to the embed_video_chat returned as JSON when you created the live event, we are going to implement that into a webpage. Let us create our index file:

touch web/index.html

Place the script and the embed tag inside the index using your favorite editor.html like below:

Replace the XXXX with your live event id. The code is very straightforward HTML tags, Javascript in the head, and the body is just the embed tag. Open the web page in a browser, and your video chat will open up. Join the chat, and the Record button will appear on the bottom. When you click it, the recording will start and stop. That’s it!

getUserMedia Undefined Error

On your local host in your web browser, you might run into this issue:

What is happening is the your browser is block the ability to get the video because it is not a secure connection. To solve this error, read this article here on WebRTC Fix For getUserMedia Undefined On Local Hosts.

Accessing The Recorded Video

Now when the recordings are done, where do they go? There are two ways you get to the recordings. For the API, we are going to head over to the Query Builder for the Pre-recorded content (video) here:

https://developers.bingewave.com/queries/videos#list

Select the Organizer account that is associated with the Live Event and click send. A list of video files will be returned, and some will say Recorded content.

Now that is all your video files. You might want only the video files associated with your live event. To retrieve that, go to the Query Builder for viewing a Live Event here:

https://developers.bingewave.com/queries/events#view

Enter the ID of your live event and click send. When the results are returned, go to the pre-recorded content section of the JSON for that live event. You will see the recording(s) available there.

Congratulations! You know have access to the content that has been recorded. Now let’s move on to creating a mobile app for recordings.

Mobile Application

For building a mobile application for a recording, we will be using React Native and Expo as its the fastest and easiest to set up for a demonstration. If you do not have Expo installed, let us start by installing it:

 npm install — global expo-cli

The above command will install Expo globally. Now let us create the Expo project. In your root directory, type the following on your command line:

expo init mobile
cd mobile

Expo will create a mobile application. When prompted, choose the minimal setup. Now we are going to install a package:

npm install react-native-webview --save

The above package is just a simple Webview that we will use to load external pages into your application. Next, we will remove the boilerplate content and add our recording widget. Remember in the previous step, the JSON for the live event that was the webview_video_chat? The value return from that will now go into a Webivew as such:

<WebView
source={{ uri: ‘https://widgets.bingewave.com/webrtc/xxxxx'}}
style={{flex:1}}
javaScriptEnabled={true}
allowsInlineMediaPlayback={true}
/>

You will replace XXXX with the id of your live event. To break down the Webview implementation:

1. Source: The URL that will be loaded into the Webview.
2. Style: Any design elements you want for the view.
3. javaScriptEnabled: Makes sure the Webview will allow Javascript to run.
4. allowsInlineMediaPlayback: This allows the video to play inline. Otherwise, it would go full screen, and you would lose the functionality.

We are going to replace everything inside the App.js file, and the full code for your mobile application will look like this:

Finally, start your application using Expo:

expo start

Choose to run on Android or iOS. Preferably you want to get this on an actual device because the simulators will not have functioning cameras. Once the app loads, Join the video chat.

When the Start Recording button appears at the bottom, you can start and stop the recording, and it works the same as in the web application. That’s it! Now remember, in the simulator your video will NOT be recorded as the simulator does not have a camera.