Player — WebRTS Live Stream Playback Controller

import { Player, PlayerError } from '@ceeblue/wrts-client';

new Player(
  video: HTMLVideoElement,
  SourceClass?: { new(playing: IPlaying, params: Connect.Params): Source }
)

// Default: protocol-resolved source
const player = new Player(videoElement);

// Custom source implementation
const player = new Player(videoElement, MyCustomSource);

start(params: Connect.Params, idleTimeout?: number): void

player.start({
  endPoint: 'https://live.example.com',
  streamName: 'my-stream'
});

stop(error?: PlayerError): void

goLive(reason?: string): void

adjustPlaybackRate(minRate?: number, maxRate?: number): void

computeStats(): PlayerStats

onStart(): void

onStop(error?: PlayerError): void

onMetadata(metadata: Metadata): Media.Tracks | void

// Start with the highest-quality video; MBR can still adjust it later
player.onMetadata = (metadata) => ({ video: metadata.videoTracks[0].id });

// Pin the video track and disable MBR
player.onMetadata = (metadata) => {
  player.videoTrack = metadata.videoTracks[0].id;
};

onTrackChange(audioTrack: number, videoTrack: number, dataTrack: Set<number>): void

onBufferState(oldState: BufferState): void

onBufferChange(): void

onStall(): void

onAudioSkipping(holeMs: number): void

onVideoSkipping(holeMs: number): void

onFinalizeRequest(url: URL, headers: Headers): void

onData(track: number, time: number, duration: number, data: Uint8Array): void

onAudioAppended(data: Uint8Array): void

onVideoAppended(data: Uint8Array): void

onMediaKeys(mediaKeysEngine?: MediaKeysEngine): void

player.onStop = (error) => {
  if (!error) return; // clean stop
  switch (error.type) {
    case 'PlayerError':
      if (error.name === 'Video play error') {
        // Prompt user for interaction
      }
      break;
    case 'SourceError':
      if (error.name === 'Resource unavailable') {
        // Stream not found — show offline message
      }
      break;
  }
};

import { Player, PlayerError, BufferState } from '@ceeblue/wrts-client';

const video = document.getElementById('video') as HTMLVideoElement;
const player = new Player(video);

// ── Lifecycle events ────────────────────────────────────────────────────────

player.onStart = () => {
  console.log('Playback started');
  updateUI('live');
};

player.onStop = (error?: PlayerError) => {
  if (error) {
    console.error('Playback stopped with error:', error);
    showErrorBanner(error.name);
  } else {
    console.log('Playback stopped cleanly');
    updateUI('stopped');
  }
};

// ── Metadata / initial track selection ─────────────────────────────────────

player.onMetadata = (metadata) => {
  console.log('Tracks available:', metadata.videoTracks.length, 'video renditions');
  // Start at the highest quality; MBR will adjust based on bandwidth
  return { video: metadata.videoTracks[0].id };
};

// ── Track changes ───────────────────────────────────────────────────────────

player.onTrackChange = (audioTrack, videoTrack, dataTrack) => {
  console.log(`Active tracks — audio: ${audioTrack}, video: ${videoTrack}`);
};

// ── Buffer monitoring ───────────────────────────────────────────────────────

player.onBufferState = (oldState) => {
  console.log(`Buffer state: ${oldState} → ${player.bufferState}`);
};

// ── Start playback ──────────────────────────────────────────────────────────

player.start({
  endPoint: 'https://live.example.com',
  streamName: 'my-stream'
});

// ── Manual track selection after start ─────────────────────────────────────

// Switch to a specific video rendition (disables MBR)
setTimeout(() => {
  if (player.started) {
    player.videoTrack = player.metadata.videoTracks[1].id;
  }
}, 5000);

// ── Stop cleanly ────────────────────────────────────────────────────────────

document.getElementById('stop-btn')?.addEventListener('click', () => {
  player.stop();
});