1. Guides
  2. Conferences
  3. Processing conferences in SDKs
Rate this page:

Processing conferences in SDKs

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

Contents

Copy URL

Ready-to-use video conferences demo

Copy URL
Web video conferences

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

See Available Roles

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

Copy URL

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

Before you start

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.

See Available Roles

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.

  1. Create an voice conference in your scenario.
  2. 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.
Create an voice conference
Copy

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

Copy URL

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

Before you start

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.

See Available Roles

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.

  1. Create a video conference in your scenario.
  2. 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
Copy

Create a video conference

Call settings

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

See Available Roles
  1. 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
Copy

Create UI elements for the video

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

  1. 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.

Note

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.

See Available Roles

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

Show the local video
Copy

Show the local video

  1. 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.

Note

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.

See Available Roles

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

Show the remote video
Copy

Show the remote video

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

Copy URL