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.
Contents
How to make a video call
To make the video calls, you need to understand how to make a simple call. Please make sure you know how to use the call() method and how to process calls in the scenario before making a video call.
- 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.
Please note, that if you are making a call via web or mobile SDK, it consists of two call legs: SDK → scenario and scenario → destination. In this case, the SDK → scenario call leg is considered an inbound call in the scenario, so you need to process it via the CallAlerting event as well.
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:
- 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:
Please note, that most browsers do not support video autoplay. To avoid any errors, implement an interactive element that starts video playback on the web video element. Read this article for more information.
- Create UI elements to display local and remote video.
Depending on the platform, create corresponding UI elements:
Platform | UI Element |
Web | HTMLDivElement |
iOS | UIView |
Android | SurfaceViewRenderer |
React Native | |
Flutter |
- 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.
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:
- 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.
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:
- 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.
On Android, you need to request camera and microphone permissions before starting the call. If the access is not granted, your application throws a CallError.MISSING_PERMISSION error.
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.
How to process an inbound video call
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.
- 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.
- 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:
- 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.
- 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.
Download our demos
Here you can download our video calls demos for multiple platforms for your instance: