Developed an OTT Live Streaming Progressive Web App for a US-based Telecom Company [Case Study]

OTT has revolutionized how content is delivered to consumers, bypassing traditional cable and satellite providers. With a subscription to the specific platform, viewers can now access content directly via the internet on various devices. As viewers shift toward on-demand and live content across devices, businesses face challenges like low latency, lack of automation, poor user experience, and high customer churn. These hurdles highlight the urgent need for cutting-edge OTT platforms that cater to viewer needs with enhanced personalized recommendations.

To assist our client with a scalable multiscreen streaming platform offering a personalized viewing experience, we developed and implemented an OTT live streaming platform with a customized viewing experience based on audience profiling and analytics.

Explore how we helped our client with the development of a scalable progressive web app for live streaming, providing an omnichannel experience across devices.

A prominent US-based telecom company was on the lookout for a development partner to develop an OTT live streaming PWA for capturing and distributing live content globally. The client also required automated insertion of ad bumpers before transmission to the global audience.

We took the baton and proposed the development of OTT Live Streaming PWA with Angular 11. With an initial release, we focused on encompassing standard features and delivered the app by seamlessly integrating features, creating a dynamic all-in-one entertainment app.

• Manual Intervention: The existing system required operator intervention, which resulted in a 1–2-minute turnaround time from content availability to user access.
• Low latency: The manual process of getting the stream, adding bumpers, and pushing it to mobile streaming caused significant delays.
• Constraint and Restraints Scalability: Inserting bumpers and managing live streams were manual processes, limiting efficiency and scalability.
• Absence of Ad Markers: The source HLS stream lacked SCTE-35 ad markers, making it difficult to monetize content effectively.

With our practice proven expertise in OTT Mobile App Development we helped our client build PWA for live streaming and high-quality content delivery. We implemented and delivered the complete platform adopting a build-measure-learn feedback loop.

We seamlessly utilized full-stack development expertise to integrate a comprehensive array of backend and frontend technologies for building a cohesive and scalable solution. For the front end, the application was built using Angular version 11 to harness its powerful features for building complex and responsive user interfaces within SPA architecture.

For the backend, our development team implemented Node.js. This was complemented by npm (Node Package Manager) version 6.4.1 for managing dependencies. The Express framework, specifically version 4.x, was used to build the server-side application and create a RESTful API to handle API requests. The team opted for DynamoDB for fast and predictable performance with seamless scalability for data storage.

By integrating Angular with web platform technologies, we implemented features such as offline functionality, push notifications, and adding the app to the home screen, providing a more native app-like experience while still being accessible through a web browser.

Key Components of The Solution

Web & Mobile App Functionalities

To fulfill the client’s requirements, we implemented specific functionalities in the web & mobile app, such as options for viewers to watch the live video in slow motion and zoom the streaming content as needed, and a feature to capture stills (snapshots) from the live stream directly on the user’s device. These features significantly helped enhance the overall viewing experience for customers.

Admin and Customer Portals

To provide efficient content management and administration, we developed two distinct interfaces using SPA (Single Page Application) architecture.

• The admin portal caters to product owners and administrators, providing tools for administrative activities such as user management, managing advertisers and brands, ad bumper management, and bumper statistical analysis.
• The consumer portal serves viewers, offering a feature-rich mobile application for viewing live streams.

Automatic Live HLS Stream Capture

The solution was designed to automatically capture and process live HLS streams directly from the communication satellite. This eliminated the need for manual intervention and ensured real-time content availability.

Automated Bumper Ads Insertion

A key requirement was the ability to seamlessly insert bumpers into the live stream based on preset rules. Our solution implemented a dynamic system harnessing AWS Media Services, that analyzed the live stream content and inserted pre-defined bumpers at the appropriate moments, enhancing the viewer experience. This setup allowed for efficient handling of the live stream, from capture to delivery, with minimal delay.

Low Latency

The solution was optimized to minimize latency between capturing and delivering the live HLS stream to mobile viewers. We harnessed AWS CloudFront as a content delivery network to ensure fast and reliable distribution of media content. This ensured a smooth and uninterrupted viewing experience.

SCTE-35 Ad Marker Insertion

Our solution incorporated the capability to automate SCTE-35 ad marker insertion into the live stream by employing AWS Lambda functions for efficient and scalable processing. This enabled the placement of targeted ads for potential revenue-generation opportunities.

• 50% increase in content delivery through automation
• 30% reduction in operational costs
• 25% increase in viewer experience with minimal delay and high-quality streams
• 40% faster-time-to-market with automated workflows

A leading US-based telecom company

Front End: Angular 11 & PWA

Back End: Node.js 10.15.3, npm 6.4.1, express 4x, Dynamo DB, AWS Media Services (MediaLive, MediaPackage, MediaTailor), AWS Cloudfront, AWS Lambda