Introduction
As the Vonage Video React Native SDK marks another year of transforming real-time communication on mobile platforms, it’s an ideal time to reflect on the incredible advancements and improved official support that have been introduced. The SDK has become an essential tool for developers aiming to build high-quality, interactive video experiences on iOS and Android.
In this blog, we’ll explore some of the features added last year to the Vonage Video React Native SDK and enhanced official support. These resources will help you seamlessly integrate these advanced functionalities into your applications.
1. Noise Suppresssion
Noise suppression improves the quality of video and audio calls by reducing background noise during communication.
Vonage Video iOS React Native version 2.28.1 added support for Noise Suppression.
The new OTPublisher.setAudioTransformers()
method lets you set (and clear) audio transformers. One transformer, the noise suppression filter, is supported. To use this, call the setAudioTransformers()
method of the OTPublisher ref
, and pass in an array with one object that has a name property set to 'NoiseSuppression' and a properties property set to an empty string.
Important: To use this method, you must add the Vonage Media Transformer library to your project, separately from the OpenTok React Native SDK. See Vonage Media Library integration.
2. Single Peer Connection
With single peer connection enabled, all subscriber streams for a client are delivered with a single connection to the Media Router (even if they are published by different clients).
Vonage Video React Native version 2.27.3 added support for enabling single peer connection for the client by setting the enableSinglePeerConnection
property of the options
prop of the OTSession
component to true
. For more information, see this documentation.
3. Addition of Privacy Manifest
Vonage Video iOS SDK version 2.27.3 added a privacy manifest required by Apple's App Store. This manifest is a new requirement from Apple for apps that collect and manage user data, ensuring they comply with privacy guidelines and provide transparency about data usage.
If you plan to update or submit an app to the App Store, you will need to incorporate this updated SDK to meet Apple’s current requirements. The privacy manifest helps in declaring what user data is being collected, why it’s collected, and how it’s handled, which aligns with Apple’s privacy policy rules.
4. Background Blur and Replacement
Background Blur and Replacement allows users to blur their surroundings or replace their background with a virtual image. This feature enhances privacy and professionalism in video calls by minimizing distractions and providing a polished visual experience.
Vonage Video React-native version 2.27.0 added support for the background blur and replacement. OTPublisher.setVideoTransformers()
method enables you to set and clear video transformers, such as background blur. Additionally, the OTPublisher.setVideoTransformer()
method now supports both background image replacement and custom radius options for background blur on Android and iOS. For more details, refer to the OTPublisher documentation.
5. Audio Fallback
Use the audio fallback API to dynamically prioritize audio in response to network quality. Audio fallback keeps your calls running for all participants, regardless of connection issues or poor network conditions, by temporarily disabling video for the affected participant.
Vonage Video React-native version 2.27.0 added a new OTPublisher audioFallback
option, which supports both subscriber and publisher audio fallback. The audioFallback.subscriber
property replaces the OTPublisher
audioFallbackEnabled
option, which is deprecated. The OTPublisher
component has new callback functions for publisher audio fallback-related events: videoDisabled()
, videoEnabled()
, videoDisableWarning()
, and videoDisableWarningLifted()
. See the audio fallbackguide.
6. Toggle Between a Screen and Camera Video Source
Switching between a screen and a camera video source allows users to easily alternate between sharing their screen and displaying their camera feed during a video call. This feature facilitates seamless transitions, enabling users to present content or engage directly with participants as needed. To toggle between a screen and camera video source using the Vonage Video React Native SDK, you can use the following approach:
Capture the Camera Feed: Start by capturing the camera feed using the SDK's camera-related methods.
Capture the Screen: Use the SDK's screen-sharing functionality.
Toggle Between Sources: Implement a mechanism in your app to switch between these two sources based on user input.
Vonage Video React native 2.27.3 fixed the issue of toggling between a screen and a camera video source for the publisher, causing apps to crash in iOS.
7. End-to-end Encryption
End-to-end Encryption ensures that all video and audio streams are securely encrypted from the sender to the receiver. This is critical for applications that handle sensitive information and need to maintain the highest level of privacy and security.
Vonage Video React-native version 2.27.0 added support for end-to-end encryption. The OTSession
component includes a new encryptionSecret
prop, which you can use to set and change the encryption secret used by the local client.
8. Adaptive Media Routing Codec for Audio Relay to Routed
The AMR Codec enhances audio quality for routed sessions, particularly in low-bitrate conditions. This codec ensures clear and reliable voice communication, even in challenging network environments.
Vonage Video React-native version 2.27.0 added support for adaptive media routing.
9. VP8, H.264 Codec Support and VP9 Codec Support
The SDK supports the H.264 codec, renowned for its efficient video compression and high-quality output. This codec is widely supported and ensures video streams are delivered with minimal bandwidth usage.
Alongside H.264, the VP8 codec is also supported. VP8 is an open and royalty-free codec that offers excellent performance and is a viable alternative for developers seeking a free and efficient compression option.
Vonage Video React-native version 2.27.0 added support for the VP9 codec in relayed sessions. For more information, see the video codecsdocumentation.
10. IP Proxy Support
IP Proxy Support enables developers to route media traffic through specific proxy servers. This is useful for applications operating in restricted network environments or requiring specific routing configurations.
Vonage Video React-native version 2.26.1 version fixed an issue in which applications could not connect to a session when the proxyUrl option for OTSession was set (issue #645).
11. Publish Full HD (1920x1080) Video Support
The SDK now supports Full HD (1920x1080) video publishing, ensuring users benefit from high-definition video quality. This is crucial for applications requiring detailed visuals, such as telemedicine consultations or high-stakes video conferences.
See "1920x1080" option for OTPublisher resolution (for FHD video support).
12. Live Captions
Live Captions automatically generates captions for spoken content during video sessions. This feature improves accessibility for users with hearing impairments and enhances comprehension for all participants. Vonage Video React-native version 2.26.1 included Live Captions API enhancements (issue #643).
The new
OTPublisher.publishCaptions
option lets you enable and disable captions for a published stream (if captions are enabled for the session). For more info, see the docs: OTPublisher.The new
OTSubscriber.subscribeToCaptions
option lets you turn captions on and off for a subscriber (if captions are enabled for the session and the publisher publishes captions). For more info, see the docs: OTSubscriber.The new
OTSubscriber captionReceived
event is dispatched when a subscriber receives a caption. For more info, see the docs: OTSubscriber.For more information, see the Live Captions developer guide.
Improved Official Support
The anniversary of Vonage Video React Native SDK official support represents more than just a milestone—it’s a celebration of how far the technology has come and a look forward to even greater possibilities. With the addition of powerful new features like single peer connection, noise suppression, audio fallback, background blur/replace, and end-to-end encryption, Vonage continues to lead the way in real-time video communication.
For more information on these features and how to implement them, visit theVonage Video React Native SDK Overview page. Here, you’ll find all the resources you need to leverage the SDK’s capabilities and create exceptional real-time video experiences.
As developers leverage these enhanced capabilities and benefit from improved support, we can expect to see even more innovative, high-quality video experiences across mobile applications in the coming years.
Looking to Get Started with the React Native SDK?
Check out theofficial documentation, where you can find everything you need, from installation guides to sample applications. We also have several sample applications found in the React Native Samples repo. You can also find the react native package on npm and the SDK source code within the SDKs GitHub repository.
Further Reading
Developer documentation: OpenTok React Native& React Native SDK
Related Blogs
Kapil, Senior Product Manager at Vonage, crafts innovative communication solutions that empower developers and businesses to integrate video functionality. Passionate about real-time collaboration through scalable APIs, he advances Vonage’s video strategy. Outside work, he enjoys trekking and adventure sports, embracing challenges on and off the trail.