Processing conferences in SDKs
This article will help you to make audio and video conferences in your web or mobile application.
Contents
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 audio conference in SDKs
This section allows you to create audio conferences in SDKs from scratch.
Before you start implementing audio 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 audio conferences in SDKs is very similar with creating audio calls, with only exception that you need to call the callConference method instead of the call method.
- Create an audio conference in your scenario.
- In the SDK, prepare callSettings the same way you do it for an audio call, and use the callConference method to call the conference from your SDK. See the code example below to understand how it works.
As an audio 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.
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 | |
Flutter |
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:
- 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.
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 the SDKs to understand how it works:
Now you can start the conference call by calling the callConference 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.
See also
How to use Voximplant Tiler — A library that help developers work with video layouts in conferences with ease.
How to add screen sharing — In conferences, you can either replace your video with a screen sharing, or show your screen in addition to camera.