@livepeer-frameworks/player-core 0.0.4 → 0.1.1

package/src/players/WebCodecsPlayer/index.ts

@@ -14,36 +14,38 @@
  * Protocol: MistServer raw WebSocket frames (12-byte header + data)
  */
 
-import { BasePlayer } from '../../core/PlayerInterface';
+import { BasePlayer } from "../../core/PlayerInterface";
 import type {
   StreamSource,
   StreamInfo,
   PlayerOptions,
   PlayerCapability,
-} from '../../core/PlayerInterface';
+} from "../../core/PlayerInterface";
 import type {
   TrackInfo,
   CodecDataMessage,
   InfoMessage,
   OnTimeMessage,
   RawChunk,
-  LatencyProfileName,
   WebCodecsPlayerOptions,
   WebCodecsStats,
   MainToWorkerMessage,
   WorkerToMainMessage,
-} from './types';
-import { WebSocketController } from './WebSocketController';
-import { SyncController } from './SyncController';
-import { getPresentationTimestamp, isInitData } from './RawChunkParser';
-import { getLatencyProfile, mergeLatencyProfile, selectDefaultProfile } from './LatencyProfiles';
-import { createTrackGenerator, hasNativeMediaStreamTrackGenerator } from './polyfills/MediaStreamTrackGenerator';
+} from "./types";
+import { WebSocketController } from "./WebSocketController";
+import { SyncController } from "./SyncController";
+import { getPresentationTimestamp, isInitData } from "./RawChunkParser";
+import { mergeLatencyProfile, selectDefaultProfile } from "./LatencyProfiles";
+import {
+  createTrackGenerator,
+  hasNativeMediaStreamTrackGenerator,
+} from "./polyfills/MediaStreamTrackGenerator";
 
 /**
  * Detect if running on Safari (which has VideoTrackGenerator in worker but not MediaStreamTrackGenerator on main thread)
  */
 function isSafari(): boolean {
-  if (typeof navigator === 'undefined') return false;
+  if (typeof navigator === "undefined") return false;
   const ua = navigator.userAgent;
   return /^((?!chrome|android).)*safari/i.test(ua);
 }
