Table of Contents

Build a JavaScript video chat app with Sendbird Calls

Build a JavaScript video chat app with Sendbird Calls

Alex Orr
Solutions Engineer
Tutorial Type: Getting Started Reading Time: 15 mins Building Time: 2 hrs
CallsJSSDK

Introduction

This guide was created as a two-part guide. Part one shows how to set up calls within Sendbird, and the second part shows how you can implement a screen-sharing functionality with minimal changes to your implementation.

Step 1: Create a Sendbird Account

1. Sign up for a free Sendbird account
2. Create an account using your email id or `Continue with Google`
3. Setup your Organization by entering `Organization name` and `Phone number`
4. Create a new “Chat + Calls” Application in the region closest to your locale.

On the left side of the screen you should see a “Calls” menu, go into the “Studio” and create a new “phonebooth” user.

Define a USER ID to call to. The ID of the moderator will be: 789298.

Sendbird Dashboard with Call Studio.

Figure 4 – Sendbird Dashboard with Call Studio.

 

Step 2. Create a new Project

Let’s start by creating an empty folder and adding the following files:

  • Index.html
  • index.js

Index.html

This file contains 2 sections:

Login section: Where you will be able to enter your Sendbird application ID and user information.
Video section: Once connected, 2 video elements will appear, along with other buttons such as Make Call, End Call, Call user, and Stop sharing.

Import library

The only library used for this project is sendbird-calls so I will import it using NPM but you can use it in different ways.

To to so, I will create a default package.json file, by running the following command: npm init -y

This will create a new file in your folder. Next step is to download Sendbird Calls. Run

npm install sendbird-calls

and wait for the download. Once downloaded, you should be able to see something like this for your package.json file.

Please note that this version for your Sendbird library (1.5.4) may be higher.

Open your index.html file and include this library:

Optionally, I will include Bootstrap for some styling. This is not required.

Part 3: Creating the UI

Connection

Inside thetag of your index.html file, add the elements for entering your Sendbird application ID, user id (and access token if necessary). Add a Connect button for calling our function in Javascript.

You can easily run this in your browser a number of ways. The Live Server plugin is one way that makes this easy if you are using VSCode. If you open this in a browser, you should be able to see the following results:

Image 1.1 – Connection card

Next, I will add the section for showing 2 video elements (local and remote video elements). Local video will show your image and send your audio. Remote video will show the other user’s video and receive remote audio. To prevent listening to yourself, your local audio will be muted.

If you run this in a Browser,  you should see something like this:

Figure 1.2 – Video area with all visible buttons

As you can see, many of those buttons should be hidden. I will apply the login inside the index.js file to show them when it’s the correct time. Let’s hide all of them except Make Call. Check the extra style=”display:none” applied.

Replace the code from above with this new one:

If you refresh your Browser, you should see something like this:

Figure 1.3 – Buttons hidden

That’s all you need for the view part. Let’s jump now to the Javascript code. Create an index.js file in the same folder.

Inside your index.html file, right before the   closing tag, add the following line:

Part 4: Implementation

Index.js

This file contains all the Javascript logic for connecting to Sendbird, making, receiving and ending a call. Also contains the logic for screen sharing.

Global variable

We will have one global variable called currentCall. This will hold the current call once established.

Connect to Sendbird

Next step is to create the function for connecting to Sendbird.

  1. Init Sendbird Calls and validate your application ID.
  2. Ask for browser permission (for transmitting audio and video) A popup will be shown to users. They must approve it.
  3. Authorize the user on the Sendbird platform.

Ask for browser permission is a very simple call:

Authorizing a user with Sendbird is key because this means that this user is valid in our databases:

Last step of the connection process is to connect to Sendbird Websocket. If this is not done, you won’t be able to make or receive calls.

Right after this is done, you are ok to send and receive calls. Not before.

Making a Call

Before screen sharing, you need to have a connected call. To do this, let’s add the following function:

  1. We use the prompt function for asking the user which is the user_id we want to call to. This is native from Javascript and you can use your own implementation.
  2. Once we have a destination user_id, we set our dialing parameters (please notice that you must define which are the video elements to be used for your call.
  3. Next, we make the call (SendbirdCall.dial) and send these parameters to the server.
  4. Some listener functions are created:
    a) onEstablished: Run your logic for when the call is established with the remote user.
    b) onConnected: Run your logic for when the call is connected (not yet established) with the remote user.
    c) onEnded: Run your logic for when the call ends.
    d) onRemoteAudioSettingChanged: Run your logic for when the remote user changes his audio settings.
    e) onRemoteVideoSettingChanged: Run your logic for when the remote user changes his video settings.

More information in our official documentation.

Test a call

To be able to test a call, you can use your Sendbird Dashboard. From your Calls Studio, you have the chance to open your Phonebooth and call a moderator user. User ID for moderator users are usually a number. For my example, my Moderator user ID is 789298

Figure 2 – Sendbird Dashboard with Calls Studio and open Phonebooth

Receiving a Call

If you want to test this using another client application instead of using our Sendbird Dashboard, you need to implement the functionality for receiving a call.

Update your waitForCalls() { … } function:

You only need to add a listener we provide. This listener contains several functions called automatically by the SDK:

  • onRinging: Invoked when receiving a call (and not yet accepted)
  • onConnected: Invoked when we accepted the call.
  • onEstablished: Invoked when the call was accepted by both parties.
  • onEnded: Invoked when a call ends because of any reason.

Conclusion

That is it. That is all it takes! In this guide, we have covered how to create a new application on the dashboard, create users, and create a sample app capable of making and receiving video calls. As mentioned at the start, this is a two-part guide with our next section showing how you can implement screen sharing.