Processing video calls in SDKs
This article will help you to make and receive video calls on your web or mobile application.
Before you implement video call functionality in your web or mobile application, you need to create your application, import our SDK, connect to Voximplant, and log in 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 incoming 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 of 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 |
You need only to create the video elements as described in this guide. You do not need to create the <video> tags manually, the SDK does it automatically when it starts rendering the video.
- 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 at 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 at 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 a voice call article.
How to process an incoming video call
All the incoming calls in Voximplant are processed by routing rules. Before you process an incoming 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 outgoing 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.
- Pass the video flags to the call.answer() method to answer the call with video, as 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 instructions 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 call demos for multiple platforms for your instance: