Multi-screen streaming apps running on a laptop, tablet and phone

Multi-Screen Streaming Apps and Hybrid App Frameworks

Industry
Media & Entertainment, Software Products, Telecommunications
Technologies
Android, iOS, Frontend (JS, HTML, CSS), Backbone.js, HTML5

Summary

We build multi-screen streaming applications and the hybrid frameworks behind them. A TV-everywhere application plays live channels and on-demand content across phones, tablets, connected televisions, set-top boxes, gaming consoles and browsers, under the branding of whichever operator or broadcaster distributes it. It authenticates the viewer, checks entitlement against a subscription or a pay-per-view purchase, presents an accurate programme guide, acquires a licence for protected content, starts playback quickly, holds quality steady across changing networks, and reports what happened back to analytics and billing.

The Challenge

Television platforms are where assumptions break. Memory limits on older smart televisions punish large JavaScript bundles and uncached images, input is a directional pad rather than a pointer so focus management must be explicit, and console browsers lag behind mobile in standards support. Each content protection system carries its own licence acquisition flow and its own device support matrix, so a feature that works on mobile can fail on one television family for reasons invisible in the interface.

The recurring defects follow from that. Event listeners leak across view transitions. Focus is lost after asynchronous list updates. Licences are not renewed during long live sessions. Discontinuities at ad insertion boundaries in live manifests are mishandled. And there is no clean recovery when a network switch invalidates the in-flight segment request. Distribution adds a second pressure: an application serving several broadcasters cannot require a store submission every time one of them wants different branding or a new section.

The Solution

Subsystem Boundaries

The application splits into a small number of stable subsystems: identity and entitlement, catalogue and guide data, playback, purchase and subscription, and a presentation layer that varies per operator. Catalogue and schedule feeds are normalised into a single model covering channels, programmes, series, seasons, assets, images and rights windows, so availability is modelled explicitly in the data rather than filtered in the application.

Playback and Content Protection

Streaming uses adaptive bitrate delivery over HLS or MPEG-DASH with content protection through Widevine, PlayReady or FairPlay. The player abstraction stays deliberately narrow, so swapping a media engine does not ripple through the codebase, and licence renewal during long live sessions is treated as a first-class path rather than an edge case.

Hybrid Framework and Platform Abstraction

A hybrid framework built on HTML5 with a structured JavaScript layer allows a large share of the interface and business logic to be shared across platforms, wrapped in native shells that provide the player, content protection bindings, background audio, casting and store billing. That split is the defining design decision: anything touching media pipelines or platform payment stays native, everything else stays portable. It is worth deciding early how much of the interface genuinely needs sharing, because a framework that abstracts away every platform difference becomes harder to maintain than the differences it hides.

Remote Configuration and Theming

  • Theming, feature flags, menu structure, endpoints and merchandising are delivered as remote configuration rather than compiled into the binary.
  • Configuration schemas are strictly versioned, with a safe fallback bundle when the network is unavailable.
  • Remote content can never grant capabilities the shipped binary does not already contain.
  • Feature work ships behind flags so an operator rollout can be staged and reversed.

Testing and Telemetry

Each target device is treated as a first-class test environment rather than an afterthought: a real device lab, automated smoke tests covering startup, playback, seek, licence renewal and purchase, and playback quality telemetry covering startup time, rebuffering events, bitrate distribution and error codes broken down by device model. Errors carry enough context to identify device, stream and licence server from a single report. Accessibility belongs in the same pass rather than a later one, covering captions, audio description tracks, focus order and screen reader labelling.

What This Delivers

Viewers get a consistent, branded experience wherever they watch, with playback that starts quickly and holds up when the network changes. Operators can rebrand, add a section, or enable subscription video on demand and rental without waiting on a store submission, and the native shell only needs republishing when platform APIs change. Engineering keeps one shared core instead of parallel rewrites, and quality problems become visible per device model rather than as anonymous complaints.

Technologies and Tools

HTML5 with a structured JavaScript layer, historically Backbone with RequireJS and Underscore, inside native Android and iOS shells; HLS and MPEG-DASH adaptive streaming; Widevine, PlayReady and FairPlay content protection; casting and platform store billing; and device-lab automation with playback quality telemetry.