Requirement
Client wants a Video Streaming TV App which can target multiple platforms like AndroidTV and Amazon Fire Stick at the same time.
Solution
React-Native platform was selected to develop this application. Initially I went through the documentation of React-Native and explored all the TV Platform’s exclusive components, features and limitations. Building applications for all the required platforms such as AndroidTV and Amazon Fire Stick was a great challenge.
We used Python based web services for backend. For implementation, I used the power of Axios, a JS Promise based HTTP client and write wrapper classes and methods to centralize the core of all requests, which ultimately helped me in monitoring and optimizing all requests at one place.
Application’s entry point a Launch Screen, which leads to App Login. Challenge here was to safely let the user enter his access code but React-Native doesn’t handle Input Field and On Screen Keyboard at the same time. So I had to create a custom UI component, with allowed both controls work parallel.
Vital part of application was the screen after logging-in, which is based on:
- Ad Slider
- News Slider
- Video Player
Ad Slider simply was a switch between Ads. While News Slider was loaded with news from Yahoo API and its presentation part was done using a plugin react-native-marquee-ab. For video play, I selected plugin react-native-video which was React-Native community recommended option. Right according to requirements, it supported multiple video formats with subtitles but unfortunately it doesn’t support playlist feature and for that I had to build custom video play sequence, which not only switch forward or backward videos but also send video status reports via API at each video end.
Biggest challenges faced during development was to keep it alive and playing video for at-least 12hrs or more. To keep it awake, I had implemented plugin react-native-keep-awake, which kept application active for endless hours.
Video player works fine in usual case but playing it for longer period ended up with following issues:
- Video freezes at start or during video play
- Player kept buffering video and never endsPlayer starts to
- through silly errors, like Unrecognized Video Format for those videos which works fine on replay
To fix all of them, I go thorough Video Player’s documentation and issue tickets several times but found no solution. Many people were experiencing the same issue but there was no appropriate solution. With extensive debugging and logging in Native code, I find out that React-Native Video Player is using ExoPlayer at backend and even being the latest one, it had several issues of its own. Also there was a Memory Leak which was greatly effecting the performance. Solution I implemented was that, on Playlist-end, application restarts itself, which ends the thread and starts a new one to free the Memory and UI-Resources. If video still Freezes, it skips to next video after waiting for specified time.
Debugging and logging was implemented to keep track of issues and any unexpected happenings. Rollbar, third-party error tracking service was used to keep eye on issues even in Production mode. With Rollbar’s RN SDK and Real-time monitoring web dashboard helped a lot. To capture unhandled exceptions at global level, react-native-exception-handler was used. Further I made Application Release builds for each Target Platform respectively. Had to made custom changes in Platform’s Native Code to apply fixes and achieve certain targeted functionalities.
Conclusion
Faced many challenges but with extensive R&D, community help and trials, I was able to overcome the problems and successfully build the TV App that runs on multiple platforms as desired by client.
