Building A Custom Video Chat App In 5 Minutes

Published in

BingeWave

8 min readJul 21, 2021

You’re ready to begin developing a video chat or live streaming application! But you have a problem, where do you start? Capturing the user’s camera? Setup TURN servers for WebRTC? Handling RTMP to HLS conversions? That can be a lot to learn!

How about we start with something much simpler, copy and paste. Yes, copy and paste some code to build a live streaming application.

At BingeWave, we have designed an infrastructure to make building a live streaming app easy. In fact, this first tutorial should only take between 5 to 10 minutes to complete for your first live streaming web app. We provide several tutorials, each getting more complex as you customize your app.

Technical Overview

Developer Requirements: The document was written for developers who have an understanding of the following:

Basic HTML
Ability to read JSON

Estimated Time To Complete: 5–10 Minutes

Difficulty Level: Easy

Download The Code

If you want to download the code for this tutorial, please head over to our Github repository for a working example.

https://github.com/BingeWave/Gettiing-Started-WebRTC-Video-Chat-For-Web-Apps

Each tutorial is accompanied by its own repository to help you build the solution being discussed.

Step 1: Create An Organizer Account

In all of our tutorials, you will be required to have an organizer account to access the API. The account only has to be created once and takes about 2–3 minutes to complete. Please read here on Setting Up Your Organizer Account For Live Streaming.

Step 2: Instant Event

To get started with the Video Chat, we will create what is known as an instant event. On BingeWave, all live streams are considered live events, and all events fall into two categories:

Instant Live Events: Live video events that happen with no prior planning and DO NOT require a scheduled date/time. For example, you are hosting a quick meeting with your co-workers or starting a video chat with your followers.
Scheduled Live Events: All other live video events besides instant events require a scheduled date/time. For example, a live film event requires a date to be scheduled in the future.

You can see a list of all the live event types here:

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

Next we are going to use the Query Builder for testing calls to the API. The Query Builder is a tool in the API that allows the testing of API routes before writing any code.

Make sure you are logged in and have completed Step 1 with the organizer account. Go to the ‘Query Builder’ and navigate to the Live Events section. Select the Body Params, enter the event type as 7 and select an organizer account from the dropdown.

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

The fields will auto populate. Click send, and you will receive a successful response. In the success response, you will notice two fields that say:

embed_script_tag
embed_video_chat

Important note: Please remember to remove ‘\’ s from the key value pairs of embeded_livestream & embeded_script_tag when placing the tags into other sites.

We are going to copy and paste these values into a webpage!

Step 3: Embedding Into Your Webpage

You’re almost done! The last thing we need to do is embed the embed_webrtc code into a webpage. This code can go into any browser-based application. This includes but is not limited:

Wordpress Site
React Application
Basic Webpage
Etc

In this example, we are going to use a basic html page. Start by going to your favorite editor and just copy and paste the below code into an empty index.html file.

Notice the HTML comment.

Form the JSON response in step 2, copy and paste embed_script_tag value and paste it below the HTML comment . Next, call the BingewaveConnector.init() to activate BingeWave’s widgets.

Finally, find the HTML comment tag. From the JSON response, copy and paste the value for embed_video_chat right below the comment, and you’re done! Your final copy should look something like the below:

How It Works

If you are curious about how this works, the script tag will scan the entire web page looking for the embed tags when your web page loads. When it finds one, it replaces the embed tags with the desired widget. We offer multiple widget types that includes chat and products, but those are for more advanced tutorials.

Open In Your Browser

Open the html file in a browser, click join, and your video will pop up and you’re done! You should see yourself appear on screen.

getUserMedia Is Undefined Error

If you tried to test the code and received a getUserMedia is Undefined error in your console, which looks something like this:

This means your browser’s security settings are blocking your camera. To fix, do one of the following:

Allow Insecure Domains — Read Short Article
Use Ngrok’s https connect (described below)
Put on a hosting platform like Heroku

Step 4: Adding A Widget

For the final step, we are going to add a widget. To start, our video platform provides a framework with a Widget System, in which features can be dynamically added and removed anywhere on the screen. First, you have to understand how we think about the video player. A standard video looks something like this:

We have taken this standard view and turned it into a grid system like the image below:

Each box is an area that a widget can be overlayed into. A full list of our positions is available here:

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

We are going to do is implement a game of TicTacToe into the live stream to demonstrate the positioning of widgets on screen.

Start by looking at your widgets here to get an idea of what is available: https://www.bingewave.com/widgets

Widgets can also be accessed via our API. Head over the query builder for the widgets and retrieve that same list from our API:

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

The id of the TicTacToe game is ‘72d9a850–200a-4162–95cf-423b56efd563’. In the documentation, you will notice there is the option of adding a widget to a live event.

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

The only two required fields is the event_id and the widget_id, but there are three other fields we want to include.

position:From the previous step of where we looked at the positioning system, we are going to select the Aside Top Left, that has a value of 20 and appears on the left side of the container.
accessible_for_participants: The widgets can be activated and de-activated for different user roles. This will allow anyone with the role participant to access the widget.
accessible_for_host: Similar to accessible_for_participants, this will make the widget available for the host as well.

Go to the query builder and enter the event_id, widget_id, position, accessible_for_participants, and accessible_for_host in the correct fields:

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

If you go back to your video on your website, a game of TicTacToe will now appear when the video is active. Congratulations! We have learned the basics for adding widgets to experiences.

Challenge — Open In Browser Using Ngrok

Running the code on your local computer presents 2 issues:

No one will be able to test it with you
Browser security will prevent the saving of cookies in the embed

As a challenge, we are going to get your site up and running in Ngrok. Ngrok is tool that can allow you run local hosted websites on the internet. To start download Ngrok here: https://ngrok.com/download

Afterwards we are going to use NodeJS to run a web server. If do not have Node installed on your system, Google how to install it. We are going to initialize using npm:

npm init

And then install 2 packages:

npm install http #install a basic http server
npm install fs  #installs the file reader

The http is going to create a web server on your local host and the fs is going to read in the html file and have the web server display the contents.

touch index.js

And inside, paste the following:

The server is set to listen on port 3200. On your command line, run the index.js file using node:

node index.js

Finally in your web server open up localhost:3200 and your page should appear! Now for the really cool part with Ngrok, we are going to make your web page publicly accessible. In a separate console, because we need our node web server to still be running, execute the following:

ngrok http 3200

When successful, your screen should look like this:

Notice how the forwarding https is highlighted? Copy and paste the url into your web browser and you can successfully share that url with others. Please keep in mind, the url will only be valid for a limited amount of time.