Changing Call Audio Output

This guide covers how to change call audio output with the Vonage Client SDK. Before you begin, make sure you added the SDK to your app and (Android, iOS, JS) and you are able to make or receive calls.

Android

To enable seamless audio output switching within your Android application, you'll want to integrate ConnectionService. This allows the operating system to handle audio output routing via the default calling UI users will be familiar with.

Android ConnectionService Resources:

• Voice Reference App using ConnectionService - GitHub

Detecting Changes in Audio Output Routes

You can subscribe to the onCallAudioStateChanged or onCallEndpointChanged delegate methods depending on your API level to observe changes in the audio output:

// Android API 34 and above
override fun onCallEndpointChanged(callEndpoint: CallEndpoint) {
        state ?: return
        println("New Callendpoint ${callEndpoint}")
}

// Android API 33 and below

override fun onCallAudioStateChanged(state: CallAudioState?) {
        state ?: return
        println("is curent audio state route ${state.route == ROUTE_BLUETOOTH}")
}

iOS

To enable seamless audio output switching within your iOS application, you'll want to integrate CallKit. This allows the respective operating systems to handle audio output routing via the default calling UI users will be familiar with.

iOS CallKit Resources:

• Voice Reference App using CallKit - GitHub

• How To Handle VoIP Push Notifications using iOS Callkit - Blog

• Make Outbound Calls Using iOS CallKit - Blog

Getting Audio Output Routes

let outputs = AVAudioSession.sharedInstance().currentRoute.outputs

Detecting Changes in Audio Output Routes

You can subscribe to the AVAudioSession.routeChangeNotification notification to observe changes in the audio output:

// myRouteChangeHandler is a function you need to create

NotificationCenter.default.addObserver(self, selector: #selector(myRouteChangeHandler), name: AVAudioSession.routeChangeNotification, object: nil)

Changing Audio Output Routes

You can override the audio output to the speaker:

AVAudioSession.sharedInstance().overrideOutputAudioPort(.speaker)

More information is available on the Apple Documentation.

JavaScript (Desktop)

There is no support for audio output routing in mobile browsers, so the below JavaScript examples are only applicable to desktop browsers. There is a proposal to add support to the Web API.

Getting Audio Output Routes

Before attempting to change audio output routes, you should check which routes are available to you:

const audioOutputDevices = await navigator.mediaDevices.enumerateDevices().then(devices => devices.filter(d => d.kind == "audiooutput"));

Changing Audio Output Routes

When a call is created, the Vonage Client SDK will create an HTMLAudioElement and attach the output stream of the call to it's srcObject. You can access the audio element with the following:

const audioOutputElement = client.getAudioOutputElement();

The HTMLAudioElement has a method called setSinkId which will take the deviceId and use that to set the desired Audio Output Device to the HTMLAudioElement source:

audioElement.setSinkId(audioOutputDevices[2].deviceId);

Reference

• Client SDK Reference - iOS
• Client SDK Reference - Android
• Client SDK Reference - JavaScript