Making video calls in Voximplant is quite easy. To do that, you have to set everything up for a Voximplant scenario and an SDK client. Please note that prices for audio-only and video calls are different!
First, set the video parameter of the callUser method to true, so that the call has video support. You also need the scheme parameter with the internal information about codecs from the AppEvents.CallAlerting event.
After that, the retrieved scheme should be passed to the Call.answer method to handle calls properly.
Instead of easyProcess one can write the following:
Initiate a video call from SDKs
In order to make outbound calls from the SDK, establish a connection with Voximplant Cloud and authorize the user first.
The first parameter is the Voximplant user to whom we make a call. Voximplant user must match the pattern we set when creating a rule in the Voximplant application. This is necessary for the correct call handling and scenario launching.
To create a video call, you should enable sending and receiving video by setting the VideoFlags parameter.
Safari browser for iOS requires a user interface for playing video during a call.
If the Client.call method is called when the user is not logged in, the method will return null or an exception.
On android, you have to request camera and microphone permission if it hasn't been received from the user yet. If access is not granted, the ICall.start method will throw an exception with the CallError.MISSING_PERMISSION error. This also applies to react-native, flutter, and unity if they run on android.
Answer a call with video
To receive incoming calls, subscribe to the IncomingCall event.
To receive incoming calls, the application must be connected to Voximplant Cloud and the user must be authorized. If the application or web page is closed you need to set up push notifications.
When the event is triggered, we'll get the Call object representing the incoming call and allowing you to control it. In order to answer the call, use the Call.answer method and set the VideoFlags parameter in CallSettings.
On android, you need to request camera and microphone permission if it hasn't been received from the user yet. If access is not granted, the ICall.answer method will throw an exception with the CallError.MISSING_PERMISSION error. This also applies to react-native, flutter, and unity if they run on android.
Display local and remote video
In the Web SDK, you just need to specify the ids of the HTML elements (see the Creating a UI element for local video code sample) into which the SDK will render local and remote videos:
In case, you want to control the rendering process, read further.
To display a local video stream, you need to create a UI element. It will be different for each platform:
Video stream (local or remote) is presented in SDKs (except the Web SDK) as the VideoStream interface. To access the video stream in order to display it, subscribe to the local video stream Added call event. This event will be triggered when the local video stream is created and ready for rendering.
To display the local video stream in the created UI element, you need to:
- Call the VideoStream.addVideoRenderer method – Android SDK/iOS SDK.
- Specify the videoStreamId for the required video element – React Native SDK/Flutter SDK).
To control the rendering process in the Web SDK, display local video with showLocalVideo and then use MediaRenderer.render (DOMNode).
When adding a video renderer, one can specify the scale type: SCALE_FIT – the video will be displayed based on the aspect ratio or SCALE_FILL – the video will completely fill the UI element.
Endpoint and remote video
The Endpoint interface represents any remote call party (Web/iOS/Android application, SIP or regular phone, etc.).
Each Endpoint instance has built-in methods for managing video streams. Endpoints have their own events, e.g., to detect starting or terminating of receiving a video from a remote participant. To get the Endpoint object, subscribe to the EndpointAdded call event.
To display the video stream of a remote participant, create a separate UI element in the same way you did for the local video.
Endpoint has its own RemoteVideoStreamAdded event, which provides access to the video stream of the remote call participant.
You have to subscribe to this event and add the previously created UI element as a video renderer of the video stream received from the event.
The call is considered established when the CallConnected event is triggered. It means that the call has been answered on the remote side.
After the call is established, you can enable/disable video sending, put a call on hold and take it off hold, or enable screen sharing.
To handle this event, subscribe to it: