@daydreamlive/browser 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -31,6 +31,7 @@ __export(index_exports, {
   StreamNotFoundError: () => StreamNotFoundError,
   UnauthorizedError: () => UnauthorizedError,
   createBroadcast: () => createBroadcast2,
+  createCompositor: () => createCompositor,
   createPlayer: () => createPlayer2,
   livepeerResponseHandler: () => livepeerResponseHandler
 });
@@ -142,6 +143,7 @@ function preferH264(sdp) {
   return lines.join("\r\n");
 }
 var sharedRedirectCache = new LRURedirectCache();
+var DEFAULT_CONNECTION_TIMEOUT = 1e4;
 var WHIPClient = class {
   constructor(config) {
     this.pc = null;
@@ -157,6 +159,7 @@ var WHIPClient = class {
     this.iceServers = config.iceServers ?? DEFAULT_ICE_SERVERS;
     this.videoBitrate = config.videoBitrate ?? DEFAULT_VIDEO_BITRATE;
     this.audioBitrate = config.audioBitrate ?? DEFAULT_AUDIO_BITRATE;
+    this.connectionTimeout = config.connectionTimeout ?? DEFAULT_CONNECTION_TIMEOUT;
     this.maxFramerate = config.maxFramerate;
     this.onStats = config.onStats;
     this.statsIntervalMs = config.statsIntervalMs ?? 5e3;
@@ -193,7 +196,6 @@ var WHIPClient = class {
       await this.audioSender.replaceTrack(audioTrack);
     }
     this.setCodecPreferences();
-    await this.applyBitrateConstraints();
     const offer = await this.pc.createOffer({
       offerToReceiveAudio: false,
       offerToReceiveVideo: false
@@ -206,7 +208,7 @@ var WHIPClient = class {
     this.abortController = new AbortController();
     const timeoutId = this.timers.setTimeout(
       () => this.abortController?.abort(),
-      1e4
+      this.connectionTimeout
     );
     try {
       const fetchUrl = this.getUrlWithCachedRedirect();
@@ -365,6 +367,9 @@ var WHIPClient = class {
       this.abortController = null;
     }
     if (this.pc) {
+      this.pc.oniceconnectionstatechange = null;
+      this.pc.onconnectionstatechange = null;
+      this.pc.ontrack = null;
       try {
         this.pc.getTransceivers().forEach((t) => {
           try {
@@ -407,7 +412,9 @@ var WHIPClient = class {
     }
   }
   isConnected() {
-    return this.pc !== null && this.pc.connectionState === "connected";
+    if (!this.pc) return false;
+    const iceState = this.pc.iceConnectionState;
+    return iceState === "connected" || iceState === "completed";
   }
   getUrlWithCachedRedirect() {
     const originalUrl = new URL(this.url);
@@ -530,6 +537,16 @@ var Broadcast = class extends TypedEventEmitter {
   get stream() {
     return this.currentStream;
   }
+  get reconnectInfo() {
+    if (this.state !== "reconnecting") return null;
+    const baseDelay = this.reconnectConfig.baseDelayMs ?? 1e3;
+    const delay = baseDelay * Math.pow(2, this.reconnectAttempts - 1);
+    return {
+      attempt: this.reconnectAttempts,
+      maxAttempts: this.reconnectConfig.maxAttempts ?? 5,
+      delayMs: delay
+    };
+  }
   async connect() {
     try {
       const result = await this.whipClient.connect(this.currentStream);
@@ -551,6 +568,9 @@ var Broadcast = class extends TypedEventEmitter {
     await this.whipClient.disconnect();
     this.clearListeners();
   }
+  setMaxFramerate(fps) {
+    this.whipClient.setMaxFramerate(fps);
+  }
   async replaceStream(newStream) {
     if (!this.whipClient.isConnected()) {
       this.currentStream = newStream;
@@ -574,10 +594,10 @@ var Broadcast = class extends TypedEventEmitter {
   setupConnectionMonitoring() {
     const pc = this.whipClient.getPeerConnection();
     if (!pc) return;
-    pc.onconnectionstatechange = () => {
+    pc.oniceconnectionstatechange = () => {
       if (this.state === "ended") return;
-      const connState = pc.connectionState;
-      if (connState === "connected") {
+      const iceState = pc.iceConnectionState;
+      if (iceState === "connected" || iceState === "completed") {
         this.clearGraceTimeout();
         if (this.state === "reconnecting") {
           this.stateMachine.transition("live");
@@ -585,19 +605,19 @@ var Broadcast = class extends TypedEventEmitter {
         }
         return;
       }
-      if (connState === "disconnected") {
+      if (iceState === "disconnected") {
         this.clearGraceTimeout();
         this.whipClient.restartIce();
         this.disconnectedGraceTimeout = setTimeout(() => {
           if (this.state === "ended") return;
-          const currentState = pc.connectionState;
+          const currentState = pc.iceConnectionState;
           if (currentState === "disconnected") {
             this.scheduleReconnect();
           }
         }, 2e3);
         return;
       }
-      if (connState === "failed" || connState === "closed") {
+      if (iceState === "failed" || iceState === "closed") {
         this.clearGraceTimeout();
         this.scheduleReconnect();
       }
@@ -635,6 +655,11 @@ var Broadcast = class extends TypedEventEmitter {
     const baseDelay = this.reconnectConfig.baseDelayMs ?? 1e3;
     const delay = baseDelay * Math.pow(2, this.reconnectAttempts);
     this.reconnectAttempts++;
+    this.emit("reconnect", {
+      attempt: this.reconnectAttempts,
+      maxAttempts: this.reconnectConfig.maxAttempts ?? 5,
+      delayMs: delay
+    });
     this.reconnectTimeout = setTimeout(async () => {
       if (this.state === "ended") return;
       try {
@@ -658,6 +683,9 @@ function createBroadcast(options) {
     stream,
     reconnect,
     video,
+    audio,
+    iceServers,
+    connectionTimeout,
     onStats,
     statsIntervalMs,
     onResponse
@@ -667,8 +695,11 @@ function createBroadcast(options) {
     stream,
     reconnect,
     whipConfig: {
+      iceServers,
       videoBitrate: video?.bitrate,
+      audioBitrate: audio?.bitrate,
       maxFramerate: video?.maxFramerate,
+      connectionTimeout,
       onStats,
       statsIntervalMs,
       onResponse
@@ -677,6 +708,7 @@ function createBroadcast(options) {
 }
 
 // src/internal/WHEPClient.ts
+var DEFAULT_CONNECTION_TIMEOUT2 = 1e4;
 var WHEPClient = class {
   constructor(config) {
     this.pc = null;
@@ -687,6 +719,8 @@ var WHEPClient = class {
     this.iceGatheringTimer = null;
     this.url = config.url;
     this.iceServers = config.iceServers ?? DEFAULT_ICE_SERVERS;
+    this.connectionTimeout = config.connectionTimeout ?? DEFAULT_CONNECTION_TIMEOUT2;
+    this.skipIceGathering = config.skipIceGathering ?? true;
     this.onStats = config.onStats;
     this.statsIntervalMs = config.statsIntervalMs ?? 5e3;
     this.pcFactory = config.peerConnectionFactory ?? defaultPeerConnectionFactory;
@@ -712,11 +746,13 @@ var WHEPClient = class {
     };
     const offer = await this.pc.createOffer();
     await this.pc.setLocalDescription(offer);
-    await this.waitForIceGathering();
+    if (!this.skipIceGathering) {
+      await this.waitForIceGathering();
+    }
     this.abortController = new AbortController();
     const timeoutId = this.timers.setTimeout(
       () => this.abortController?.abort(),
-      1e4
+      this.connectionTimeout
     );
     try {
       const response = await this.fetch(this.url, {
@@ -811,6 +847,9 @@ var WHEPClient = class {
       this.abortController = null;
     }
     if (this.pc) {
+      this.pc.oniceconnectionstatechange = null;
+      this.pc.onconnectionstatechange = null;
+      this.pc.ontrack = null;
       try {
         this.pc.getTransceivers().forEach((t) => {
           try {
@@ -892,6 +931,19 @@ var Player = class extends TypedEventEmitter {
   get stream() {
     return this._stream;
   }
+  get reconnectInfo() {
+    if (this.state !== "buffering") return null;
+    const baseDelay = this.reconnectConfig.baseDelayMs ?? 200;
+    const delay = this.calculateReconnectDelay(
+      this.reconnectAttempts - 1,
+      baseDelay
+    );
+    return {
+      attempt: this.reconnectAttempts,
+      maxAttempts: this.reconnectConfig.maxAttempts ?? 30,
+      delayMs: delay
+    };
+  }
   async connect() {
     try {
       this._stream = await this.whepClient.connect();
@@ -975,19 +1027,24 @@ var Player = class extends TypedEventEmitter {
       this.stateMachine.transition("ended");
       return;
     }
-    const maxAttempts = this.reconnectConfig.maxAttempts ?? 10;
+    const maxAttempts = this.reconnectConfig.maxAttempts ?? 30;
     if (this.reconnectAttempts >= maxAttempts) {
       this.stateMachine.transition("ended");
       return;
     }
     this.clearReconnectTimeout();
     this.stateMachine.transition("buffering");
-    const baseDelay = this.reconnectConfig.baseDelayMs ?? 300;
+    const baseDelay = this.reconnectConfig.baseDelayMs ?? 200;
     const delay = this.calculateReconnectDelay(
       this.reconnectAttempts,
       baseDelay
     );
     this.reconnectAttempts++;
+    this.emit("reconnect", {
+      attempt: this.reconnectAttempts,
+      maxAttempts: this.reconnectConfig.maxAttempts ?? 30,
+      delayMs: delay
+    });
     this.reconnectTimeout = setTimeout(async () => {
       if (this.state === "ended") return;
       try {
@@ -1020,12 +1077,1052 @@ function createPlayer(whepUrl, options) {
     whepUrl,
     reconnect: options?.reconnect,
     whepConfig: {
+      iceServers: options?.iceServers,
+      connectionTimeout: options?.connectionTimeout,
+      skipIceGathering: options?.skipIceGathering,
       onStats: options?.onStats,
       statsIntervalMs: options?.statsIntervalMs
     }
   });
 }
 
+// src/internal/compositor/Registry.ts
+function createRegistry(events) {
+  const sources = /* @__PURE__ */ new Map();
+  return {
+    register(id, source) {
+      if (!id) throw new Error("Source id is required");
+      if (!source) throw new Error("Source is required");
+      sources.set(id, {
+        id,
+        source,
+        registeredAt: Date.now()
+      });
+      events?.onRegister?.(id, source);
+    },
+    unregister(id) {
+      const entry = sources.get(id);
+      if (!entry) return void 0;
+      sources.delete(id);
+      events?.onUnregister?.(id);
+      return entry.source;
+    },
+    get(id) {
+      return sources.get(id)?.source;
+    },
+    has(id) {
+      return sources.has(id);
+    },
+    list() {
+      return Array.from(sources.values()).map((entry) => ({
+        id: entry.id,
+        source: entry.source
+      }));
+    },
+    clear() {
+      const ids = Array.from(sources.keys());
+      sources.clear();
+      ids.forEach((id) => events?.onUnregister?.(id));
+    }
+  };
+}
+
+// src/internal/compositor/Renderer.ts
+function createRenderer(options) {
+  let size = {
+    width: options.width,
+    height: options.height,
+    dpr: Math.min(2, options.dpr)
+  };
+  let keepalive = options.keepalive;
+  let captureCanvas = null;
+  let captureCtx = null;
+  let offscreen = null;
+  let offscreenCtx = null;
+  let currentSource = null;
+  let frameIndex = 0;
+  let rectCache = /* @__PURE__ */ new WeakMap();
+  function initCanvas() {
+    const canvas = document.createElement("canvas");
+    canvas.style.display = "none";
+    const pxW = Math.round(size.width * size.dpr);
+    const pxH = Math.round(size.height * size.dpr);
+    const outW = Math.round(size.width);
+    const outH = Math.round(size.height);
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext("2d", {
+      alpha: false,
+      desynchronized: true
+    });
+    if (!ctx) throw new Error("2D context not available");
+    captureCanvas = canvas;
+    captureCtx = ctx;
+    try {
+      const off = new OffscreenCanvas(pxW, pxH);
+      offscreen = off;
+      const offCtx = off.getContext("2d", { alpha: false });
+      if (!offCtx) throw new Error("2D context not available for Offscreen");
+      offCtx.imageSmoothingEnabled = true;
+      offscreenCtx = offCtx;
+    } catch {
+      const off = document.createElement("canvas");
+      off.width = pxW;
+      off.height = pxH;
+      const offCtx = off.getContext("2d", { alpha: false });
+      if (!offCtx)
+        throw new Error("2D context not available for Offscreen fallback");
+      offCtx.imageSmoothingEnabled = true;
+      offscreen = off;
+      offscreenCtx = offCtx;
+    }
+    offscreenCtx.fillStyle = "#111";
+    offscreenCtx.fillRect(0, 0, pxW, pxH);
+    captureCtx.drawImage(
+      offscreen,
+      0,
+      0,
+      pxW,
+      pxH,
+      0,
+      0,
+      outW,
+      outH
+    );
+  }
+  function isSourceReady(source) {
+    if (source.kind === "video") {
+      const v = source.element;
+      return typeof v.readyState === "number" && v.readyState >= 2 && (v.videoWidth || 0) > 0 && (v.videoHeight || 0) > 0;
+    }
+    const c = source.element;
+    return (c.width || 0) > 0 && (c.height || 0) > 0;
+  }
+  function getDrawRect(el, fit) {
+    const canvas = offscreenCtx?.canvas;
+    if (!canvas) return null;
+    const canvasW = canvas.width;
+    const canvasH = canvas.height;
+    const sourceW = el.videoWidth ?? el.width;
+    const sourceH = el.videoHeight ?? el.height;
+    if (!sourceW || !sourceH) return null;
+    const cached = rectCache.get(el);
+    if (cached && cached.canvasW === canvasW && cached.canvasH === canvasH && cached.sourceW === sourceW && cached.sourceH === sourceH && cached.fit === fit) {
+      return { dx: cached.dx, dy: cached.dy, dw: cached.dw, dh: cached.dh };
+    }
+    const scale = fit === "cover" ? Math.max(canvasW / sourceW, canvasH / sourceH) : Math.min(canvasW / sourceW, canvasH / sourceH);
+    const dw = Math.floor(sourceW * scale);
+    const dh = Math.floor(sourceH * scale);
+    const dx = Math.floor((canvasW - dw) / 2);
+    const dy = Math.floor((canvasH - dh) / 2);
+    rectCache.set(el, {
+      canvasW,
+      canvasH,
+      sourceW,
+      sourceH,
+      dx,
+      dy,
+      dw,
+      dh,
+      fit
+    });
+    return { dx, dy, dw, dh };
+  }
+  function blitSource(source) {
+    if (!offscreenCtx) return;
+    const ctx = offscreenCtx;
+    const el = source.element;
+    const rect = getDrawRect(el, source.fit ?? "contain");
+    if (!rect) return;
+    ctx.drawImage(
+      el,
+      rect.dx,
+      rect.dy,
+      rect.dw,
+      rect.dh
+    );
+  }
+  initCanvas();
+  return {
+    get captureCanvas() {
+      return captureCanvas;
+    },
+    get offscreenCtx() {
+      return offscreenCtx;
+    },
+    get size() {
+      return { ...size };
+    },
+    isSourceReady,
+    setActiveSource(source) {
+      currentSource = source;
+    },
+    renderFrame(_timestamp) {
+      const off = offscreenCtx;
+      const cap = captureCtx;
+      const capCanvas = captureCanvas;
+      if (!off || !cap || !capCanvas) return;
+      off.globalCompositeOperation = "source-over";
+      if (currentSource && isSourceReady(currentSource)) {
+        off.fillStyle = "#000";
+        off.fillRect(0, 0, off.canvas.width, off.canvas.height);
+        blitSource(currentSource);
+      }
+      if (keepalive) {
+        const w = off.canvas.width;
+        const h = off.canvas.height;
+        const prevAlpha = off.globalAlpha;
+        const prevFill = off.fillStyle;
+        try {
+          off.globalAlpha = 0.08;
+          off.fillStyle = frameIndex % 2 ? "#101010" : "#0e0e0e";
+          off.fillRect(w - 16, h - 16, 16, 16);
+        } finally {
+          off.globalAlpha = prevAlpha;
+          off.fillStyle = prevFill;
+        }
+      }
+      frameIndex++;
+      cap.drawImage(
+        off.canvas,
+        0,
+        0,
+        off.canvas.width,
+        off.canvas.height,
+        0,
+        0,
+        capCanvas.width,
+        capCanvas.height
+      );
+    },
+    resize(width, height, dpr) {
+      const nextDpr = Math.min(2, dpr);
+      if (size.width === width && size.height === height && size.dpr === nextDpr) {
+        return;
+      }
+      size = { width, height, dpr: nextDpr };
+      const pxW = Math.round(width * nextDpr);
+      const pxH = Math.round(height * nextDpr);
+      const outW = Math.round(width);
+      const outH = Math.round(height);
+      if (captureCanvas) {
+        captureCanvas.width = outW;
+        captureCanvas.height = outH;
+      }
+      if (offscreen instanceof HTMLCanvasElement) {
+        offscreen.width = pxW;
+        offscreen.height = pxH;
+      } else if (offscreen instanceof OffscreenCanvas) {
+        offscreen.width = pxW;
+        offscreen.height = pxH;
+      }
+      rectCache = /* @__PURE__ */ new WeakMap();
+    },
+    setKeepalive(enabled) {
+      keepalive = enabled;
+    },
+    destroy() {
+      currentSource = null;
+      captureCanvas = null;
+      captureCtx = null;
+      offscreen = null;
+      offscreenCtx = null;
+    }
+  };
+}
+
+// src/internal/compositor/Scheduler.ts
+function createScheduler(options) {
+  let fps = Math.max(1, options.fps);
+  let sendFps = Math.max(1, options.sendFps);
+  const onFrame = options.onFrame;
+  const onSendFpsChange = options.onSendFpsChange;
+  let isRunning = false;
+  let lastFrameAt = 0;
+  let rafId = null;
+  let rafFallbackActive = false;
+  let videoFrameRequestId = null;
+  let videoFrameSource = null;
+  function getTimestamp() {
+    return typeof performance !== "undefined" ? performance.now() : Date.now();
+  }
+  function shouldRenderFrame() {
+    const now = getTimestamp();
+    const minIntervalMs = 1e3 / Math.max(1, sendFps);
+    if (lastFrameAt !== 0 && now - lastFrameAt < minIntervalMs) {
+      return false;
+    }
+    return true;
+  }
+  function renderIfNeeded() {
+    if (!shouldRenderFrame()) return;
+    const timestamp = getTimestamp();
+    onFrame(timestamp);
+    lastFrameAt = timestamp;
+  }
+  function scheduleWithRaf(isFallback) {
+    if (isFallback) {
+      if (rafFallbackActive) return;
+      rafFallbackActive = true;
+    }
+    const loop = () => {
+      renderIfNeeded();
+      rafId = requestAnimationFrame(loop);
+    };
+    rafId = requestAnimationFrame(loop);
+  }
+  function scheduleWithVideoFrame(videoEl) {
+    if (typeof videoEl.requestVideoFrameCallback !== "function") {
+      scheduleWithRaf(false);
+      return;
+    }
+    videoFrameSource = videoEl;
+    const cb = () => {
+      renderIfNeeded();
+      if (videoFrameSource === videoEl) {
+        try {
+          videoFrameRequestId = videoEl.requestVideoFrameCallback(cb);
+        } catch {
+        }
+      }
+    };
+    try {
+      videoFrameRequestId = videoEl.requestVideoFrameCallback(cb);
+    } catch {
+    }
+    scheduleWithRaf(true);
+  }
+  function cancelSchedulers() {
+    if (rafId != null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    rafFallbackActive = false;
+    if (videoFrameRequestId && videoFrameSource) {
+      try {
+        if (typeof videoFrameSource.cancelVideoFrameCallback === "function") {
+          videoFrameSource.cancelVideoFrameCallback(videoFrameRequestId);
+        }
+      } catch {
+      }
+    }
+    videoFrameRequestId = null;
+    videoFrameSource = null;
+  }
+  return {
+    get isRunning() {
+      return isRunning;
+    },
+    get fps() {
+      return fps;
+    },
+    get sendFps() {
+      return sendFps;
+    },
+    start(videoElement) {
+      if (isRunning) {
+        cancelSchedulers();
+      }
+      isRunning = true;
+      lastFrameAt = 0;
+      if (videoElement && typeof videoElement.requestVideoFrameCallback === "function") {
+        scheduleWithVideoFrame(videoElement);
+      } else {
+        scheduleWithRaf(false);
+      }
+    },
+    stop() {
+      isRunning = false;
+      cancelSchedulers();
+    },
+    setFps(newFps) {
+      fps = Math.max(1, newFps);
+    },
+    setSendFps(newSendFps) {
+      const next = Math.max(1, newSendFps);
+      if (sendFps === next) return;
+      sendFps = next;
+      onSendFpsChange?.(sendFps);
+    }
+  };
+}
+
+// src/internal/compositor/AudioManager.ts
+function createAudioManager(options) {
+  let outputStream = null;
+  let audioCtx = null;
+  let silentOsc = null;
+  let silentGain = null;
+  let audioDst = null;
+  let silentAudioTrack = null;
+  const externalAudioTrackIds = /* @__PURE__ */ new Set();
+  const externalAudioEndHandlers = /* @__PURE__ */ new Map();
+  let audioUnlockHandler = null;
+  let audioUnlockAttached = false;
+  let audioStateListenerAttached = false;
+  function ensureSilentAudioTrack() {
+    if (options.disableSilentAudio) return;
+    if (!outputStream) return;
+    const alreadyHasAudio = outputStream.getAudioTracks().length > 0;
+    if (alreadyHasAudio) return;
+    if (silentAudioTrack && silentAudioTrack.readyState === "live") {
+      try {
+        outputStream.addTrack(silentAudioTrack);
+      } catch {
+      }
+      return;
+    }
+    if (!audioCtx) {
+      const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+      if (!AudioContextClass) return;
+      audioCtx = new AudioContextClass({
+        sampleRate: 48e3
+      });
+      try {
+        audioCtx.resume().catch(() => {
+        });
+      } catch {
+      }
+      attachAudioCtxStateListener();
+    }
+    const ac = audioCtx;
+    if (!ac) return;
+    silentOsc = ac.createOscillator();
+    silentGain = ac.createGain();
+    audioDst = ac.createMediaStreamDestination();
+    silentGain.gain.setValueAtTime(1e-4, ac.currentTime);
+    silentOsc.frequency.setValueAtTime(440, ac.currentTime);
+    silentOsc.type = "sine";
+    silentOsc.connect(silentGain);
+    silentGain.connect(audioDst);
+    silentOsc.start();
+    const track = audioDst.stream.getAudioTracks()[0];
+    if (track) {
+      silentAudioTrack = track;
+      try {
+        outputStream.addTrack(track);
+      } catch {
+      }
+    }
+  }
+  function removeSilentAudioTrack() {
+    try {
+      if (outputStream && silentAudioTrack) {
+        try {
+          outputStream.removeTrack(silentAudioTrack);
+        } catch {
+        }
+      }
+      if (silentOsc) {
+        try {
+          silentOsc.stop();
+        } catch {
+        }
+        try {
+          silentOsc.disconnect();
+        } catch {
+        }
+      }
+      if (silentGain) {
+        try {
+          silentGain.disconnect();
+        } catch {
+        }
+      }
+      silentOsc = null;
+      silentGain = null;
+      audioDst = null;
+      silentAudioTrack = null;
+      if (audioCtx) {
+        try {
+          audioCtx.close();
+        } catch {
+        }
+      }
+      audioCtx = null;
+    } catch {
+    }
+  }
+  function rebuildSilentAudioTrack() {
+    if (options.disableSilentAudio) return;
+    if (!outputStream) return;
+    if (externalAudioTrackIds.size > 0) return;
+    if (silentAudioTrack) {
+      try {
+        outputStream.removeTrack(silentAudioTrack);
+      } catch {
+      }
+    }
+    if (silentOsc) {
+      try {
+        silentOsc.stop();
+      } catch {
+      }
+      try {
+        silentOsc.disconnect();
+      } catch {
+      }
+    }
+    if (silentGain) {
+      try {
+        silentGain.disconnect();
+      } catch {
+      }
+    }
+    silentOsc = null;
+    silentGain = null;
+    audioDst = null;
+    silentAudioTrack = null;
+    const ac = audioCtx;
+    if (!ac || ac.state !== "running") return;
+    attachAudioCtxStateListener();
+    silentOsc = ac.createOscillator();
+    silentGain = ac.createGain();
+    audioDst = ac.createMediaStreamDestination();
+    silentGain.gain.setValueAtTime(1e-4, ac.currentTime);
+    silentOsc.frequency.setValueAtTime(440, ac.currentTime);
+    silentOsc.type = "sine";
+    silentOsc.connect(silentGain);
+    silentGain.connect(audioDst);
+    silentOsc.start();
+    const track = audioDst.stream.getAudioTracks()[0];
+    if (track) {
+      silentAudioTrack = track;
+      try {
+        outputStream.addTrack(track);
+      } catch {
+      }
+    }
+  }
+  function attachAudioCtxStateListener() {
+    const ac = audioCtx;
+    if (!ac || audioStateListenerAttached) return;
+    const onStateChange = () => {
+      try {
+        if (audioCtx && audioCtx.state === "running") {
+          rebuildSilentAudioTrack();
+          cleanupAudioAutoUnlock();
+        }
+      } catch {
+      }
+    };
+    try {
+      ac.onstatechange = onStateChange;
+      audioStateListenerAttached = true;
+    } catch {
+    }
+  }
+  function setupAudioAutoUnlock() {
+    if (!options.autoUnlock) return;
+    if (typeof document === "undefined") return;
+    if (audioUnlockAttached) return;
+    const handler = () => {
+      unlock();
+    };
+    audioUnlockHandler = handler;
+    options.unlockEvents.forEach((evt) => {
+      try {
+        document.addEventListener(evt, handler, { capture: true });
+      } catch {
+      }
+    });
+    audioUnlockAttached = true;
+  }
+  function cleanupAudioAutoUnlock() {
+    if (!audioUnlockAttached) return;
+    if (typeof document !== "undefined" && audioUnlockHandler) {
+      options.unlockEvents.forEach((evt) => {
+        try {
+          document.removeEventListener(evt, audioUnlockHandler, {
+            capture: true
+          });
+        } catch {
+        }
+      });
+    }
+    audioUnlockAttached = false;
+    audioUnlockHandler = null;
+  }
+  async function unlock() {
+    try {
+      if (typeof window === "undefined") return false;
+      if (!audioCtx || audioCtx.state === "closed") {
+        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+        if (!AudioContextClass) return false;
+        audioCtx = new AudioContextClass({
+          sampleRate: 48e3
+        });
+      }
+      const ac = audioCtx;
+      if (!ac) return false;
+      try {
+        await ac.resume();
+      } catch {
+      }
+      attachAudioCtxStateListener();
+      if (ac.state === "running") {
+        rebuildSilentAudioTrack();
+        cleanupAudioAutoUnlock();
+        return true;
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+  setupAudioAutoUnlock();
+  return {
+    setOutputStream(stream) {
+      outputStream = stream;
+      ensureSilentAudioTrack();
+    },
+    addTrack(track) {
+      if (!outputStream) return;
+      try {
+        if (silentAudioTrack) {
+          try {
+            outputStream.removeTrack(silentAudioTrack);
+          } catch {
+          }
+        }
+        const exists = outputStream.getAudioTracks().some((t) => t.id === track.id);
+        if (!exists) {
+          outputStream.addTrack(track);
+        }
+        externalAudioTrackIds.add(track.id);
+        const onEnded = () => {
+          try {
+            if (!outputStream) return;
+            outputStream.getAudioTracks().forEach((t) => {
+              if (t.id === track.id) {
+                try {
+                  outputStream.removeTrack(t);
+                } catch {
+                }
+              }
+            });
+            externalAudioTrackIds.delete(track.id);
+            externalAudioEndHandlers.delete(track.id);
+            if (outputStream.getAudioTracks().length === 0) {
+              ensureSilentAudioTrack();
+            }
+          } catch {
+          }
+          try {
+            track.removeEventListener("ended", onEnded);
+          } catch {
+          }
+        };
+        track.addEventListener("ended", onEnded);
+        externalAudioEndHandlers.set(track.id, onEnded);
+      } catch {
+      }
+    },
+    removeTrack(trackId) {
+      if (!outputStream) return;
+      outputStream.getAudioTracks().forEach((t) => {
+        if (t.id === trackId) {
+          outputStream.removeTrack(t);
+        }
+      });
+      externalAudioTrackIds.delete(trackId);
+      const handler = externalAudioEndHandlers.get(trackId);
+      const tracks = outputStream.getAudioTracks();
+      const tr = tracks.find((t) => t.id === trackId);
+      if (tr && handler) {
+        try {
+          tr.removeEventListener("ended", handler);
+        } catch {
+        }
+      }
+      externalAudioEndHandlers.delete(trackId);
+      if (outputStream.getAudioTracks().length === 0) {
+        ensureSilentAudioTrack();
+      }
+    },
+    unlock,
+    destroy() {
+      cleanupAudioAutoUnlock();
+      try {
+        if (audioCtx && audioCtx.onstatechange) {
+          audioCtx.onstatechange = null;
+        }
+      } catch {
+      }
+      audioStateListenerAttached = false;
+      externalAudioEndHandlers.forEach((handler, id) => {
+        try {
+          const tr = outputStream?.getAudioTracks().find((t) => t.id === id);
+          if (tr) tr.removeEventListener("ended", handler);
+        } catch {
+        }
+      });
+      externalAudioEndHandlers.clear();
+      externalAudioTrackIds.clear();
+      removeSilentAudioTrack();
+      outputStream = null;
+    }
+  };
+}
+
+// src/internal/compositor/VisibilityHandler.ts
+function createVisibilityHandler(options) {
+  let isHidden = false;
+  let backgroundIntervalId = null;
+  let visibilityListener = null;
+  let started = false;
+  function onVisibilityChange() {
+    if (typeof document === "undefined") return;
+    const hidden = document.visibilityState === "hidden";
+    if (hidden && !isHidden) {
+      isHidden = true;
+      options.onHidden();
+      if (backgroundIntervalId == null) {
+        backgroundIntervalId = setInterval(() => {
+          options.backgroundRenderFn();
+        }, 1e3);
+      }
+    } else if (!hidden && isHidden) {
+      isHidden = false;
+      if (backgroundIntervalId != null) {
+        clearInterval(backgroundIntervalId);
+        backgroundIntervalId = null;
+      }
+      options.onVisible();
+    }
+  }
+  return {
+    get isHidden() {
+      return isHidden;
+    },
+    start() {
+      if (started) return;
+      if (typeof document === "undefined") return;
+      started = true;
+      visibilityListener = onVisibilityChange;
+      document.addEventListener("visibilitychange", visibilityListener);
+      onVisibilityChange();
+    },
+    stop() {
+      if (!started) return;
+      started = false;
+      if (typeof document !== "undefined" && visibilityListener) {
+        try {
+          document.removeEventListener("visibilitychange", visibilityListener);
+        } catch {
+        }
+        visibilityListener = null;
+      }
+      if (backgroundIntervalId != null) {
+        clearInterval(backgroundIntervalId);
+        backgroundIntervalId = null;
+      }
+      isHidden = false;
+    }
+  };
+}
+
+// src/Compositor.ts
+var CompositorEventEmitter = class {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(event, handler) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(handler);
+    return () => this.off(event, handler);
+  }
+  off(event, handler) {
+    this.listeners.get(event)?.delete(handler);
+  }
+  emit(event, ...args) {
+    this.listeners.get(event)?.forEach((handler) => {
+      handler(...args);
+    });
+  }
+  clearListeners() {
+    this.listeners.clear();
+  }
+};
+var Compositor = class extends CompositorEventEmitter {
+  constructor(options = {}) {
+    super();
+    this._activeId = null;
+    this.lastVisibleSendFps = null;
+    this.outputStream = null;
+    this.destroyed = false;
+    const width = options.width ?? 512;
+    const height = options.height ?? 512;
+    this._fps = Math.max(1, options.fps ?? 30);
+    this._sendFps = Math.max(1, options.sendFps ?? this._fps);
+    const dpr = Math.min(
+      2,
+      options.dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1)
+    );
+    const keepalive = options.keepalive ?? true;
+    this.registry = createRegistry({
+      onRegister: (id, source) => this.emit("registered", id, source),
+      onUnregister: (id) => this.emit("unregistered", id)
+    });
+    this.renderer = createRenderer({
+      width,
+      height,
+      dpr,
+      keepalive
+    });
+    this.scheduler = createScheduler({
+      fps: this._fps,
+      sendFps: this._sendFps,
+      onFrame: (timestamp) => this.renderer.renderFrame(timestamp),
+      onSendFpsChange: (fps) => {
+        this._sendFps = fps;
+        options.onSendFpsChange?.(fps);
+        this.applyVideoTrackConstraints();
+      }
+    });
+    this.audioManager = createAudioManager({
+      autoUnlock: options.autoUnlockAudio ?? true,
+      unlockEvents: options.unlockEvents && options.unlockEvents.length > 0 ? options.unlockEvents : ["pointerdown", "click", "touchstart", "keydown"],
+      disableSilentAudio: options.disableSilentAudio ?? false
+    });
+    this.visibilityHandler = createVisibilityHandler({
+      onHidden: () => {
+        if (this.lastVisibleSendFps == null) this.lastVisibleSendFps = this._sendFps;
+        if (this._sendFps !== 5) {
+          this.scheduler.setSendFps(5);
+          this._sendFps = 5;
+        }
+      },
+      onVisible: () => {
+        if (this.lastVisibleSendFps != null && this._sendFps !== this.lastVisibleSendFps) {
+          this.scheduler.setSendFps(this.lastVisibleSendFps);
+          this._sendFps = this.lastVisibleSendFps;
+        }
+        this.lastVisibleSendFps = null;
+      },
+      backgroundRenderFn: () => {
+        this.renderer.renderFrame(performance.now());
+        this.requestVideoTrackFrame();
+      }
+    });
+    this.outputStream = this.createOutputStream();
+    this.audioManager.setOutputStream(this.outputStream);
+    this.visibilityHandler.start();
+  }
+  // ============================================================================
+  // Source Registry
+  // ============================================================================
+  register(id, source) {
+    if (this.destroyed) return;
+    this.registry.register(id, source);
+  }
+  unregister(id) {
+    if (this.destroyed) return;
+    const wasActive = this._activeId === id;
+    this.registry.unregister(id);
+    if (wasActive) {
+      this._activeId = null;
+      this.renderer.setActiveSource(null);
+      this.scheduler.stop();
+      this.emit("activated", null, void 0);
+    }
+  }
+  get(id) {
+    return this.registry.get(id);
+  }
+  has(id) {
+    return this.registry.has(id);
+  }
+  list() {
+    return this.registry.list();
+  }
+  // ============================================================================
+  // Active Source Management
+  // ============================================================================
+  activate(id) {
+    if (this.destroyed) return;
+    const source = this.registry.get(id);
+    if (!source) {
+      throw new Error(`Source "${id}" not registered`);
+    }
+    this._activeId = id;
+    this.renderer.setActiveSource(source);
+    const videoEl = source.kind === "video" ? source.element : void 0;
+    this.scheduler.start(videoEl);
+    this.emit("activated", id, source);
+  }
+  deactivate() {
+    if (this.destroyed) return;
+    this._activeId = null;
+    this.renderer.setActiveSource(null);
+    this.scheduler.stop();
+    this.emit("activated", null, void 0);
+  }
+  get activeId() {
+    return this._activeId;
+  }
+  // ============================================================================
+  // Output Stream
+  // ============================================================================
+  get stream() {
+    return this.outputStream;
+  }
+  // ============================================================================
+  // Settings
+  // ============================================================================
+  resize(width, height, dpr) {
+    if (this.destroyed) return;
+    const effectiveDpr = Math.min(
+      2,
+      dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1)
+    );
+    this.renderer.resize(width, height, effectiveDpr);
+    this.recreateStream();
+  }
+  get size() {
+    return this.renderer.size;
+  }
+  setFps(fps) {
+    if (this.destroyed) return;
+    const next = Math.max(1, fps);
+    if (this._fps === next) return;
+    this._fps = next;
+    this.scheduler.setFps(next);
+    this.recreateStream();
+  }
+  get fps() {
+    return this._fps;
+  }
+  setSendFps(fps) {
+    if (this.destroyed) return;
+    const next = Math.max(1, fps);
+    if (this._sendFps === next) return;
+    this._sendFps = next;
+    this.scheduler.setSendFps(next);
+  }
+  get sendFps() {
+    return this._sendFps;
+  }
+  // ============================================================================
+  // Audio
+  // ============================================================================
+  addAudioTrack(track) {
+    if (this.destroyed) return;
+    this.audioManager.addTrack(track);
+  }
+  removeAudioTrack(trackId) {
+    if (this.destroyed) return;
+    this.audioManager.removeTrack(trackId);
+  }
+  unlockAudio() {
+    if (this.destroyed) return Promise.resolve(false);
+    return this.audioManager.unlock();
+  }
+  // ============================================================================
+  // Lifecycle
+  // ============================================================================
+  destroy() {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.scheduler.stop();
+    this.visibilityHandler.stop();
+    this.audioManager.destroy();
+    this.renderer.destroy();
+    this.registry.clear();
+    if (this.outputStream) {
+      try {
+        this.outputStream.getVideoTracks().forEach((t) => {
+          try {
+            t.stop();
+          } catch {
+          }
+        });
+      } catch {
+      }
+    }
+    this.outputStream = null;
+    this.clearListeners();
+  }
+  // ============================================================================
+  // Private Helpers
+  // ============================================================================
+  createOutputStream() {
+    const stream = this.renderer.captureCanvas.captureStream(this._fps);
+    try {
+      const vtrack = stream.getVideoTracks()[0];
+      if (vtrack && vtrack.contentHint !== void 0) {
+        vtrack.contentHint = "detail";
+      }
+    } catch {
+    }
+    return stream;
+  }
+  recreateStream() {
+    const newStream = this.createOutputStream();
+    const prev = this.outputStream;
+    if (prev && prev !== newStream) {
+      try {
+        prev.getAudioTracks().forEach((t) => {
+          try {
+            newStream.addTrack(t);
+          } catch {
+          }
+        });
+      } catch {
+      }
+    }
+    this.outputStream = newStream;
+    this.audioManager.setOutputStream(newStream);
+    this.applyVideoTrackConstraints();
+    if (prev && prev !== newStream) {
+      try {
+        prev.getVideoTracks().forEach((t) => {
+          try {
+            t.stop();
+          } catch {
+          }
+        });
+      } catch {
+      }
+    }
+  }
+  applyVideoTrackConstraints() {
+    try {
+      const track = this.outputStream?.getVideoTracks()[0];
+      const canvas = this.renderer.captureCanvas;
+      if (!track || !canvas) return;
+      const constraints = {
+        width: canvas.width,
+        height: canvas.height,
+        frameRate: Math.max(1, this._sendFps || this._fps)
+      };
+      try {
+        if (track.contentHint !== void 0) {
+          track.contentHint = "detail";
+        }
+      } catch {
+      }
+      track.applyConstraints(constraints).catch(() => {
+      });
+    } catch {
+    }
+  }
+  requestVideoTrackFrame() {
+    const track = this.outputStream?.getVideoTracks()[0];
+    if (track && typeof track.requestFrame === "function") {
+      try {
+        track.requestFrame();
+      } catch {
+      }
+    }
+  }
+};
+function createCompositor(options = {}) {
+  return new Compositor(options);
+}
+
 // src/index.ts
 var livepeerResponseHandler = (response) => ({
   whepUrl: response.headers.get("livepeer-playback-url") ?? void 0
@@ -1052,6 +2149,7 @@ function createPlayer2(whepUrl, options) {
   StreamNotFoundError,
   UnauthorizedError,
   createBroadcast,
+  createCompositor,
   createPlayer,
   livepeerResponseHandler
 });