@daydreamlive/browser 0.2.0 → 0.3.1

package/dist/index.cjs

@@ -196,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
@@ -368,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 {
@@ -410,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);
@@ -590,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");
@@ -601,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();
       }
@@ -716,6 +720,7 @@ var WHEPClient = class {
     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;
@@ -741,7 +746,9 @@ 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(),
@@ -840,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 {
@@ -924,7 +934,10 @@ var Player = class extends TypedEventEmitter {
   get reconnectInfo() {
     if (this.state !== "buffering") return null;
     const baseDelay = this.reconnectConfig.baseDelayMs ?? 200;
-    const delay = this.calculateReconnectDelay(this.reconnectAttempts - 1, baseDelay);
+    const delay = this.calculateReconnectDelay(
+      this.reconnectAttempts - 1,
+      baseDelay
+    );
     return {
       attempt: this.reconnectAttempts,
       maxAttempts: this.reconnectConfig.maxAttempts ?? 30,
@@ -1014,14 +1027,14 @@ 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
@@ -1066,6 +1079,7 @@ function createPlayer(whepUrl, options) {
     whepConfig: {
       iceServers: options?.iceServers,
       connectionTimeout: options?.connectionTimeout,
+      skipIceGathering: options?.skipIceGathering,
       onStats: options?.onStats,
       statsIntervalMs: options?.statsIntervalMs
     }
@@ -1120,18 +1134,12 @@ function createRenderer(options) {
     height: options.height,
     dpr: Math.min(2, options.dpr)
   };
-  let crossfadeMs = options.crossfadeMs;
   let keepalive = options.keepalive;
   let captureCanvas = null;
   let captureCtx = null;
   let offscreen = null;
   let offscreenCtx = null;
-  let crossfadeCanvas = null;
-  let crossfadeCtx = null;
   let currentSource = null;
-  let pendingSource = null;
-  let crossfadeStart = null;
-  let cleanupFn = void 0;
   let frameIndex = 0;
   let rectCache = /* @__PURE__ */ new WeakMap();
   function initCanvas() {
@@ -1168,25 +1176,6 @@ function createRenderer(options) {
       offscreen = off;
       offscreenCtx = offCtx;
     }
-    try {
-      const cfCanvas = new OffscreenCanvas(pxW, pxH);
-      crossfadeCanvas = cfCanvas;
-      const cfCtx = cfCanvas.getContext("2d", { alpha: true });
-      if (cfCtx) {
-        cfCtx.imageSmoothingEnabled = true;
-        crossfadeCtx = cfCtx;
-      }
-    } catch {
-      const cfCanvas = document.createElement("canvas");
-      cfCanvas.width = pxW;
-      cfCanvas.height = pxH;
-      const cfCtx = cfCanvas.getContext("2d", { alpha: true });
-      if (cfCtx) {
-        cfCtx.imageSmoothingEnabled = true;
-        crossfadeCanvas = cfCanvas;
-        crossfadeCtx = cfCtx;
-      }
-    }
     offscreenCtx.fillStyle = "#111";
     offscreenCtx.fillRect(0, 0, pxW, pxH);
     captureCtx.drawImage(
@@ -1206,11 +1195,8 @@ function createRenderer(options) {
       const v = source.element;
       return typeof v.readyState === "number" && v.readyState >= 2 && (v.videoWidth || 0) > 0 && (v.videoHeight || 0) > 0;
     }
-    if (source.kind === "canvas") {
-      const c = source.element;
-      return (c.width || 0) > 0 && (c.height || 0) > 0;
-    }
-    return true;
+    const c = source.element;
+    return (c.width || 0) > 0 && (c.height || 0) > 0;
   }
   function getDrawRect(el, fit) {
     const canvas = offscreenCtx?.canvas;
@@ -1242,46 +1228,19 @@ function createRenderer(options) {
     });
     return { dx, dy, dw, dh };
   }
-  function blitSource(source, alpha, timestamp) {
+  function blitSource(source) {
     if (!offscreenCtx) return;
     const ctx = offscreenCtx;
-    if (source.kind === "custom") {
-      if (alpha < 1 && crossfadeCtx && crossfadeCanvas) {
-        crossfadeCtx.clearRect(
-          0,
-          0,
-          crossfadeCtx.canvas.width,
-          crossfadeCtx.canvas.height
-        );
-        if (source.onFrame) source.onFrame(crossfadeCtx, timestamp);
-        const prev2 = ctx.globalAlpha;
-        try {
-          ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
-          ctx.drawImage(crossfadeCanvas, 0, 0);
-        } finally {
-          ctx.globalAlpha = prev2;
-        }
-      } else {
-        if (source.onFrame) source.onFrame(ctx, timestamp);
-      }
-      return;
-    }
     const el = source.element;
     const rect = getDrawRect(el, source.fit ?? "contain");
     if (!rect) return;
-    const prev = ctx.globalAlpha;
-    try {
-      ctx.globalAlpha = Math.max(0, Math.min(1, alpha));
-      ctx.drawImage(
-        el,
-        rect.dx,
-        rect.dy,
-        rect.dw,
-        rect.dh
-      );
-    } finally {
-      ctx.globalAlpha = prev;
-    }
+    ctx.drawImage(
+      el,
+      rect.dx,
+      rect.dy,
+      rect.dw,
+      rect.dh
+    );
   }
   initCanvas();
   return {
@@ -1296,57 +1255,18 @@ function createRenderer(options) {
     },
     isSourceReady,
     setActiveSource(source) {
-      if (cleanupFn) {
-        cleanupFn();
-        cleanupFn = void 0;
-      }
-      if (source === null) {
-        currentSource = null;
-        pendingSource = null;
-        crossfadeStart = null;
-        return;
-      }
-      pendingSource = source;
-      crossfadeStart = null;
-      if (source.kind === "custom" && source.onStart) {
-        const cleanup = source.onStart(offscreenCtx);
-        cleanupFn = cleanup || void 0;
-        return cleanupFn;
-      }
+      currentSource = source;
     },
-    renderFrame(timestamp) {
+    renderFrame(_timestamp) {
       const off = offscreenCtx;
       const cap = captureCtx;
       const capCanvas = captureCanvas;
       if (!off || !cap || !capCanvas) return;
-      if (pendingSource && isSourceReady(pendingSource)) {
-        if (crossfadeStart === null) crossfadeStart = timestamp;
-      }
       off.globalCompositeOperation = "source-over";
-      const willDraw = !!(pendingSource && isSourceReady(pendingSource) || currentSource);
-      if (willDraw) {
+      if (currentSource && isSourceReady(currentSource)) {
         off.fillStyle = "#000";
         off.fillRect(0, 0, off.canvas.width, off.canvas.height);
-      }
-      const fading = pendingSource && crossfadeStart !== null && currentSource;
-      if (fading) {
-        const t = Math.min(1, (timestamp - crossfadeStart) / crossfadeMs);
-        blitSource(currentSource, 1 - t, timestamp);
-        blitSource(pendingSource, t, timestamp);
-        if (t >= 1) {
-          currentSource = pendingSource;
-          pendingSource = null;
-          crossfadeStart = null;
-        }
-      } else if (pendingSource && !currentSource) {
-        if (isSourceReady(pendingSource)) {
-          blitSource(pendingSource, 1, timestamp);
-          currentSource = pendingSource;
-          pendingSource = null;
-          crossfadeStart = null;
-        }
-      } else if (currentSource) {
-        blitSource(currentSource, 1, timestamp);
+        blitSource(currentSource);
       }
       if (keepalive) {
         const w = off.canvas.width;
@@ -1396,34 +1316,17 @@ function createRenderer(options) {
         offscreen.width = pxW;
         offscreen.height = pxH;
       }
-      if (crossfadeCanvas instanceof HTMLCanvasElement) {
-        crossfadeCanvas.width = pxW;
-        crossfadeCanvas.height = pxH;
-      } else if (crossfadeCanvas instanceof OffscreenCanvas) {
-        crossfadeCanvas.width = pxW;
-        crossfadeCanvas.height = pxH;
-      }
       rectCache = /* @__PURE__ */ new WeakMap();
     },
-    setCrossfadeMs(ms) {
-      crossfadeMs = Math.max(0, ms);
-    },
     setKeepalive(enabled) {
       keepalive = enabled;
     },
     destroy() {
-      if (cleanupFn) {
-        cleanupFn();
-        cleanupFn = void 0;
-      }
       currentSource = null;
-      pendingSource = null;
       captureCanvas = null;
       captureCtx = null;
       offscreen = null;
       offscreenCtx = null;
-      crossfadeCanvas = null;
-      crossfadeCtx = null;
     }
   };
 }
@@ -1958,7 +1861,6 @@ var Compositor = class extends CompositorEventEmitter {
       2,
       options.dpr ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1)
     );
-    const crossfadeMs = options.crossfadeMs ?? 500;
     const keepalive = options.keepalive ?? true;
     this.registry = createRegistry({
       onRegister: (id, source) => this.emit("registered", id, source),
@@ -1968,7 +1870,6 @@ var Compositor = class extends CompositorEventEmitter {
       width,
       height,
       dpr,
-      crossfadeMs,
       keepalive
     });
     this.scheduler = createScheduler({