(858) 586 7777 | About | Testimonials | Contact
vteams vteams vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
vteams vteams
  • How does it work?
    • Startup Process
    • Your First Day
  • Technologies
    • Hire PHP Developer
    • Hire App Developer
    • Hire JavaScript Developer
    • Hire ROR Developer
    • Hire IOS Developer
    • Hire .NET Developer
    • Hire AI Developer
    • Hire Robotics Engineer
  • Sample Budgets
  • Meet The Team
  • Experiments
  • Captain’s Log
  • Blog
Blog
  1. vteams
  2. Blog
  3. A Video Streaming app which targets multiple TV platforms
Jan 22
A-Video-Streaming-app-which-targets-multiple-TV-platforms

A Video Streaming app which targets multiple TV platforms

  • January 22, 2020

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.

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail

Comments are closed.

SEARCH BLOG

Categories

  • Blog (470)
  • Captain's Log (1)
  • Closure Reports (45)
  • Experiments (7)
  • How-To (55)
  • Implementation Notes (148)
  • Learn More (137)
  • LMS (8)
  • Look Inside (9)
  • Operations Log (12)
  • Programmer Notes (20)
  • R&D (14)
  • Rescue Log (4)
  • Testimonials (25)
  • Uncategorized (4)

RECENT STORIES

  • Top Interview Questions to ask a Data Scientist
  • Kotlin Language – A New Hope for Android Developers
  • 5 Reasons Why JavaScript is the Best For Your MVP
  • React JS – The Undisputed King of Frameworks in Market
  • Top 5 PHP Frameworks in 2021

ARCHIVES

In Short

With the vteams model, you bypass the middleman and hire your own offshore engineers - they work exclusively for you. You pay a reasonable monthly wage and get the job done without hassles, re-negotiations, feature counts or budget overruns.

Goals for 2020

  • Open development center in Australia
  • Complete and Launch the Robot
  • Structural changes to better address Clients' needs

Contact Us

Address: NEXTWERK INC.
6790 Embarcadero Ln, Ste 100,
Carlsbad, CA 92011, USA

Tel: (858) 586 7777
Email: fahad@nextwerk.com
Web: www.vteams.com

© 2020 vteams. All Rights Reserved.

Content Protection by DMCA.com