Building Custom Module for Real-Time Video Streaming: A React Native Wrapper for the Amazon IVS iOS and Android broadcast SDKs
Recently, a video streaming module for React Native has been developed by Andrii Shapovalov, a software engineer at Apiko, to enable high-quality event broadcasting in real time. The module is based on Amazon IVS iOS and Android broadcast SDKs and the open-source code is now available at Apiko's repository on GitHub.
Story
The Amazon IVS React Native broadcast module was written to meet the specific requirements for a wedding live streaming project. Our client turned to Apiko to build web and mobile video streaming platforms with additional features such as guest tables, chats, and online payments to make each wedding ceremony an exceptional experience for online viewers.
To determine the best cost-effective solution for video streaming that would satisfy all the project’s requirements, we performed a proof of concept. Though there are many services available that handle the video processing, delivery, and playback to viewers in real time, it was challenging to find a service that would enable video recording and streaming from mobile using a React Native application.
We’ve tried a few different open-source solutions, but they turned out to be poorly supported and badly documented and didn’t provide the needed video playback. In the end, we decided on the Amazon Interactive Video Services (IVS), which at that time launched free native SDKs that could be adapted to communicate with our React Native app.
What was done?
Our goal was to create a React Native wrapper for the Amazon IVS iOS and Android broadcast SDKs to connect our React Native app with native modules developed by Amazon.
With a custom solution, we solved the main challenges of React Native application video streaming and achieved the following:
- Full HD streaming
- High screen refresh rate (the frequency that a display updates the onscreen image that results in a smoother experience for viewers)
- Elimination of audio problems
- Ensuring the automatic renewal of video streaming even when there is an incoming call or internet connection is broken
Amazon IVS React Native broadcast module functionality
Amazon native SDKs are designed to leverage the Amazon IVS architecture and cover essential functionality related to streaming video in real-time. By adapting the Amazon IVS iOS and Android broadcast SDKs for React Native, we designed a video streaming module that enables:
- Setting video config: A configuration object describing the desired format of the final output Video stream.
- Setting audio config: A configuration object describing the desired format of the final output Audio stream.
- Setting level of logging: Logging level for the broadcast session.
- Setting camera preview aspect mode: Determines what aspect ratio for a view will be used.
- Setting camera preview mirror: Flips the camera preview horizontally.
- Setting camera position: Either back or front initial active camera.
- Swapping active camera: Swap back camera to front camera and vice versa.
Additionally, the module provides a bunch of event handlers such as:
- audio stats event - periodically measures amplitude levels in digital systems;
- quality changed event - represents the quality of the stream;
- broadcast state changed event - indicates that the broadcast state changed;
- network health changed event - provides updates when the quality of the network changes.
Though Apiko’s custom module enables the essential features of real-time video streaming, its functionality can be expanded. We will keep supporting and improving this open-source solution to meet the needs of users.
Who can benefit from our custom video streaming module for React Native?
The solution will be highly valuable and strategic for everyone whose goal is to realize video streaming in real time for their React Native app development.