Processing video calls in SDKs

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

Before you implement video calls functionality in your web or mobile application, you need to create your application, import our SDK, connect to Voximplant and login with your user. See this guide to learn how to do this.

1. Prepare the scenario in your control panel.

Set the video parameter in your scenario to true. See the How to process calls in a scenario article to learn how to process calls in the scenario.

You can make a peer-to-peer call, which connects two devices directly instead of routing through Voximplant servers. It provides better connection security and audio/video quality. To make a peer-to-peer call, use the callUserDirect method:

2. Prepare the call settings in your web or mobile application.

Set the videoFlags parameters (in a mobile application) or video parameters (in a web application) to true. See the code example on how to do this in mobile and web SDKs:

3. Create UI elements to display local and remote video.

Depending on the platform, create corresponding UI elements:

4. Show 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, specify the created video element's ID in the SDK init() method. In a call, 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:

5. Show the local video

In the Web SDK, specify the created video element's ID in the SDK init() method. Then set the SDK's showLocalVideo parameter to true, and 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.

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

6. Start the call.

Grant camera and microphone permissions before you start a call. During the call, your video renders in the local video container, and your interlocutor's video renders in the remote video container.

After you start a call 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 call method in your SDK.

You can find more information about starting a simple call in the How to make an audio call article.

All the inbound calls in Voximplant are processed by routing rules. Before you process an inbound call, create a routing rule and set it up for your specific scenario. Follow this guide to learn how to do this.

1. Prepare the scenario the same way as for outbound video calls.

Set the video parameter in your scenario to true. See the How to process calls in a scenario article to learn how to process calls in the scenario.

2. Prepare the call settings in your web or mobile application.

The settings are the same as for outbound calls. Set the videoFlags parameters (in a mobile application) or video parameters (in a web application) to true. See the code example on how to do this in mobile and web SDKs:

Pass the settings to the call.answer() method as it is shown in the code below:

3. Follow steps 3, 4, 5 of the "How to make a video call" section above.

These sections explain how to create UI elements for the video, and how to show the remote and local video.

4. Now you can make a call into your application.

Note that these instruction cover only Voximplant functionality. You may need to position buttons and video elements where you want them to see, set appropriate element sizes or hide/show elements in your application when a certain event occurs.

Here you can download our video calls demos for multiple platforms for your instance: