Audio Challenges in React Native iOS Calls: Troubleshooting and Solutions

When you’re building a calling feature in your React Native app with the QuickBlox SDK, you might run into audio problems on iOS. This article explores the complexities of managing audio sessions on iOS and offers solutions to tackle these issues.

The QuickBlox React Native SDK is equipped with functions for establishing both audio and video communication. However, integrating additional audio signals, such as ringtones, to enhance the user’s understanding of the connection process requires implementation within the application’s codebase. While the use of VoIP notifications and Apple’s CallKit feature is not essential, it offers a great option for providing significant enhancements. These functionalities enable in-app calling during idle periods, allow call interaction directly from the locked screen, and provide a distinctive ringtone for incoming calls, among other benefits.

Adding these functionalities often involves the use of third-party libraries, and the QuickBlox WebRTC sample application is no exception. This means configuring multiple libraries to utilize the shared audio session, a unique feature of iOS. Failing to release the audio session promptly can lead to conflicts between libraries, resulting in sound-related issues.

QuickBlox React Native SDK 0.9.8 introduced enhancements to the call lifecycle event queue and audio session settings to enhance compatibility with other libraries. Despite these improvements, there’s still a chance of conflicts within the app’s code. It’s advisable to carefully manage the sequence of acquiring and releasing the audio session. For instance, managing ringtones can help prevent conflicts with audio.

Ringback Tones (tones heard by the operator while waiting for call confirmation or rejection):

– Start playing such a ringback tone after calling the QB.webrtc.call(callParams) method in the SDK.
– Stop playing the tone in the following cases:
– When the opponent accepts the call (event QB.webrtc.EVENT_TYPE.ACCEPT).
– When the opponent rejects the call (event QB.webrtc.EVENT_TYPE.REJECT).
– When the opponent does not answer (event QB.webrtc.EVENT_TYPE.NOT_ANSWER).
– When the initiator prematurely ends the call (before calling the QB.webrtc.hangUp() method).

Ringtone (audible signal heard during an incoming call):

– Start playing such a ringtone after receiving the call signal (event QB.webrtc.EVENT_TYPE.CALL).
– Stop playing the tone in the following cases:
– When the call is accepted (before calling QB.webrtc.accept({ sessionId: session.id })).
– When the call is rejected (before calling QB.webrtc.reject({ sessionId: session.id })).
– When the call is not accepted within a limited time (event QB.webrtc.EVENT_TYPE.NOT_ANSWER).
– When the opponent cancels the call (event QB.webrtc.EVENT_TYPE.HANG_UP).

Wrapping Up
We hope these suggestions help you avoid audio issues when building your iOS app.
Please note that we have made several changes to our sample app, which now align with the specifications described above.
QuickBlox React Native WebRTC Sample version 1.1.1 is available at: https://github.com/QuickBlox/quickblox-react-native-samples
Release notes can be found in the package repository: https://github.com/QuickBlox/quickblox-react-native-samples/releases/tag/webrtc-sample-v1.1.1

To find more support, share ideas, or learn about latest releases and updates join the QuickBlox Developer Discord Community!