This blog post will guide you on how to make a video call on the web using Chrome browser without installing any application. We’ll be using EnableX to handle the video calling and FCM (Firebase Cloud Messaging) to handle the push notifications on the web/browser.
How to build a WebRTC based video calling app using push notifications
EnableX is a cloud-based communications platform (CPaaS) that provides all the necessary toolkits/APIs to establish a video call in web or mobile applications. It offers two sets of APIs to achieve this:
- Server APIs: The client endpoint must set up an application server that carries the task of creating a Room on the EnableX server, obtaining the Room ID, and creating a token to allow the user to join the Room by calling Restful APIs known as Server APIs.
- Client APIs: While the Server APIs deal mainly with provisioning the Room and authorising the user, Client APIs handle the actual communication part like connecting to the Room, publishing and subscribing to the media streams, handling in-session events, etc. These Client APIs are a part of EnableX Toolkit/SDK that needs to be downloaded to enable the client endpoint to make video calls using a native browser (in this case).
Now that we have a fair understanding of how EnableX establishes video calls, all we have to do is find a way to inform the other party of an incoming call. As we do not have any specific video calling application installed for this purpose and are only using a native browser, we have to figure out a way to send a notification to the other party. This is where Firebase comes to our rescue.
Firebase is a cross-platform cloud solution for sending messages and notifications on Android, iOS, and the web. We can use these push notifications to send EnableX token to join the Video Room initiated by the caller, to the callee.
Steps For Implementation of Video Calling Using Push Notification
- Account creation:
- Register for a free EnableX trial account here
- Create a video project at https://portal.enablex.io/projects/new-project/ and obtain the project credentials i.e. APP ID & APP Key generated against the project.
- Set up your project on Firebase using https://console.firebase.google.com/
The two main components of the video-communication architecture that need to be configured are:- Server: The application server needs to be additionally configured to hold the push notification server keys like Firebase for Web and Android or APN for iOS. This database mapping of registered devices and respective push notification server keys allows the application server to prompt the respective push notification service to send a notification to the receiver.
- Client: A web (JavaScript) client SDK needs to be downloaded on the client endpoint.
Test The Implementation of Video Calling Push Notifications
Now that we have set up our project on EnableX and Firebase, and configured the client and server accordingly, we are ready to try our first video call on the web using push notifications.
- Open the Chrome browser and enter the application server URL https://localhost:3456/ to access the push notification server. You should see the following screen:
- Register the user/client endpoint:
- Register the user on the push notification server by entering the user’s email or phone number or any other identifier. This registers a service worker which is a script run by your browser in the background to trigger push notifications.
- Please note that the service workers are registered only once. So, if you have already registered the user, you will not get approval from the service worker again. hence unregister service workers, clear up cache, and start with a clean slate.
- Permit the push notification by clicking Allow and your service worker will get registered.
- Saving subscription on the backend
- Once the user allows permission for subscription, you can save the subscription token in the database ( we have used Mongo). All you need to do is, retrieve the subscription token from the frontend and store it in the backend. Using this subscription token and user/device mapping, the server would be able to trigger push notification messages.
- After saving the subscription, you can see the list of users with a button to make a call. Also,you’ll notice in the developer toolbar that a service worker has been registered for this application.
- Make a Call:
- Clicking on the Call button will trigger a push notification to the callee displaying a message with the URL of the client application (eg: https://localhost:8080/confo.html?token=) along with the EnableX video room token required to join the video call. The caller would be redirected to a new browser window with a URL like https://localhost:8080/confo.html?token={ENABLEX_MODERATOR_TOKEN}
- Receive a Call:
- The callee would receive a push notification toast on her browser.
- On clicking on the push notification toast, the callee would be redirected to a new browser window with a URL like https://localhost:8080/confo.html?token={ENABLEX_PARTICIPANT_TOKEN} The video call shall now be in progress as shown below:
- If you are testing the video call on the same device, then you can see two browser windows- one window for the caller and another window for the callee.
- App Focus:
- As your application is running on the browser, it is bound by certain constraints in terms of application focus.
- The browser shall bring your application under focus only when:
- – Your app is running in the currently selected browser tab.
- – The browser window/tab currently has focus, as defined by the operating system.
Congratulations! You just created a video calling application on EnableX platform using web push notification running on chrome browser. Thrilled to try more? You can extend this application to integrate with Android & iOS apps as well by simply following the ReadMe instructions in the GitHub repository: EnableX video calling app using push notification
Code
The complete code for this post is available at –
Push Notification Server –https://github.com/EnableX/EnableX-Video-Calling-App-Push-Notification-Service
