Rate this page:

Video conference through Voximplant media servers

Our team proudly presents a brand new video conference functionality, which includes:

  • centralized server-based conferencing (SFU)
  • up to 100 members (depends on bandwidth)
  • Endpoints
  • managing each Endpoint's media elements
  • MediaRenderers inside Endpoints The functionality provides vast opportunities to make one-to-many or many-to-many video conferences with the versatile management of media elements, streams etc. This article will help you to understand all features and advantages of the functionality: step by step, you'll learn how to work with Endpoints and MediaRenderers, and how to create server-based video conferences.
PLEASE NOTE

You need Web SDK 4.3.0 or higher to use this functionality

Step 1 – Layout

First of all, let's grab a simple demo to demonstrate all further concepts and tricks. You can get the demo layout here.

PLEASE NOTE

In this demo, we use HTML templates and normalize.css (in addition to the main style.css file).

We recommend using Web Server for Chrome as it makes development and debugging easier. Install and open the app, click "Choose folder" and specify the folder with your project. After that you'll see the Web Server URL, that's it.

Step 2 – Init and Login

To use Web SDK, you have to:

  • get the Voximplant class instance;
  • then initialize it;
  • and connect to the Voximplant cloud. We are also going to use two JS files: index.js and helper.js. The index.js will contain necessary code related to described concepts; the code which is not related to the theme is placed in helper.js So, create index.js in the project's root and add first lines there to create a logger and define variables to control form:
Create a logger and defining variables

Create a logger and defining variables

Next, we have to get the Voximplant SDK instance:

Getting the Voximplant SDK instance

Getting the Voximplant SDK instance

Add a handler for the submit action:

Handling the submit action

Handling the submit action

Then we have to add a condition to that handler to make our web client connect to the Voximplant cloud:

Connecting to the Voximplant cloud

Connecting to the Voximplant cloud

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

Logging in

Logging in

Step 3 – Call processing

There are methods and events in Web SDK to handle incoming calls. The following code allows to handle calls and do appropriate actions if call is disconnected or failed. The callForm initiates a call after submission while callDisconnect hangs up. Each call status reflects in a console (see the column under the forms).

Add the following blocks of code to the index.js to implement described logic. Start with making a new call and hanging up a call:

Making a call and hanging up

Making a call and hanging up

To handle incoming calls add this handler:

Handling incoming calls

Handling incoming calls

Great! There's only one thing to do in this step – add the handlers for call's states Connected, Disconnected and Failed:

Handling call's states

Handling call's states

Now web client is able to answer first incoming and decline other incoming calls while the first one is active. It also handles connected/disconnected/failed call's states and provides logging.

Step 4 - VoxEngine: set up Voximplant application with JS scenarios

To make things right, we have to create an application and a rule in it. Go to Applications, click New application, type the name of a new application (“confapp”, for example) and then click Create.

Remember that the Web SDK code can't perform call management by itself, without cloud JS scenarios. That is why we have to create a scenario.

Create the conference scenario with the following blocks of code. Firstly load the conference module and define variables for a conference and participants' counter:

Making preparations

Making preparations

Now add a handler for the very first call which creates a conference. Note that the conference creating executes once in a session.

Creating a conference

Creating a conference

Create another handler for further incoming calls. The handler answers a call and connects it to the conference. It also increases participants' counter:

Handling incoming calls[2]

Handling incoming calls[2]

Put these lines to the same handler to create a function which stops a conference if there are no participants:

Stopping the conference

Stopping the conference

Then add a new rule to your confapp application; you can name it Conference. Use the conference JS scenario in this rule. Don't forger to select the Video conference checkbox to allow video streams in conferences.

To use the application, you need to create at least one user. Go to the Users tab inside of the application, create a user named user1, set a password for it; the active checkbox should be selected. Click Save.

That's it! We have prepared the Voximplant cloud to serve video conferences.

Step 5 – Endpoint introduction

Endpoint is one of the new concepts in the latest release. It represents any remote media unit in a call. Endpoint can be:

  • another call (e.g. which is joined to the conference)
  • Player
  • ASR
  • Recorder Each call from Web SDK includes only Endpoints, which send audio/video stream to a call. That means there wouldn't be ASR's and Recorder's Endpoints in a call from Web SDK. Voxengine conference in the cloud contains Endpoints for all participants:

Call from Web SDK also includes local audio/video and Endpoints with MediaRenderers:

There are events for Endpoints, which allows tracking Endpoints' behavior. For example, we can catch the moment when another participant joined the conference and create the container for video rendering. Accordingly, we can delete this container when the participant left the conference.

Add a handler for the EndpointAdded event to the bindCallCallbacks function:

Handling the EndpointAdded event

Handling the EndpointAdded event

Then create the onEndpointAdded function which sets up a rendering container for a new participant:

Setting up a rendering container

Setting up a rendering container

And the second function which deletes the rendering container:

Deleting the rendering container

Deleting the rendering container

Step 6 – Working with MediaRenderer

It is possible to create container for video rendering when web client started to receive remote video stream. Accordingly, we can delete this container when remote video stream is stopped.

When remote video is started, we have access to the MediaRenderer instance. Let's use it for extended logging. Add the handlers for the RemoteMediaAdded and RemoteMediaRemoved events to the onEndpointAdded function:

Handling the RemoteMediaAdded and RemoteMediaRemoved events

Handling the RemoteMediaAdded and RemoteMediaRemoved events

When you subscribe to the RemoteMediaAdded event, Web SDK will no longer render remote audio/video stream automatically, so you have to call the MediaRenderer.render method with optional container parameter. To do so, add the following lines to the onRemoteMediaAdded function.

Calling the MediaRenderer.render method

Calling the MediaRenderer.render method

How to use it

  1. Clone this repo to your local machine.
  2. Open the Web Server for Chrome, click Choose folder and specify the Step 7 folder. Open the suggested Web Server URL in your browser.
  1. Type in the Full login in the right column. The Full login consists of a user name (user1) + @ + application name (confapp) + your Voximplant account name + voximplant.com. Then type in the password for the user1 and click Connect&Login.

Allow access to your microphone and camera.

  1. Then specify Conference name/number as myconf and click Call.

Nice, now you are the conference participant! Ask your friends to do the same steps on their machines and then enjoy your conference call.