How To Customize The Experience For Joining Live Video Chat Apps

Published in

BingeWave

7 min readApr 1, 2022

Once you have built your video or audio application, you might want to customize the way a user can join the application. You may have different scenarios such as:

You want them to join automatically
You want them to join after a task has been completed
You want them to join with a producer signals they can

And many other scenarios as you build customize solutions. In this tutorial, we will cover several ways a user can join an interactive live-streaming app.

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:

HTML, CSS, Javascript
React Native
Expo

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 For Testing

To begin this application, we are going to create a live event for both web and mobile devices. A live event on BingeWave is any interactive session that entails video chat, audio sessions, live streams, or augmented reality experiences.

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 be 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 use the Query Builder for creating a Live Event 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:

id: The id of the live event; we will reference it a few times later.
embed_video_chat: A tag that is placed in HTML web pages for creating BingeWave’s interface.
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.

Building The Web App

Now that we have the data needed for our live event, we next need to create an application for testing it. We are going to build a web app and mobile application for this start. Start by making your root folder:

mkdir livestreaming-connectingcd livestreaming-connecting

We are going to make two applications, a web and mobile app. Make the folders to reflect that:

mkdir webmkdir mobile

Let’s start with the easy application, the web. In the web folder, make an index file:

touch web/index.html

For the Web App, we are going to use BingeWave’s embed system. The embed system tags BingeWave tags such as:

<bw:widget></bw:widget>

And turn it into an interface for your users. You can read more about the embed system here:

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

Reading the docs, we need to implement three things:

The BingeWave connector script.
Calling the connector script.
The putting the widget takes on-screen.

All of those requirements will look like a simple HTML page like the code below. Place this in your web/index.html file.

Remember to change the XXXX in the bw:widget with the event id from the previous step. Navigate to the page and open it up in your browser. You will not be able to join the session.

Building The Mobile App

In addition to building a web app, we are going to build a small mobile application in this tutorial to allow users to test both. The mobile app will be using Expo; start by installing it globally:

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 mobilecd 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:

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

Source: The URL that will be loaded into the Webview.
Style: Any design elements you want for the view.
javaScriptEnabled: Makes sure the Webview will allow Javascript to run.
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. Notice the Standard Join Button is implemented by default.

Hiding the Join Button And Connect Via API

To begin customizing the standard connect, we are going to hide the join button. This will prevent the user from joining on their head. Start by heading over the API docs and look for the hide_join_button field:

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

Using the Query Builder, we are going to set that to true. Using your event_id, update the event setting the hide_join_button to true:

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

Now when you refresh either the mobile app or web app, their join button will be gone.

So how does a user join now? We can use the API to have the user be connected to the call. The docs for this are found at:

https://developers.bingewave.com/docs/status#connectuser

For the connect app, two things can happen.

You can pass in no parameters in which all users will be connected to the video call
You can pass in an account_id, in which only the user with that account will be connected to the video call

Let’s test out the API endpoint. Using the query builder and your live event id, send a request to connect:

https://developers.bingewave.com/queries/status#connectuser

When you click send and either go to the mobile app or web app, you will be joined to the app. Nice work! A good use case for using this endpoint is when:

You have your own custom join button that can be elsewhere in the interface.
When you do not want people to join until they are explicitly invited.

Auto Join

Another feature that can be implemented is the auto join. As the name suggests, when the interface loads, the user will automatically join the session. To start with auto_join, the option is available in the docs:

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

Similar to how we updated the hide_join_button, we are going to enable the auto_join feature in the Query Builder. Head over to the Query Builder with your event_id, and update the auto_join as such: