Custom Amazon IVS Module for React Native Live Video Streaming App
Recently, we’ve successfully launched Confetti: web and mobile platforms used to live stream wedding ceremonies. The most challenging part of this project was custom development of a module that would enable real-time Full-HD video streaming with a mobile app.
In this case study you’ll learn how we adjusted Amazon interactive video service (IVS) to work with a React Native application. You will also find the description of our custom integration solution: a React Native wrapper for both iOS and Android Amazon IVS broadcast SDKs. It’s open source, and you are welcome to check it out in Apiko GitHub repository.
Find the best tech solution for your project!
Confetti background
Started as a tool mostly for news and TV shows broadcasting, live video streaming has turned into a widely used functionality that often lets people feel closer to each other, making their online experience more like in-person communication.
Our client chose cross-platform mobile app development to reach their goal: get a digital solution for flawless real-time video streaming from wedding ceremonies. They aimed to provide a splendid experience of sharing the atmosphere of love and happiness with those who were not able to visit the very special occasion in person.
The project consisted of
- a web application, covering
- admin functionality
- guest tables and chats configuration
- payment system integration, and more.
- and a React Native mobile video streaming app.
The main app requirements
When it comes to once-in-a-lifetime moments, there’s no place for technical disruptions. Besides the emphasis on reliability combined with simple and smooth user experience, we defined the following app requirements:
- Stability of video and audio broadcasting
- Full HD real-time video streaming
- Real-time audio streaming
- Landscape orientation support
- Ability to steam video either from back or front camera
- Automatically start the broadcast after Internet connection resumes.
Proof of concept
There were numerous tools for live video delivery, video processing and playback. So, we carried out proof of concept to come up with the most suitable and feasible tech solution able to meet all the above-mentioned requirements at minimum cost.
It turned out that it was hard to find React Native open-source real-time video streaming solutions with proper documentation and support.
Amazon-ivs-react-native-player allowed viewing (but not streaming) the videos using Amazon IVS service. Sadly, there was no similar AWS package for React Native video streaming available.
Before deciding upon custom module development, we used react-native-nodemediaclient package. However, we had to deal with its multiple drawbacks:
- Poor documentation
- The module was no longer supported and evolved by the developers
- Problems with the configuration of the latest package releases as they didn’t allow Full HD video streaming. We needed to roll back by three package versions to fix this issue.
- The final drop was when the module stopped functioning with the iOS 15 release, which made it necessary to look for a new solution.
Eventually, our attention was drawn to Amazon interactive video service. IVS broadcast SDK allows real-time video streaming with a mobile phone. It sends the captured video to Amazon IVS which takes care of its broadcasting to the selected audience.
Possibility to use Amazon architecture to live stream wedding ceremonies with low latency was a perfect match to implement guest interactions and all other app features required. However, there were only Android and iOS broadcast SDKs. No SDK for a React Native app was available.
React Native wrapper as a tech solution
To reach our client’s goal, we needed to enable real-time video streaming within a mobile app written with React Native using Amazon IVS. Our task was to set up “communication” between the mobile IVS broadcast SDKs available and the React Native application.
Custom development of a React Native wrapper for the native mobile packages provided by Amazon was a tech solution we came up with.
The key challenges we had to overcome were the following:
- Learn how to build native modules and components for React Native
- Acquire basic knowledge of Java and Swift programming languages
- Study the documentation for Android and iOS broadcast SDKs to get a full understanding of the way they work and the API they provide
- Come up with the architecture and API for the module, since we did not need the complete functionality provided by Android and iOS Broadcast SDKs.
Custom Amazon IVS broadcast module features
To keep the user flow as simple as possible, we limited the client’s interactions with the mobile app to minimum necessary functionality. To record and stream a Full HD video in real time with their phone, one can do the following:
- Start real-time video streaming
- Stop real-time video streaming
- Switch the mobile phone cameras the video is being captured with from the back one to the front one or vice versa
- Switch the video orientation from landscape (horizontal) to portrait (vertical) or vice versa.
All the broadcasting happens under the hood without direct end-user participation.
We have also ensured that the streaming session renews automatically after it’s been interrupted, e.g. by an incoming call or poor network quality.
React Native video streaming module settings
There is a default predefined video and audio configuration which is optimal for most broadcast sessions. It prevents the app users from misconfiguring the settings which could affect the overall stream quality. The key parameters include
- frame dimensions: width and height of a frame
- bitrate: the number of bits processed per second
- frame rate: the number of frames shown per second
- channels: the number of channels of the output audio stream
- quality: a parameter, introduced to control the audio encoder quality. Reducing the audio encoder quality can significantly decrease the CPU usage.
AutoBitrateProfile parameter was introduced to control bitrate behavior when congestion times occur due to bad network health.
By default, it’s set to a conservative mode: the bitrate is ramped up moderately when the network health is good, but is dropped fast once it gets bad. This results in slow recovery after congestion, but the bitrate will be more stable.
In fast increase mode the bitrate grows quickly when the network health is good, and drops fast when the network health is bad. This allows recovering to the maximum values after congestion within a short period of time. However, congestion may be detected more frequently as a result of probing above the available bandwidth.
If necessary, it is possible to request the parameters customization sometime before the stream. We wanted to make sure that all technical details are figured out before the wedding day, and not a single moment gets skipped because of them.
Post-release app quality improvements
Some quality enhancements were implemented to provide exceptional user experience. The improved stability for high-bitrate streams reduced the occurrences of rare crashes.
We’ve also introduced the threshold latency value to terminate the broadcasts with extremely high latency. Currently it is preset to 45 seconds, but it may be changed in the future. Once the latency exceeds this time interval, the stream is ended, and a user gets a notification with suggestions to check their network quality or reduce the broadcast bitrate. After doing so, they will be able to resume watching the broadcast in real time.
Summary
The developed custom live video streaming module allowed us to benefit from Amazon IVS functionality when having a React Native application. With numerous weddings streamed, Confetti clients share the joy of being a part of the event regardless of the distance.
The module is open-source and it will certainly remain supported in the future. It’s a valuable solution for those who need to implement real-time video streaming for cross-platform mobile app development, in particular with React Native.