THEOplayer · Chromeless Web SDK

Same LiveBarn stack,
powered by THEOplayer.

This workspace ships both Shaka Player and THEOplayer (Chromeless) hooks from @/shared. Use useTheoPlayer when you need THEO’s unified pipeline (HLS/DASH/DRM), network interceptors, optional THEOlive / cast / analytics integrations via playerConfiguration, and commercial SDK features — alongside the same LiveBarn URL + token model as the Shaka path.

THEO · LiveBarn liveTHEO · VOD archiveShaka Player overview
Dev Tool

LiveBarn credentials (developer tool)

Anonymous

Pushes a fresh access token + user id into the running AuthService. Persisted to localStorage so it survives page refresh. Not for production end-users — XSS-exposed; use a server-side cookie + the bundled API proxy instead.

Sign in (password grant)

Only email and password are sent from the browser. The token route adds grant_type=password, device_id, and optional OAuth client_id / client_secret from server env. Then user/getAccount runs via the proxy; on success, credentials apply automatically.

Paste manually

▶

Chromeless Player

Dynamic import of the THEO chromeless bundle keeps SSR safe; the hook mounts one player instance per container and swaps sources without tearing down the SDK.

◇

Tracks & ABR

Video renditions (target quality), audio languages/roles, and text tracks surface the same UI model as Shaka — representation changes feed bitrate analytics.

🔒

Widevine / PlayReady / FairPlay

buildTheoContentProtection maps license URLs (and FairPlay certificate) onto THEO’s DRMConfiguration for each TypedSource.

📡

Network interceptors

Bearer or Akamai tokens attach via addRequestInterceptor — aligned with LiveBarn’s X-LB-* header requirements.

⏱

Buffer profiles

DynamicConfigService tuning maps onto THEO abr.targetBuffer and buffer lookback; BufferManagementService still reacts to rebuffers.

⚙

Extend THEO

Pass playerConfiguration for vendor integrations (cast, THEOlive, retry policies) without forking the hook.

Chromeless bootstrap

Mount an empty container ref; THEO injects the <video>. Pass license / library location via props or NEXT_PUBLIC_* env vars.

const containerRef = useRef<HTMLDivElement>(null);
const {
  isReady, error, qualities,
  selectQuality, audioTracks, textTracks,
  selectAudioTrack, selectTextTrack,
} = useTheoPlayer({
  containerRef,
  source: streamSource,
  telemetry,
  playerConfiguration: {
    // THEOlive, retry, cast, …
  },
});

return <div ref={containerRef} className="aspect-video w-full" />;

DRM & requests

Map the same StreamSource.drm shape to THEO contentProtection; merge auth headers on every manifest/segment request through player.network.

import {
  buildTheoContentProtection,
  useTheoPlayer,
} from "@/shared";

// Source uses LiveBarn URL + optional drm / requestHeaders.
// Buffer tuning follows DynamicConfigService like useShakaPlayer.

Operational checklist

THEO requires a valid commercial license and worker assets for HLS (libraryLocation, often /theoplayer/ under public/). Pair with the same LiveBarn bearer flow as the rest of this app.

Env
NEXT_PUBLIC_THEO_LICENSE or NEXT_PUBLIC_THEO_LICENSE_URL, optional NEXT_PUBLIC_THEO_LIBRARY_LOCATION
Picker parity
useTheoPlayer exposes the same quality / audio / text track state shape as useShakaPlayer for shared controls.