Video Conference in 7 Steps

Yesterday, we launched a beta version of our new video conferencing, which distributes video between participants through our own servers using SFU technology . Up to 100 (!!!) participants in one conference, video recording, new JavaScript API for managing from the cloud in real time - all this can be tried now and share ideas and wishes with me. Under the cutter, there’s a step-by-step instruction for assembling a minimal video conference, and through a personal email I’m ready to share Voximplant resources so that you can evaluate everything yourself without spending money on it.

The new functionality provides ample opportunities for creating one-to-many or many-to-many conferences, including the flexible management of media elements, streams, etc. This tutorial will introduce you to all the features and benefits of new video conferencing: step by step you will learn how to work with Endpoints and media renderers, as well as create server video conferences.

Step 1 - Layout

We propose to take as a basis a simple demo - on it we will demonstrate new concepts and chips. You can take a demo from our repository , in the Step 1 folder .

Please note that in the demo we use HTML templates and normalize.css (in addition to the main style.css file ).

We also recommend using a web server for Chrome , because it greatly facilitates development and debugging. Install and open this application, click Choose folder and specify the folder with the project. After that, you will see the Web Server URL.

Step 2 - Initialization and Login

To use the Web SDK, the first thing we need to do is:

• create an instance of class Voximplant ;
• then initialize it ;
• and connect Voximplant to the cloud.

We will also use two JS files: index.js and helper.js . There will be code in the index.js file that illustrates the new functionality; In the helper.js file , we have taken out code that is not directly related to video conferencing.

So, create the index.js file in the root of the project. The first lines initialize logging and define variables to control the form:


Next, we get the instance of the Voximplant class:

const sdk = VoxImplant.getInstance();

Now add a handler to submit the form:


In this handler, you need to add a condition under which the web client connects to the cloud:


Finally, we must log in. In case of login error, this will be reflected in the log. To do this, add the following code to the same handler:

Step 3 - Call Processing

Our Web SDK has methods and events for processing incoming calls. The code below allows you to receive calls, as well as correctly process calls in disconnected and failed statuses. The handler for callForm starts the call after the form is submitted , and the callDisconnect handler hangs up. The call status is logged (see the column under the form).

Add the following blocks of code to implement this logic. Start by creating a call and ending it:


For incoming calls, you need an appropriate handler:


Excellent! It remains only to add handlers for the status of Connected, Disconnected and Failed:


Now the web client can answer the first incoming call and reject all subsequent ones while the first call is active. The client also responds to call statuses and logs.

Step 4 - VoxEngine: Cloud JS Scripts

The Web SDK cannot manage calls on its own, without a script in the cloud.

Create a conf_local script . First add the conference module to this script and define the variables for the conference and participant counter:

require("conference");
let conf;
let partsCounter = 0;

For the first call, we need a special handler that will create the conference (the conference is created once per session):


Now add a handler for all subsequent calls: it will receive calls and connect them to the already created conference; he will also increase the counter of participants:


A counter check should be added to this handler: if there are no participants left in the conference, then this conference must be stopped.

Step 5 - VoxEngine: Application Configuration

For the script to work, you must create an application and a rule in it. Go to the Applications tab , enter a name for the new application (for example, conference-app ) and click Create .


It is time to create a rule for the conference, and let's call it Conference . Bind the conf_local script . Please note: the Video conferencing checkbox must be checked to enable video streams.

Done! We have prepared the Voximplant cloud for video conferencing.

Step 6 - What is Endpoint?

Endpoint is one of the new concepts in the latest release. Endpoint represents an incoming (remote) media element in a call:

• another call (for example, who joined the conference);
• Player Get ;
• ASR;
• Recorder .

Each call from the Web SDK contains only those Endpoints that send audio / video to this call. This means that there will be no Endpoints from the ASR and Recorder in the Web SDK call .

The Voxengine conference includes generally all possible Endpoints:


Call Web SDK also contains local audio / video. In addition, Endpoints inside a call include media rendezvous:


There are special events to track the behavior of Endpoints . For example, we can track the moment when another participant joined the conference and create a container for rendering video. Conversely, we can remove the container when another participant leaves the conference. Extend the bindCallCallbacks

function with this handler:

currentCall.on(VoxImplant.CallEvents.EndpointAdded, onEndpointAdded);

The onEndpointAdded function creates and places a container for rendering, and also contains a handler for deleting the container:


Actually, the function that removes the container:

Step 7 - working with MediaRenderer

We have the ability to create a container for rendering video when the web client starts to receive the video stream, and also delete this container when the video stream stops.
When the remote video begins to arrive on the web client, we have access to the MediaRenderer instance . We use this for advanced logging.

Add handlers for the events RemoteMediaAdded and RemoteMediaRemoved in function onEndpointAdded :


When you subscribe to the RemoteMediaAdded event , the Web SDK will no longer automatically render audio / video streams. Therefore, you must call the MediaRenderer.render method with an optional container parameter. To do this, add the following code to the onRemoteMediaAdded function :

How to use the demo

1. Clone our repository to yourself.
2. Install and open Web Server for Chrome , click Choose folder and select the Step 7 folder from the repository. Open the suggested address ( Web Server URL ) in the browser.
   
   
3. Enter the login in the Full login field . The login consists of the username ( user1 ) + @ + application name ( conference-app ) + your Voimplant account name + voximplant.com . Then enter the password for user1 and click Connect & Login .
   
   
   Allow access to your microphone and camera.
4. Enter the name of the conference - myconf - and click Call .
   
   

Great, now you are a participant in the conference. Ask your friends to follow the same steps and enjoy the conference.

Conclusion

Video conferencing can be killer for one business, or it can just be a cool add-on to the main functions of another business. It is not so important what the goal is, the main thing is that the implementation is equally flexible in any case: this is the credo and the main feature of Voximplant. We hope that the tutorial was useful, but if you have any questions, welcome to the comments. Have a good conference and “do not switch - there is a lot of interesting things ahead”.



The picture before kata was taken from the report of Tsahi Levent-Levy.