Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/CeeblueTV/wrts-client/llms.txt

Use this file to discover all available pages before exploring further.

The Ceeblue WebRTS Client (@ceeblue/wrts-client) is a TypeScript/JavaScript library that lets you embed live, low-latency video streams into any web page using a standard HTML <video> element. It is the client-side counterpart to Ceeblue Cloud’s WebRTS ingest and delivery infrastructure, and is designed for Ceeblue Cloud customers who want to build their own web video players rather than relying on an embedded player widget.

​
What is WebRTS?

Web Real-Time Streaming (WebRTS) is a transport-agnostic framework designed to deliver live video over the web with minimal latency. Unlike WebRTC — which uses a peer-to-peer signalling model that makes CDN caching difficult — WebRTS is built around HTTP/2 as its primary transport. HTTP/2 multiplexing allows segments to be delivered over a single persistent connection while remaining fully compatible with standard CDN infrastructure, reverse proxies, and browser security policies.
WebRTS is not a replacement for HLS or DASH for video-on-demand. It is optimised specifically for live streams where latency and stall-resilience are the primary concerns. HLS/DASH readers are not compatible with a WebRTS endpoint.
Where traditional adaptive streaming protocols (HLS, DASH) chunk content into multi-second segments that introduce 5–30 seconds of end-to-end latency, WebRTS streams data continuously over a persistent HTTP/2 connection, targeting sub-second glass-to-glass latency under good network conditions. The library handles all the complexity of receiving, parsing, and feeding that stream into the browser’s native Media Source Extensions (MSE) API, so your application only needs to manage a <video> element.

​
Key capabilities

Low-latency live playback

HTTP/2-based streaming targets sub-second latency. The player continuously monitors its buffer and adjusts playbackRate to stay at the live edge without stalling.

Adaptive bitrate (ABR)

HTTPAdaptiveSource implements automatic multi-bitrate selection. The player picks the best video rendition based on available bandwidth and screen resolution, and switches seamlessly mid-stream.

Adaptive frame skipping

When the network degrades and the buffer runs empty, the player can skip audio and video frames to recover quickly to the live edge rather than pausing. Frame skipping can be enabled or disabled per use case.

DRM via EME

Encrypted streams are played back through the browser’s Encrypted Media Extensions API. Widevine, PlayReady, and FairPlay are all supported, and the player negotiates the best key system for the current browser automatically.

CMCD metrics

Common Media Client Data (CMCD) telemetry can be sent back to the origin server on every request, either as HTTP headers or query-string parameters. This gives your CDN real-time insight into buffer health, bitrate, and stall events.

Custom source extensibility

The library exposes a Source base class. You can implement your own source — for example, wrapping a WebSocket transport — and pass it to Player at construction time. WSSource and HTTPSource are included as additional built-in implementations alongside the default HTTPAdaptiveSource.

​
How it works

The library is structured around three cooperating layers:
  1. Player — the public-facing class your application interacts with. It owns the <video> element, manages the MediaSource (or ManagedMediaSource on iOS/Safari), fires lifecycle events (onStart, onStop, onMetadata, onBufferChange), and exposes controls for track selection, DRM, CMCD, and playback rate.
  2. Source — an abstract data-fetch layer. Player instantiates a source (by default HTTPAdaptiveSource) and wires its output callbacks directly. The source fetches audio and video samples from the network and delivers them as Media.Sample objects. You can provide your own Source subclass to the Player constructor to override this layer entirely.
  3. MediaPlayback — an internal MSE wrapper that receives Media.Sample objects from the source, writes them into SourceBuffer instances, and manages buffer housekeeping (overflow recovery, gap flushing, past-buffer trimming). 
Player
  ├── Source (HTTPAdaptiveSource / WSSource / HTTPSource / custom)
  │     └── fetches audio + video samples from the network
  └── MediaPlayback
        └── feeds samples into MediaSource SourceBuffers → <video>
Because Player is a thin orchestrator, you can reuse MediaKeysEngine independently to drive EME from a different player, or use CMAFReader and RTSReader to parse raw stream data outside of any playback context.

​
Supported environments

RequirementMinimum version
Node.js≥ 16
npm≥ 7
BrowserMedia Source Extensions (MSE) required
iOS / SafariManagedMediaSource API (Safari 17+)
The library ships as an ES module by default. CommonJS and IIFE builds can be produced from source. See the Installation page for details.
The Player class automatically detects ManagedMediaSource at runtime and falls back to it on platforms where MediaSource is unavailable (primarily iOS/iPadOS). No configuration is required — the detection is transparent. Be aware that on iOS and Safari, changing playbackRate during playback can produce audible glitches; the library documents how to disable rate adaptation on those platforms.

​
License

Ceeblue WebRTS Client is released under the GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later). Source code is available on GitHub at https://github.com/CeeblueTV/wrts-client. Any modifications you distribute — including running a modified version as a network service — must be made available under the same license.

Quickstart

Build a working live stream player in under five minutes.

Player API reference

Explore every property, method, and event on the Player class.

Build docs developers (and LLMs) love

Get started for freeTalk to us