Overview
In-house live HLS web player for Graham Media station sites, replacing Bitmovin.
@grahamdigital/livestream-player is the in-house live video player Graham Media is
building to replace Bitmovin: a React component (plus supporting modules) that
orchestrates an open-source playback engine, the Google IMA ad SDKs, and ad-break
signaling. It is motivated primarily by cost and control; the scope is to match
the production paths we ship today, not full Bitmovin parity.
Status
Feature-complete for the initial scope. The player ships:
- Live HLS playback at the live edge via Shaka Player, used headless behind an Engine port
- DAI server-side ad breaks via Google IMA DAI, with an "Ad" + countdown overlay and locked controls during breaks (failing open to content on any ad error)
- CSAI pre-roll via the Google IMA HTML5 SDK
- A full control bar, captions (WebVTT + CEA-608), watermark and link overlays, and a sticky mini-player
- Resilience: retry → silent reload → branded slate, with operational telemetry
- SSR-safety, validated end-to-end by the demo (the whole site is server-rendered)
Language
The project uses a small, precise vocabulary. The two most load-bearing terms:
- Player — the in-house application we are building: the React component plus its ad and UI logic. It does not mean the underlying playback library.
- Engine — the third-party open-source playback library (Shaka Player, used headless) that the Player wraps. It owns MSE/EME, ABR, and HLS manifest parsing.
On the ad side:
- DAI — this project's server-side ad insertion. Always Google IMA DAI, full-service, live, identified by an asset key; ad pods are stitched into the HLS stream and SCTE-35 is resolved by Google server-side. The primary ad mode.
- CSAI — client-side ad insertion via the Google IMA HTML5 SDK. Used only for pre-roll, and only on some livestreams.
- Ad break — an ad pod stitched into the live stream server-side by DAI. Distinct from a pre-roll.
Where to go next
- Getting started — install and render your first stream
- Arc PageBuilder migration — audited Bitmovin replacement plan, compatibility adapter, launch gates, and verification matrix
- The event contract — the normalized events analytics bind to
- Ads — DAI ad breaks, CSAI pre-roll, targeting and consent
- Architecture — the ports, the seam, and the ADRs
- Demo — every feature, live in the browser