@@ -69,11 +71,11 @@ function createTimeRanges(ranges: [number, number][]): TimeRanges {
   return {
     length: ranges.length,
     start(index: number): number {
-      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds');
+      if (index < 0 || index >= ranges.length) throw new DOMException("Index out of bounds");
       return ranges[index][0];
     },
     end(index: number): number {
-      if (index < 0 || index >= ranges.length) throw new DOMException('Index out of bounds');
+      if (index < 0 || index >= ranges.length) throw new DOMException("Index out of bounds");
       return ranges[index][1];
     },
   };
@@ -111,14 +113,18 @@ interface PipelineInfo {
  */
 export class WebCodecsPlayerImpl extends BasePlayer {
   readonly capability: PlayerCapability = {
-    name: 'WebCodecs Player',
-    shortname: 'webcodecs',
+    name: "WebCodecs Player",
+    shortname: "webcodecs",
     priority: 0, // Highest priority - lowest latency option
-    // Raw WebSocket (12-byte header + AVCC NAL units) - NOT MP4-muxed
+    // Raw WebSocket (12-byte header + codec frames) - NOT MP4-muxed
     // MistServer's output_wsraw.cpp provides full codec negotiation (audio + video)
+    // MistServer's output_h264.cpp uses same 12-byte header but Annex B payload (video-only)
     // NOTE: ws/video/mp4 is MP4-fragmented which needs MEWS player (uses MSE)
     mimes: [
-      'ws/video/raw', 'wss/video/raw',     // Raw codec frames (audio + video)
+      "ws/video/raw",
+      "wss/video/raw", // Raw codec frames - AVCC format (audio + video)
+      "ws/video/h264",
+      "wss/video/h264", // Annex B H264/HEVC (video-only, same 12-byte header)
     ],
   };
 
@@ -135,7 +141,9 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   private isDestroyed = false;
   private debugging = false;
   private verboseDebugging = false;
-  private streamType: 'live' | 'vod' = 'live';
+  private streamType: "live" | "vod" = "live";
+  /** Payload format: 'avcc' for ws/video/raw, 'annexb' for ws/video/h264 */
+  private payloadFormat: "avcc" | "annexb" = "avcc";
   private workerUidCounter = 0;
   private workerListeners = new Map<number, (msg: WorkerToMainMessage) => void>();
 
@@ -163,11 +171,18 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   /**
    * Get cache key for a track's codec configuration
    */
-  private static getCodecCacheKey(track: { codec: string; codecstring?: string; init?: string }): string {
-    const codecStr = track.codecstring ?? track.codec?.toLowerCase() ?? '';
+  private static getCodecCacheKey(track: {
+    codec: string;
+    codecstring?: string;
+    init?: string;
+  }): string {
+    const codecStr = track.codecstring ?? track.codec?.toLowerCase() ?? "";
     // Simple hash of init data for cache key (just first/last bytes + length)
-    const init = track.init ?? '';
-    const initHash = init.length > 0 ? `${init.length}_${init.charCodeAt(0)}_${init.charCodeAt(init.length - 1)}` : '';
+    const init = track.init ?? "";
+    const initHash =
+      init.length > 0
+        ? `${init.length}_${init.charCodeAt(0)}_${init.charCodeAt(init.length - 1)}`
+        : "";
     return `${codecStr}|${initHash}`;
   }
 
@@ -185,11 +200,11 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     }
 
     // Build codec config
-    const codecStr = track.codecstring ?? (track.codec ?? '').toLowerCase();
+    const codecStr = track.codecstring ?? (track.codec ?? "").toLowerCase();
     const config: any = { codec: codecStr };
 
     // Add description (init data) if present
-    if (track.init && track.init !== '') {
+    if (track.init && track.init !== "") {
       config.description = str2bin(track.init);
     }
 
@@ -197,27 +212,29 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     try {
       switch (track.type) {
-        case 'video': {
+        case "video": {
           // Special handling for JPEG - uses ImageDecoder
-          if (track.codec === 'JPEG') {
-            if (!('ImageDecoder' in window)) {
-              result = { supported: false, config: { codec: 'image/jpeg' } };
+          if (track.codec === "JPEG") {
+            if (!("ImageDecoder" in window)) {
+              result = { supported: false, config: { codec: "image/jpeg" } };
             } else {
               // @ts-ignore - ImageDecoder may not have types
-              const isSupported = await (window as any).ImageDecoder.isTypeSupported('image/jpeg');
-              result = { supported: isSupported, config: { codec: 'image/jpeg' } };
+              const isSupported = await (window as any).ImageDecoder.isTypeSupported("image/jpeg");
+              result = { supported: isSupported, config: { codec: "image/jpeg" } };
             }
           } else {
             // Use VideoDecoder.isConfigSupported()
-            result = await VideoDecoder.isConfigSupported(config as VideoDecoderConfig);
+            const videoResult = await VideoDecoder.isConfigSupported(config as VideoDecoderConfig);
+            result = { supported: videoResult.supported === true, config: videoResult.config };
           }
           break;
         }
-        case 'audio': {
+        case "audio": {
           // Audio requires numberOfChannels and sampleRate
           config.numberOfChannels = track.channels ?? 2;
           config.sampleRate = track.rate ?? 48000;
-          result = await AudioDecoder.isConfigSupported(config as AudioDecoderConfig);
+          const audioResult = await AudioDecoder.isConfigSupported(config as AudioDecoderConfig);
+          result = { supported: audioResult.supported === true, config: audioResult.config };
           break;
         }
         default:
@@ -241,7 +258,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     const supportedTypes: Set<string> = new Set();
 
     const validationPromises = tracks
-      .filter(t => t.type === 'video' || t.type === 'audio')
+      .filter((t) => t.type === "video" || t.type === "audio")
       .map(async (track) => {
         const result = await WebCodecsPlayerImpl.isTrackSupported(track);
         if (result.supported) {
@@ -254,7 +271,9 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     // Log validation results for debugging
     for (const { track, supported } of results) {
-      console.debug(`[WebCodecs] Track ${track.idx} (${track.type} ${track.codec}): ${supported ? 'supported' : 'UNSUPPORTED'}`);
+      console.debug(
+        `[WebCodecs] Track ${track.idx} (${track.type} ${track.codec}): ${supported ? "supported" : "UNSUPPORTED"}`
+      );
     }
 
     return Array.from(supportedTypes);
@@ -270,20 +289,20 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     streamInfo: StreamInfo
   ): boolean | string[] {
     // Basic requirements
-    if (!('WebSocket' in window)) {
+    if (!("WebSocket" in window)) {
       return false;
     }
-    if (!('Worker' in window)) {
+    if (!("Worker" in window)) {
       return false;
     }
-    if (!('VideoDecoder' in window) || !('AudioDecoder' in window)) {
+    if (!("VideoDecoder" in window) || !("AudioDecoder" in window)) {
       // WebCodecs not available (requires HTTPS)
       return false;
     }
 
     // Check for HTTP/HTTPS mismatch
-    const sourceUrl = new URL(source.url.replace(/^ws/, 'http'), location.href);
-    if (location.protocol === 'https:' && sourceUrl.protocol === 'http:') {
+    const sourceUrl = new URL(source.url.replace(/^ws/, "http"), location.href);
+    if (location.protocol === "https:" && sourceUrl.protocol === "http:") {
       return false;
     }
 
@@ -292,7 +311,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     const playableTracks: Record<string, boolean> = {};
 
     for (const track of streamInfo.meta.tracks) {
-      if (track.type === 'video' || track.type === 'audio') {
+      if (track.type === "video" || track.type === "audio") {
         // Check cache for this track's codec
         const cacheKey = WebCodecsPlayerImpl.getCodecCacheKey(track as any);
         if (WebCodecsPlayerImpl.codecCache.has(cacheKey)) {
@@ -305,12 +324,17 @@ export class WebCodecsPlayerImpl extends BasePlayer {
           // This is necessary because isBrowserSupported is synchronous
           playableTracks[track.type] = true;
         }
-      } else if (track.type === 'meta' && track.codec === 'subtitle') {
+      } else if (track.type === "meta" && track.codec === "subtitle") {
         // Subtitles supported via text track
-        playableTracks['subtitle'] = true;
+        playableTracks["subtitle"] = true;
       }
     }
 
+    // Annex B H264 WebSocket is video-only (no audio payloads)
+    if (mimetype.includes("video/h264")) {
+      delete playableTracks.audio;
+    }
+
     if (Object.keys(playableTracks).length === 0) {
       return false;
     }
@@ -341,8 +365,15 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     this._bytesReceived = 0;
     this._messagesReceived = 0;
 
+    // Detect payload format from source MIME type
+    // ws/video/h264 uses Annex B (start code delimited NALs), ws/video/raw uses AVCC (length-prefixed)
+    this.payloadFormat = source.type?.includes("h264") ? "annexb" : "avcc";
+    if (this.payloadFormat === "annexb") {
+      this.log("Using Annex B payload format (ws/video/h264)");
+    }
+
     this.container = container;
-    container.classList.add('fw-player-container');
+    container.classList.add("fw-player-container");
 
     // Pre-populate track metadata from streamInfo (fetched via HTTP before WebSocket)
     // This is how the reference player (rawws.js) gets track info - from MistVideo.info.meta.tracks
@@ -353,7 +384,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
           // Convert StreamTrack to TrackInfo (WebCodecs format)
           const trackInfo: TrackInfo = {
             idx: track.idx,
-            type: track.type as TrackInfo['type'],
+            type: track.type as TrackInfo["type"],
             codec: track.codec,
             codecstring: track.codecstring,
             init: track.init,
@@ -376,24 +407,25 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     this.verboseDebugging = wcOptions.verboseDebug ?? false;
 
     // Determine stream type
-    this.streamType = (source as any).type === 'live' ? 'live' : 'vod';
+    this.streamType = (source as any).type === "live" ? "live" : "vod";
 
     // Select latency profile
-    const profileName = wcOptions.latencyProfile ?? selectDefaultProfile(this.streamType === 'live');
+    const profileName =
+      wcOptions.latencyProfile ?? selectDefaultProfile(this.streamType === "live");
     const profile = mergeLatencyProfile(profileName, wcOptions.customLatencyProfile);
 
     this.log(`Initializing WebCodecs player with ${profile.name} profile`);
 
     // Create video element
-    const video = document.createElement('video');
-    video.classList.add('fw-player-video');
-    video.setAttribute('playsinline', '');
-    video.setAttribute('crossorigin', 'anonymous');
+    const video = document.createElement("video");
+    video.classList.add("fw-player-video");
+    video.setAttribute("playsinline", "");
+    video.setAttribute("crossorigin", "anonymous");
 
     if (options.autoplay) video.autoplay = true;
     if (options.muted) video.muted = true;
     video.controls = options.controls === true;
-    if (options.loop && this.streamType !== 'live') video.loop = true;
+    if (options.loop && this.streamType !== "live") video.loop = true;
     if (options.poster) video.poster = options.poster;
 
     this.videoElement = video;
@@ -404,8 +436,8 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       if (this._suppressPlayPauseSync) return;
       this._isPaused = false;
       this.sendToWorker({
-        type: 'frametiming',
-        action: 'setPaused',
+        type: "frametiming",
+        action: "setPaused",
         paused: false,
         uid: this.workerUidCounter++,
       }).catch(() => {});
@@ -414,14 +446,14 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       if (this._suppressPlayPauseSync) return;
       this._isPaused = true;
       this.sendToWorker({
-        type: 'frametiming',
-        action: 'setPaused',
+        type: "frametiming",
+        action: "setPaused",
         paused: true,
         uid: this.workerUidCounter++,
       }).catch(() => {});
     };
-    video.addEventListener('play', this._onVideoPlay);
-    video.addEventListener('pause', this._onVideoPause);
+    video.addEventListener("play", this._onVideoPlay);
+    video.addEventListener("pause", this._onVideoPause);
 
     // Create MediaStream for output
     this.mediaStream = new MediaStream();
@@ -433,11 +465,11 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     // Initialize sync controller
     this.syncController = new SyncController({
       profile,
-      isLive: this.streamType === 'live',
+      isLive: this.streamType === "live",
       onSpeedChange: (main, tweak) => {
         this.sendToWorker({
-          type: 'frametiming',
-          action: 'setSpeed',
+          type: "frametiming",
+          action: "setSpeed",
           speed: main,
           tweak,
           uid: this.workerUidCounter++,
@@ -465,13 +497,13 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     const supportedVideoCodecs: Set<string> = new Set();
 
     if (streamInfo?.meta?.tracks) {
-      this.log('Validating track codecs with isConfigSupported()...');
+      this.log("Validating track codecs with isConfigSupported()...");
 
       for (const track of streamInfo.meta.tracks) {
-        if (track.type === 'video' || track.type === 'audio') {
+        if (track.type === "video" || track.type === "audio") {
           const trackInfo: TrackInfo = {
             idx: track.idx ?? 0,
-            type: track.type as 'video' | 'audio',
+            type: track.type as "video" | "audio",
             codec: track.codec,
             codecstring: track.codecstring,
             init: track.init,
@@ -483,14 +515,14 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
           const result = await WebCodecsPlayerImpl.isTrackSupported(trackInfo);
           if (result.supported) {
-            if (track.type === 'audio') {
+            if (track.type === "audio") {
               supportedAudioCodecs.add(track.codec);
             } else {
               supportedVideoCodecs.add(track.codec);
             }
             this.log(`Track ${track.idx} (${track.type} ${track.codec}): SUPPORTED`);
           } else {
-            this.log(`Track ${track.idx} (${track.type} ${track.codec}): NOT SUPPORTED`, 'warn');
+            this.log(`Track ${track.idx} (${track.type} ${track.codec}): NOT SUPPORTED`, "warn");
           }
         }
       }
@@ -500,34 +532,38 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     if (supportedAudioCodecs.size === 0 && supportedVideoCodecs.size === 0) {
       // Fallback: Use default codec list if no tracks provided or all failed
       // This handles streams where track info isn't available until WebSocket connects
-      this.log('No validated codecs, using default codec list');
-      ['AAC', 'MP3', 'opus', 'FLAC', 'AC3'].forEach(c => supportedAudioCodecs.add(c));
-      ['H264', 'HEVC', 'VP8', 'VP9', 'AV1', 'JPEG'].forEach(c => supportedVideoCodecs.add(c));
+      this.log("No validated codecs, using default codec list");
+      ["AAC", "MP3", "opus", "FLAC", "AC3"].forEach((c) => supportedAudioCodecs.add(c));
+      ["H264", "HEVC", "VP8", "VP9", "AV1", "JPEG"].forEach((c) => supportedVideoCodecs.add(c));
     }
 
     // Connect and request codec data
     // Per MistServer rawws.js line 1544, we need to tell the server what codecs we support
     // Format: [[ [audio codecs], [video codecs] ]] - audio FIRST per Object.values({audio:[], video:[]}) order
-    const supportedCombinations: string[][][] = [[
-      Array.from(supportedAudioCodecs),  // Audio codecs (position 0)
-      Array.from(supportedVideoCodecs),  // Video codecs (position 1)
-    ]];
+    const supportedCombinations: string[][][] = [
+      [
+        Array.from(supportedAudioCodecs), // Audio codecs (position 0)
+        Array.from(supportedVideoCodecs), // Video codecs (position 1)
+      ],
+    ];
 
-    this.log(`Requesting codecs: audio=[${supportedCombinations[0][0].join(', ')}], video=[${supportedCombinations[0][1].join(', ')}]`);
+    this.log(
+      `Requesting codecs: audio=[${supportedCombinations[0][0].join(", ")}], video=[${supportedCombinations[0][1].join(", ")}]`
+    );
 
     try {
       await this.wsController.connect();
       this.wsController.requestCodecData(supportedCombinations);
     } catch (err) {
-      this.log(`Failed to connect: ${err}`, 'error');
-      this.emit('error', err instanceof Error ? err : new Error(String(err)));
+      this.log(`Failed to connect: ${err}`, "error");
+      this.emit("error", err instanceof Error ? err : new Error(String(err)));
       throw err;
     }
 
     // Proactively create pipelines for pre-populated tracks
     // This ensures pipelines exist when first chunks arrive, they just need init data
     for (const [idx, track] of this.tracksByIndex) {
-      if (track.type === 'video' || track.type === 'audio') {
+      if (track.type === "video" || track.type === "audio") {
         this.log(`Creating pipeline proactively for track ${idx} (${track.type} ${track.codec})`);
         await this.createPipeline(track);
       }
@@ -547,7 +583,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     if (this.isDestroyed) return;
     this.isDestroyed = true;
 
-    this.log('Destroying WebCodecs player');
+    this.log("Destroying WebCodecs player");
 
     // Cancel frame callback
     this.cancelFrameCallback();
@@ -585,11 +621,11 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     // Clean up video element
     if (this.videoElement) {
       if (this._onVideoPlay) {
-        this.videoElement.removeEventListener('play', this._onVideoPlay);
+        this.videoElement.removeEventListener("play", this._onVideoPlay);
         this._onVideoPlay = undefined;
       }
       if (this._onVideoPause) {
-        this.videoElement.removeEventListener('pause', this._onVideoPause);
+        this.videoElement.removeEventListener("pause", this._onVideoPause);
         this._onVideoPause = undefined;
       }
       if (this._stepPauseTimeout) {
@@ -620,7 +656,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     return new Promise((resolve, reject) => {
       let worker: Worker;
       try {
-        worker = new Worker(url, { type: 'module' });
+        worker = new Worker(url, { type: "module" });
       } catch (e) {
         reject(e);
         return;
@@ -628,14 +664,14 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
       const cleanup = () => {
         clearTimeout(timeout);
-        worker.removeEventListener('error', onError);
-        worker.removeEventListener('message', onMessage);
+        worker.removeEventListener("error", onError);
+        worker.removeEventListener("message", onMessage);
       };
 
       const onError = (e: ErrorEvent) => {
         cleanup();
         worker.terminate();
-        reject(new Error(e.message || 'Worker failed to load'));
+        reject(new Error(e.message || "Worker failed to load"));
       };
 
       const onMessage = () => {
@@ -649,8 +685,8 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         resolve(worker);
       }, 500);
 
-      worker.addEventListener('error', onError);
-      worker.addEventListener('message', onMessage);
+      worker.addEventListener("error", onError);
+      worker.addEventListener("message", onMessage);
     });
   }
 
@@ -658,13 +694,11 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     // Worker paths to try in order:
     // 1. Dev server path (Vite plugin serves /workers/* from source)
     // 2. Production npm package path (relative to built module)
-    const paths = [
-      '/workers/decoder.worker.js',
-    ];
+    const paths = ["/workers/decoder.worker.js"];
 
     // Add production path (may fail in dev but that's ok)
     try {
-      paths.push(new URL('../workers/decoder.worker.js', import.meta.url).href);
+      paths.push(new URL("../workers/decoder.worker.js", import.meta.url).href);
     } catch {
       // import.meta.url may not work in all environments
     }
@@ -678,14 +712,13 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         break;
       } catch (e) {
         lastError = e instanceof Error ? e : new Error(String(e));
-        this.log(`Worker path failed: ${path} - ${lastError.message}`, 'warn');
+        this.log(`Worker path failed: ${path} - ${lastError.message}`, "warn");
       }
     }
 
     if (!this.worker) {
       throw new Error(
-        'Failed to initialize WebCodecs worker. ' +
-        `Last error: ${lastError?.message ?? 'unknown'}`
+        "Failed to initialize WebCodecs worker. " + `Last error: ${lastError?.message ?? "unknown"}`
       );
     }
 
@@ -695,28 +728,31 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     };
 
     this.worker.onerror = (err) => {
-      this.log(`Worker error: ${err?.message ?? 'unknown error'}`, 'error');
-      this.emit('error', new Error(`Worker error: ${err?.message ?? 'unknown'}`));
+      this.log(`Worker error: ${err?.message ?? "unknown error"}`, "error");
+      this.emit("error", new Error(`Worker error: ${err?.message ?? "unknown"}`));
     };
 
     // Configure debugging mode in worker
     this.sendToWorker({
-      type: 'debugging',
-      value: this.verboseDebugging ? 'verbose' : this.debugging,
+      type: "debugging",
+      value: this.verboseDebugging ? "verbose" : this.debugging,
       uid: this.workerUidCounter++,
     });
   }
 
-  private sendToWorker(msg: MainToWorkerMessage & { uid: number }, transfer?: Transferable[]): Promise<WorkerToMainMessage> {
+  private sendToWorker(
+    msg: MainToWorkerMessage & { uid: number },
+    transfer?: Transferable[]
+  ): Promise<WorkerToMainMessage> {
     return new Promise((resolve, reject) => {
       // Reject with proper error if destroyed or no worker
       // This prevents silent failures and allows callers to handle errors appropriately
       if (this.isDestroyed) {
-        reject(new Error('Player destroyed'));
+        reject(new Error("Player destroyed"));
         return;
       }
       if (!this.worker) {
-        reject(new Error('Worker not initialized'));
+        reject(new Error("Worker not initialized"));
         return;
       }
 
@@ -725,7 +761,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       // Register listener for response
       this.workerListeners.set(uid, (response) => {
         this.workerListeners.delete(uid);
-        if (response.type === 'ack' && response.status === 'error') {
+        if (response.type === "ack" && response.status === "error") {
           reject(new Error(response.error));
         } else {
           resolve(response);
@@ -748,7 +784,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     // Handle message by type
     switch (msg.type) {
-      case 'addtrack': {
+      case "addtrack": {
         const pipeline = this.pipelines.get(msg.idx);
         if (pipeline && this.mediaStream) {
           // If track was created in worker (Safari), use it directly
@@ -762,7 +798,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         break;
       }
 
-      case 'removetrack': {
+      case "removetrack": {
         const pipeline = this.pipelines.get(msg.idx);
         if (pipeline?.generator && this.mediaStream) {
           const track = pipeline.generator.getTrack();
@@ -771,80 +807,84 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         break;
       }
 
-      case 'setplaybackrate': {
+      case "setplaybackrate": {
         if (this.videoElement) {
           this.videoElement.playbackRate = msg.speed;
         }
         break;
       }
 
-      case 'sendevent': {
-        if (msg.kind === 'timeupdate') {
+      case "sendevent": {
+        if (msg.kind === "timeupdate") {
           if (this._pendingStepPause) {
             this.finishStepPause();
           }
-          if (typeof msg.time === 'number' && Number.isFinite(msg.time)) {
+          if (typeof msg.time === "number" && Number.isFinite(msg.time)) {
             this._currentTime = msg.time;
-            this.emit('timeupdate', this._currentTime);
+            this.emit("timeupdate", this._currentTime);
           } else if (this.videoElement) {
-            this.emit('timeupdate', this.videoElement.currentTime);
+            this.emit("timeupdate", this.videoElement.currentTime);
           }
-        } else if (msg.kind === 'error') {
-          this.emit('error', new Error(msg.message ?? 'Unknown error'));
+        } else if (msg.kind === "error") {
+          this.emit("error", new Error(msg.message ?? "Unknown error"));
         }
         break;
       }
 
-      case 'writeframe': {
+      case "writeframe": {
         // Safari audio: worker sends frames via postMessage, we write them here
         // Reference: rawws.js line 897-918
         const pipeline = this.pipelines.get(msg.idx);
         if (pipeline?.safariAudioWriter) {
           const frame = msg.frame;
           const frameUid = msg.uid;
-          pipeline.safariAudioWriter.write(frame).then(() => {
-            this.worker?.postMessage({
-              type: 'writeframe',
-              idx: msg.idx,
-              uid: frameUid,
-              status: 'ok',
-            });
-          }).catch((err: Error) => {
-            this.worker?.postMessage({
-              type: 'writeframe',
-              idx: msg.idx,
-              uid: frameUid,
-              status: 'error',
-              error: err.message,
+          pipeline.safariAudioWriter
+            .write(frame)
+            .then(() => {
+              this.worker?.postMessage({
+                type: "writeframe",
+                idx: msg.idx,
+                uid: frameUid,
+                status: "ok",
+              });
+            })
+            .catch((err: Error) => {
+              this.worker?.postMessage({
+                type: "writeframe",
+                idx: msg.idx,
+                uid: frameUid,
+                status: "error",
+                error: err.message,
+              });
             });
-          });
         } else {
           this.worker?.postMessage({
-            type: 'writeframe',
+            type: "writeframe",
             idx: msg.idx,
             uid: msg.uid,
-            status: 'error',
-            error: 'Pipeline not active or no audio writer',
+            status: "error",
+            error: "Pipeline not active or no audio writer",
           });
         }
         break;
       }
 
-      case 'log': {
+      case "log": {
         if (this.debugging) {
-          const level = (msg as any).level ?? 'info';
-          const logFn = level === 'error' ? console.error : level === 'warn' ? console.warn : console.log;
+          const level = (msg as any).level ?? "info";
+          const logFn =
+            level === "error" ? console.error : level === "warn" ? console.warn : console.log;
           logFn(`[WebCodecs Worker] ${msg.msg}`);
         }
         break;
       }
 
-      case 'stats': {
+      case "stats": {
         // Could emit stats for monitoring
         break;
       }
 
-      case 'closed': {
+      case "closed": {
         this.pipelines.delete(msg.idx);
         break;
       }
@@ -858,28 +898,30 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   private setupWebSocketHandlers(): void {
     if (!this.wsController) return;
 
-    this.wsController.on('codecdata', (msg) => this.handleCodecData(msg));
-    this.wsController.on('info', (msg) => this.handleInfo(msg));
-    this.wsController.on('ontime', (msg) => this.handleOnTime(msg));
-    this.wsController.on('tracks', (tracks) => this.handleTracksChange(tracks));
-    this.wsController.on('chunk', (chunk) => this.handleChunk(chunk));
-    this.wsController.on('stop', () => this.handleStop());
-    this.wsController.on('error', (err) => this.handleError(err));
-    this.wsController.on('statechange', (state) => {
+    this.wsController.on("codecdata", (msg) => this.handleCodecData(msg));
+    this.wsController.on("info", (msg) => this.handleInfo(msg));
+    this.wsController.on("ontime", (msg) => this.handleOnTime(msg));
+    this.wsController.on("tracks", (tracks) => this.handleTracksChange(tracks));
+    this.wsController.on("chunk", (chunk) => this.handleChunk(chunk));
+    this.wsController.on("stop", () => this.handleStop());
+    this.wsController.on("error", (err) => this.handleError(err));
+    this.wsController.on("statechange", (state) => {
       this.log(`Connection state: ${state}`);
-      if (state === 'error') {
-        this.emit('error', new Error('WebSocket connection failed'));
+      if (state === "error") {
+        this.emit("error", new Error("WebSocket connection failed"));
       }
     });
   }
 
   private async handleCodecData(msg: CodecDataMessage): Promise<void> {
     const codecs = msg.codecs ?? [];
-    const trackIndices = msg.tracks ?? [];  // Array of track indices (numbers), NOT TrackInfo
-    this.log(`Received codec data: codecs=[${codecs.join(', ') || 'none'}], tracks=[${trackIndices.join(', ') || 'none'}]`);
+    const trackIndices = msg.tracks ?? []; // Array of track indices (numbers), NOT TrackInfo
+    this.log(
+      `Received codec data: codecs=[${codecs.join(", ") || "none"}], tracks=[${trackIndices.join(", ") || "none"}]`
+    );
 
     if (codecs.length === 0 || trackIndices.length === 0) {
-      this.log('No playable codecs/tracks selected by server', 'warn');
+      this.log("No playable codecs/tracks selected by server", "warn");
       // Still start playback - info message may populate tracks later
       this.wsController?.play();
       return;
@@ -899,8 +941,11 @@ export class WebCodecsPlayerImpl extends BasePlayer {
           // Create minimal track info - will be filled in by info message
           this.tracksByIndex.set(trackIdx, {
             idx: trackIdx,
-            type: codec.match(/^(H264|HEVC|VP[89]|AV1|JPEG)/i) ? 'video' :
-                  codec.match(/^(AAC|MP3|opus|FLAC|AC3|pcm)/i) ? 'audio' : 'meta',
+            type: codec.match(/^(H264|HEVC|VP[89]|AV1|JPEG)/i)
+              ? "video"
+              : codec.match(/^(AAC|MP3|opus|FLAC|AC3|pcm)/i)
+                ? "audio"
+                : "meta",
             codec,
           });
         }
@@ -911,7 +956,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     // Create pipelines for selected tracks that have metadata
     for (const trackIdx of trackIndices) {
       const track = this.tracksByIndex.get(trackIdx);
-      if (track && (track.type === 'video' || track.type === 'audio')) {
+      if (track && (track.type === "video" || track.type === "audio")) {
         await this.createPipeline(track);
       }
     }
@@ -925,14 +970,14 @@ export class WebCodecsPlayerImpl extends BasePlayer {
    * This is sent by MistServer with full track information
    */
   private async handleInfo(msg: InfoMessage): Promise<void> {
-    this.log('Received stream info');
+    this.log("Received stream info");
 
     // Extract tracks from meta.tracks object
     if (msg.meta?.tracks) {
       const tracksObj = msg.meta.tracks;
       this.log(`Info contains ${Object.keys(tracksObj).length} tracks`);
 
-      for (const [name, track] of Object.entries(tracksObj)) {
+      for (const [_name, track] of Object.entries(tracksObj)) {
         // Store track by its index for lookup when chunks arrive
         if (track.idx !== undefined) {
           this.tracksByIndex.set(track.idx, track);
@@ -940,7 +985,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
           // Process any queued init data for this track
           if (this.queuedInitData.has(track.idx)) {
-            if (track.type === 'video' || track.type === 'audio') {
+            if (track.type === "video" || track.type === "audio") {
               this.log(`Processing queued INIT data for track ${track.idx}`);
               await this.createPipeline(track);
               const initData = this.queuedInitData.get(track.idx)!;
@@ -987,8 +1032,10 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       for (const trackIdx of msg.tracks) {
         if (!this.pipelines.has(trackIdx)) {
           const track = this.tracksByIndex.get(trackIdx);
-          if (track && (track.type === 'video' || track.type === 'audio')) {
-            this.log(`Creating pipeline from on_time for track ${track.idx} (${track.type} ${track.codec})`);
+          if (track && (track.type === "video" || track.type === "audio")) {
+            this.log(
+              `Creating pipeline from on_time for track ${track.idx} (${track.type} ${track.codec})`
+            );
             this.createPipeline(track).then(() => {
               // Process any queued init data
               const queuedInit = this.queuedInitData.get(track.idx);
@@ -1004,10 +1051,10 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   }
 
   private async handleTracksChange(tracks: TrackInfo[]): Promise<void> {
-    this.log(`Tracks changed: ${tracks.map(t => `${t.idx}:${t.type}`).join(', ')}`);
+    this.log(`Tracks changed: ${tracks.map((t) => `${t.idx}:${t.type}`).join(", ")}`);
 
     // Check if codecs changed
-    const newTrackIds = new Set(tracks.map(t => t.idx));
+    const newTrackIds = new Set(tracks.map((t) => t.idx));
     const oldTrackIds = new Set(this.pipelines.keys());
 
     // Remove old pipelines
@@ -1021,7 +1068,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     for (const track of tracks) {
       this.tracksByIndex.set(track.idx, track);
 
-      if (track.type === 'video' || track.type === 'audio') {
+      if (track.type === "video" || track.type === "audio") {
         if (!this.pipelines.has(track.idx)) {
           await this.createPipeline(track);
         }
@@ -1053,12 +1100,14 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         }
 
         // For regular chunks without track info, we can't decode without codec config
-        this.log(`Received chunk for unknown track ${chunk.trackIndex} without track info`, 'warn');
+        this.log(`Received chunk for unknown track ${chunk.trackIndex} without track info`, "warn");
         return;
       }
 
-      if (track.type === 'video' || track.type === 'audio') {
-        this.log(`Creating pipeline for discovered track ${track.idx} (${track.type} ${track.codec})`);
+      if (track.type === "video" || track.type === "audio") {
+        this.log(
+          `Creating pipeline for discovered track ${track.idx} (${track.type} ${track.codec})`
+        );
         this.createPipeline(track).then(() => {
           if (this.isDestroyed) return; // Guard against async completion after destroy
           // Process any queued init data for this track
@@ -1086,14 +1135,16 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       // For AUDIO tracks: configure on FIRST frame (audio doesn't have key/delta distinction)
       // Audio chunks are sent as type 0 (delta) by the server even though they're independent
       // Reference: rawws.js line 768-769 forces audio type to 'key'
-      const isAudioTrack = pipeline.track.type === 'audio';
+      const isAudioTrack = pipeline.track.type === "audio";
 
       // For VIDEO tracks: wait for KEY frame before configuring
       // This handles Annex B streams where SPS/PPS is inline with keyframes
-      const shouldConfigure = isAudioTrack || chunk.type === 'key';
+      const shouldConfigure = isAudioTrack || chunk.type === "key";
 
       if (shouldConfigure) {
-        this.log(`Received ${chunk.type.toUpperCase()} frame for unconfigured ${pipeline.track.type} track ${chunk.trackIndex}, configuring`);
+        this.log(
+          `Received ${chunk.type.toUpperCase()} frame for unconfigured ${pipeline.track.type} track ${chunk.trackIndex}, configuring`
+        );
 
         // Queue this frame at the FRONT so it's sent before any DELTAs
         if (!this.queuedChunks.has(chunk.trackIndex)) {
@@ -1105,8 +1156,8 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         // For audio codecs like opus/mp3 that don't need init data, this works fine
         // For AAC, the description should come from track.init or the server will send INIT
         const initData = pipeline.track.init ? str2bin(pipeline.track.init) : new Uint8Array(0);
-        this.configurePipeline(chunk.trackIndex, initData).catch(err => {
-          this.log(`Failed to configure track ${chunk.trackIndex}: ${err}`, 'error');
+        this.configurePipeline(chunk.trackIndex, initData).catch((err) => {
+          this.log(`Failed to configure track ${chunk.trackIndex}: ${err}`, "error");
         });
         return;
       }
@@ -1131,10 +1182,10 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
   private sendChunkToWorker(chunk: RawChunk): void {
     const msg: MainToWorkerMessage = {
-      type: 'receive',
+      type: "receive",
       idx: chunk.trackIndex,
       chunk: {
-        type: chunk.type === 'key' ? 'key' : 'delta',
+        type: chunk.type === "key" ? "key" : "delta",
         timestamp: getPresentationTimestamp(chunk),
         data: chunk.data,
       },
@@ -1145,13 +1196,13 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   }
 
   private handleStop(): void {
-    this.log('Stream stopped');
-    this.emit('ended', undefined);
+    this.log("Stream stopped");
+    this.emit("ended", undefined);
   }
 
   private handleError(err: Error): void {
-    this.log(`WebSocket error: ${err.message}`, 'error');
-    this.emit('error', err);
+    this.log(`WebSocket error: ${err.message}`, "error");
+    this.emit("error", err);
   }
 
   // ============================================================================
@@ -1175,11 +1226,12 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     // Create worker pipeline
     await this.sendToWorker({
-      type: 'create',
+      type: "create",
       idx: track.idx,
       track,
       opts: {
-        optimizeForLatency: this.streamType === 'live',
+        optimizeForLatency: this.streamType === "live",
+        payloadFormat: this.payloadFormat, // 'avcc' for ws/video/raw, 'annexb' for ws/video/h264
       },
       uid: this.workerUidCounter++,
     });
@@ -1200,7 +1252,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
       await this.sendToWorker(
         {
-          type: 'setwritable',
+          type: "setwritable",
           idx: track.idx,
           writable: generator.writable,
           uid: this.workerUidCounter++,
@@ -1212,12 +1264,12 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       // Reference: rawws.js line 1012-1037
       this.log(`Safari detected - using worker-based track generator for ${track.type}`);
 
-      if (track.type === 'audio') {
+      if (track.type === "audio") {
         // Safari audio: create generator on main thread, frames relayed from worker
         // @ts-ignore - Safari has MediaStreamTrackGenerator for audio
-        if (typeof MediaStreamTrackGenerator !== 'undefined') {
+        if (typeof MediaStreamTrackGenerator !== "undefined") {
           // @ts-ignore
-          const audioGen = new MediaStreamTrackGenerator({ kind: 'audio' });
+          const audioGen = new MediaStreamTrackGenerator({ kind: "audio" });
           pipeline.safariAudioGenerator = audioGen;
           pipeline.safariAudioWriter = audioGen.writable.getWriter();
 
@@ -1230,13 +1282,13 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
       // Ask worker to create generator (video uses VideoTrackGenerator, audio sets up relay)
       await this.sendToWorker({
-        type: 'creategenerator',
+        type: "creategenerator",
         idx: track.idx,
         uid: this.workerUidCounter++,
       });
     } else {
       // Firefox/other: Use canvas/AudioWorklet polyfill
-      pipeline.generator = createTrackGenerator(track.type as 'video' | 'audio');
+      pipeline.generator = createTrackGenerator(track.type as "video" | "audio");
 
       if (pipeline.generator.waitForInit) {
         await pipeline.generator.waitForInit();
@@ -1244,7 +1296,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
       // For polyfill, writable stays on main thread
       // Worker would need different architecture - for now, fall back to main thread decode
-      this.log('Using MediaStreamTrackGenerator polyfill - main thread decode');
+      this.log("Using MediaStreamTrackGenerator polyfill - main thread decode");
 
       // Add track to stream directly
       if (this.mediaStream && pipeline.generator) {
@@ -1259,14 +1311,18 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     // However, if track.init is empty/undefined, the codec doesn't need init data
     // and we can configure immediately (per rawws.js line 1239-1241).
     // This applies to codecs like opus, mp3, vp8, vp9 that don't need init data.
-    if (!track.init || track.init === '') {
-      this.log(`Track ${track.idx} (${track.codec}) doesn't need init data, configuring immediately`);
+    if (!track.init || track.init === "") {
+      this.log(
+        `Track ${track.idx} (${track.codec}) doesn't need init data, configuring immediately`
+      );
       await this.configurePipeline(track.idx, new Uint8Array(0));
     } else {
       // For codecs that need init data (H264, HEVC, AAC), we have two paths:
       // 1. WebSocket sends INIT frame -> handleChunk triggers configurePipeline
       // 2. First frame arrives without prior INIT -> handleChunk uses track.init
-      this.log(`Track ${track.idx} (${track.codec}) has init data (${track.init.length} bytes), waiting for first frame`);
+      this.log(
+        `Track ${track.idx} (${track.codec}) has init data (${track.init.length} bytes), waiting for first frame`
+      );
     }
   }
 
@@ -1281,7 +1337,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     const headerCopy = new Uint8Array(header);
 
     await this.sendToWorker({
-      type: 'configure',
+      type: "configure",
       idx,
       header: headerCopy,
       uid: this.workerUidCounter++,
@@ -1296,7 +1352,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       // Find first keyframe to start from (can't decode deltas without reference)
       let startIdx = 0;
       for (let i = 0; i < queued.length; i++) {
-        if (queued[i].type === 'key') {
+        if (queued[i].type === "key") {
           startIdx = i;
           break;
         }
@@ -1319,7 +1375,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     // Close worker pipeline
     await this.sendToWorker({
-      type: 'close',
+      type: "close",
       idx,
       waitEmpty,
       uid: this.workerUidCounter++,
@@ -1342,8 +1398,8 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     this._isPaused = false;
     this.wsController?.play();
     this.sendToWorker({
-      type: 'frametiming',
-      action: 'setPaused',
+      type: "frametiming",
+      action: "setPaused",
       paused: false,
       uid: this.workerUidCounter++,
     });
@@ -1354,8 +1410,8 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     this._isPaused = true;
     this.wsController?.hold();
     this.sendToWorker({
-      type: 'frametiming',
-      action: 'setPaused',
+      type: "frametiming",
+      action: "setPaused",
       paused: true,
       uid: this.workerUidCounter++,
     });
@@ -1380,17 +1436,21 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     this._pendingStepPause = false;
     this._suppressPlayPauseSync = false;
-    try { this.videoElement.pause(); } catch {}
+    try {
+      this.videoElement.pause();
+    } catch {}
   }
 
   frameStep(direction: -1 | 1, _seconds?: number): void {
     if (!this._isPaused) return;
     if (!this.videoElement) return;
-    this.log(`Frame step requested dir=${direction} paused=${this._isPaused} videoPaused=${this.videoElement.paused}`);
+    this.log(
+      `Frame step requested dir=${direction} paused=${this._isPaused} videoPaused=${this.videoElement.paused}`
+    );
     // Ensure worker is paused (in case pause didn't flow through)
     this.sendToWorker({
-      type: 'frametiming',
-      action: 'setPaused',
+      type: "frametiming",
+      action: "setPaused",
       paused: true,
       uid: this.workerUidCounter++,
     }).catch(() => {});
@@ -1403,19 +1463,19 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       this._pendingStepPause = true;
       try {
         const maybePromise = video.play();
-        if (maybePromise && typeof (maybePromise as Promise<void>).catch === 'function') {
+        if (maybePromise && typeof (maybePromise as Promise<void>).catch === "function") {
           (maybePromise as Promise<void>).catch(() => {});
         }
       } catch {}
 
-      if ('requestVideoFrameCallback' in video) {
+      if ("requestVideoFrameCallback" in video) {
         (video as any).requestVideoFrameCallback(() => this.finishStepPause());
       }
       // Failsafe: avoid staying in suppressed state if no frame is delivered
       this._stepPauseTimeout = setTimeout(() => this.finishStepPause(), 200);
     }
     this.sendToWorker({
-      type: 'framestep',
+      type: "framestep",
       direction,
       uid: this.workerUidCounter++,
     });
@@ -1429,11 +1489,11 @@ export class WebCodecsPlayerImpl extends BasePlayer {
 
     // Optimistically update current time for immediate UI feedback
     this._currentTime = time;
-    this.emit('timeupdate', this._currentTime);
+    this.emit("timeupdate", this._currentTime);
 
     // Flush worker queues
     this.sendToWorker({
-      type: 'seek',
+      type: "seek",
       seekTime: timeMs,
       uid: this.workerUidCounter++,
     });
@@ -1448,8 +1508,8 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       if (this.syncController?.isSeekActive(seekId)) {
         this.syncController.completeSeek(seekId);
         this.sendToWorker({
-          type: 'frametiming',
-          action: 'reset',
+          type: "frametiming",
+          action: "reset",
           uid: this.workerUidCounter++,
         });
       }
@@ -1465,17 +1525,17 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   }
 
   isLive(): boolean {
-    return this.streamType === 'live';
+    return this.streamType === "live";
   }
 
   jumpToLive(): void {
-    if (this.streamType === 'live' && this.wsController) {
+    if (this.streamType === "live" && this.wsController) {
       // For WebCodecs live, request fresh data from live edge
       // Send fast_forward to request 5 seconds of new data
       // Reference: rawws.js live catchup sends fast_forward
       const desiredBuffer = this.syncController?.getDesiredBuffer() ?? 2000;
       this.wsController.send({
-        type: 'fast_forward',
+        type: "fast_forward",
         ff_add: 5000, // Request 5 seconds ahead
       });
 
@@ -1485,7 +1545,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
         this.wsController.seek(serverTime * 1000, desiredBuffer);
       }
 
-      this.log('Jump to live: requested fresh data from server');
+      this.log("Jump to live: requested fresh data from server");
     }
   }
 
@@ -1536,7 +1596,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       return createTimeRanges([]);
     }
     const start = this._currentTime;
-    const end = start + (this._bufferMs / 1000);
+    const end = start + this._bufferMs / 1000;
     return createTimeRanges([[start, end]]);
   }
 
@@ -1580,7 +1640,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     if (!this.videoElement) return;
 
     // Check if requestVideoFrameCallback is available
-    if ('requestVideoFrameCallback' in HTMLVideoElement.prototype) {
+    if ("requestVideoFrameCallback" in HTMLVideoElement.prototype) {
       const callback = (_now: DOMHighResTimeStamp, metadata: VideoFrameCallbackMetadata) => {
         if (this.isDestroyed || !this.videoElement) return;
 
@@ -1591,10 +1651,10 @@ export class WebCodecsPlayerImpl extends BasePlayer {
       };
 
       this._frameCallbackId = (this.videoElement as any).requestVideoFrameCallback(callback);
-      this.log('requestVideoFrameCallback enabled for accurate frame timing');
+      this.log("requestVideoFrameCallback enabled for accurate frame timing");
     } else {
       // Fallback: Use video element's currentTime directly
-      this.log('requestVideoFrameCallback not available, using fallback timing');
+      this.log("requestVideoFrameCallback not available, using fallback timing");
     }
   }
 
@@ -1613,7 +1673,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
     }
 
     // Emit timeupdate event
-    this.emit('timeupdate', this._currentTime);
+    this.emit("timeupdate", this._currentTime);
 
     // Update frame stats
     this._framesDecoded = metadata.presentedFrames;
@@ -1624,7 +1684,7 @@ export class WebCodecsPlayerImpl extends BasePlayer {
    */
   private cancelFrameCallback(): void {
     if (this._frameCallbackId !== null && this.videoElement) {
-      if ('cancelVideoFrameCallback' in HTMLVideoElement.prototype) {
+      if ("cancelVideoFrameCallback" in HTMLVideoElement.prototype) {
         (this.videoElement as any).cancelVideoFrameCallback(this._frameCallbackId);
       }
       this._frameCallbackId = null;
@@ -1635,16 +1695,16 @@ export class WebCodecsPlayerImpl extends BasePlayer {
   // Logging
   // ============================================================================
 
-  private log(message: string, level: 'info' | 'warn' | 'error' = 'info'): void {
-    if (!this.debugging && level === 'info') return;
+  private log(message: string, level: "info" | "warn" | "error" = "info"): void {
+    if (!this.debugging && level === "info") return;
     console[level](`[WebCodecs] ${message}`);
   }
 }
 
 // Export for direct use
-export { WebSocketController } from './WebSocketController';
-export { SyncController } from './SyncController';
-export { JitterTracker, MultiTrackJitterTracker } from './JitterBuffer';
-export { getLatencyProfile, mergeLatencyProfile, LATENCY_PROFILES } from './LatencyProfiles';
-export { parseRawChunk, RawChunkParser } from './RawChunkParser';
-export * from './types';
+export { WebSocketController } from "./WebSocketController";
+export { SyncController } from "./SyncController";
+export { JitterTracker, MultiTrackJitterTracker } from "./JitterBuffer";
+export { getLatencyProfile, mergeLatencyProfile, LATENCY_PROFILES } from "./LatencyProfiles";
+export { parseRawChunk, RawChunkParser } from "./RawChunkParser";
+export * from "./types";