Processing conferences in SDKs

This article will help you to make audio and video conferences in your web or mobile application.

Ready-to-use video conferences demo
Creating an voice conference in SDKs
Creating a video conference in SDKs

Ready-to-use video conferences demo

Voximplant already has a free and ready-to-use video conference solution available for everyone at:
http://videoconf.voximplant.com/

In case you want to create your own video conference client and customize it for your needs, we provide a ready-to-use video conference demo with source code on GitHub.

This GitHub demo provides the following features: calls, conferences, simulcast (SDK v4.5 and above), including managing inbonund media quality with Simulcast (SDK v4.5 and above); call transfers, DMTF sending, screen sharing, and working with Voximplant.Hardware.

Creating an voice conference in SDKs

This section allows you to create voice conferences in SDKs from scratch.

Before you start implementing voice conferences, you need to create your application, import our SDK, connect to Voximplant and login with your user. See the SDK quick start guide to learn how to do this.

Creating voice conferences in SDKs is very similar with creating voice calls, with only exception that you need to call the callConference method instead of the call method.

Create an voice conference in your scenario.
In the SDK, prepare callSettings the same way you do it for a voice call, and use the callConference method to call the conference from your SDK. See the code example below to understand how it works.

Create an voice conference

As an voice conference does not require any visual elements to display, you do not need to prepare anything else. To end the conference, use the hangup() method.

After you start a conference in your mobile or web application, you receive this call in the platform. Create a proper routing rule to match the destination in the first parameter of the callConference method in your SDK.

Creating a video conference in SDKs

This section allows you to create video conferences in SDKs from scratch.

Before you start implementing video conferences, you need to create your application, import our SDK, connect to Voximplant and login with your user. See the SDK quick start guide to learn how to do this.

Creating video conferences in SDKs is also very similar with creating video calls, with only exception that you need to call the callConference method instead of the call method.

Create a video conference in your scenario.
In the SDK, prepare a callSettings object. It should contain all the parameters for a video call, and an additional boolean parameter simulcast. This parameter enables video quality management.

Then use the callConference method to call the conference from your SDK. See the code example below to understand how it works.

Create a video conference

Enabling receiveVideo parameter is required for a video conference. The sendVideo parameter can be turned on and off at your choice.

To display video elements, create video containers in your SDK. You need containers for local and remote video.

Depending on the platform, create corresponding UI elements:

Platform	UI Element
Web	HTMLDivElement
iOS	UIView
Android	SurfaceViewRenderer
React Native	VideoView Component
Flutter	VIVideoView Widget

Create UI elements for the video

Then, you need to render the local and remote video into the created containers.

To be able to see yourself in the conference, you need to render the local video.

In the Web SDK, specify the created video element's ID in the SDK init() method. When you set the SDK's showLocalVideo parameter to true, the SDK renders your video in the specified container.
Alternatively, you can use the StreamManager's events to control displaying the video. See the code example below to understand how it works.

In the iOS/Android SDKs, subscribe to the local video stream event (didAddLocalVideoStream for iOS, and onLocalVideoStreamAdded for Android), call the videoStream.addRenderer method inside and point to the created UI element to render the video.

In the React Native/Flutter SDKs, subscribe to the local video stream event (_localVideoStreamAdded for React Native, and _onLocalVideoStreamAdded for Flutter), and specify the streamId for the required video element.

You can choose the video scale type when you add a video renderer. SCALE_FILL fills the video in the UI element completely, cropping the video; and SCALE_FIT fits the whole video in the UI element, leaving some space empty.

Please take a look on the code example for all these SDKs to understand how it works:

Show the local video

To see the other conference participants, you need to render the remote video.

All the remote connections are represented as Endpoints in Voximplant SDKs. Endpoints have their own set of events to manage video streams. In general, to show the remote video, you need to get the endpoint, get the endpoint's video stream and specify the UI element to render it.

In the Web SDK, it is enough to specify the remote video container in the SDK init() method, and the SDK creates all the containers for remote video itself.
Alternatively, you can create video containers yourself for more customization. In this case, subscribe to the EndpointAdded event to get the endpoint object. Then, subscribe to the endpoint's RemoteMediaAdded event to know when a video stream arrives and specify the video container as media renderer target. See the code example below to understand how it works.

In the iOS/Android SDKs, subscribe to the endpoint added event (didAdd endpoint for iOS, and onEndpointAdded for Android) to get the endpoint instance. Then subscribe to the endpoint's remote video stream added event (didAddRemoteVideoStream for iOS, and onRemoteVideoStreamAdded for Android) to get the video stream. Use the videoStream.addRenderer method to specify the UI element to render the video.

In the React Native/Flutter SDKs, subscribe to the endpoint added event (onEndpointAdded for React Native, and endpointAdded for Flutter) to get the endpoint instance. Then subscribe to the endpoint's remote video stream added event (_remoteVideoStreamAdded for React Native, and _onRemoteVideoStreamAdded for Flutter) to get the video stream. Specify the streamId for the required video element to render the video.

Please take a look on the code example for all the SDKs to understand how it works:

Show the remote video

Now you can start the conference call by calling the callConference method.