@mebius-io/web 0.4.0 → 0.4.2

package/dist/index.global.js

@@ -42705,6 +42705,20 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   };
 
   // src/internal/publish-transport.ts
+  function preferH264(pc) {
+    const caps = RTCRtpSender.getCapabilities?.("video");
+    if (!caps?.codecs) return;
+    const h264 = caps.codecs.filter((c) => c.mimeType.toLowerCase() === "video/h264");
+    if (h264.length === 0) return;
+    const rest = caps.codecs.filter((c) => c.mimeType.toLowerCase() !== "video/h264");
+    for (const tr of pc.getTransceivers()) {
+      if (tr.sender.track?.kind !== "video") continue;
+      try {
+        tr.setCodecPreferences?.([...h264, ...rest]);
+      } catch {
+      }
+    }
+  }
   var WhipPublishTransport = class {
     constructor(signaling) {
       this.signaling = signaling;
@@ -42717,6 +42731,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       for (const track of stream.getTracks()) {
         pc.addTrack(track, stream);
       }
+      preferH264(pc);
       const offer = await pc.createOffer();
       await pc.setLocalDescription(offer);
       await waitForIceGathering(pc);
@@ -42764,6 +42779,28 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     }
   };
 
+  // src/internal/autoplay.ts
+  function isAutoplayBlocked(e) {
+    return typeof e === "object" && e !== null && e.name === "NotAllowedError";
+  }
+  async function playWithAutoplayFallback(video) {
+    video.playsInline = true;
+    try {
+      await video.play();
+      return { mutedByPolicy: false };
+    } catch (e) {
+      if (!isAutoplayBlocked(e) || video.muted) throw e;
+      video.muted = true;
+      await video.play();
+      return { mutedByPolicy: true };
+    }
+  }
+  function resetVideoElement(video) {
+    video.srcObject = null;
+    video.removeAttribute("src");
+    video.load();
+  }
+
   // src/internal/ll-view-transport.ts
   var WhepViewTransport = class {
     constructor(signaling) {
@@ -42772,6 +42809,10 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.resourceUrl = null;
       this.endedCb = null;
       this.bufferingCb = null;
+      /** Element this route attached a MediaStream to, so stop() can release it. */
+      this.video = null;
+      /** True when playback only started because the element had to be muted. */
+      this.mutedByPolicy = false;
     }
     onEnded(cb) {
       this.endedCb = cb;
@@ -42780,6 +42821,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.bufferingCb = cb;
     }
     async start(streamId, video) {
+      this.video = video;
       const pc = new RTCPeerConnection(DEFAULT_RTC_CONFIG);
       this.pc = pc;
       const remote = new MediaStream();
@@ -42788,7 +42830,9 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       pc.ontrack = (ev) => {
         remote.addTrack(ev.track);
         video.srcObject = remote;
-        void video.play().catch(() => {
+        void playWithAutoplayFallback(video).then((o) => {
+          this.mutedByPolicy = o.mutedByPolicy;
+        }).catch(() => {
         });
       };
       pc.onconnectionstatechange = () => {
@@ -42815,6 +42859,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.resourceUrl = null;
       this.pc?.close();
       this.pc = null;
+      if (this.video) resetVideoElement(this.video);
+      this.video = null;
     }
     async getStats() {
       if (!this.pc) return null;
@@ -42852,6 +42898,10 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.video = null;
       this.endedCb = null;
       this.bufferingCb = null;
+      /** Aborts this attempt's element listeners; see start(). */
+      this.listeners = null;
+      /** True when playback only started because the element had to be muted. */
+      this.mutedByPolicy = false;
     }
     onEnded(cb) {
       this.endedCb = cb;
@@ -42862,11 +42912,13 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     async start(streamId, video) {
       this.video = video;
       const url = this.deliveryPath ? this.signaling.deliveryUrl(this.deliveryPath) : this.signaling.scalePlaylistUrl(streamId);
-      video.addEventListener("ended", () => this.endedCb?.());
-      video.addEventListener("waiting", () => this.bufferingCb?.());
+      this.listeners = new AbortController();
+      const { signal } = this.listeners;
+      video.addEventListener("ended", () => this.endedCb?.(), { signal });
+      video.addEventListener("waiting", () => this.bufferingCb?.(), { signal });
       if (video.canPlayType("application/vnd.apple.mpegurl")) {
         video.src = url;
-        await video.play().catch(() => void 0);
+        this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
         return;
       }
       let mod;
@@ -42879,16 +42931,18 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       if (!Hls2.isSupported()) {
         throw mebiusError("CONNECTION_FAILED", "Scale playback is not supported in this browser.");
       }
-      const hls = new Hls2({ lowLatencyMode: true });
+      const hls = new Hls2({ maxLiveSyncPlaybackRate: 1.5 });
       this.hls = hls;
       hls.on(Hls2.Events.ERROR, (_evt, data) => {
         if (data.fatal) this.bufferingCb?.();
       });
       hls.loadSource(url);
       hls.attachMedia(video);
-      await video.play().catch(() => void 0);
+      this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
     }
     async stop() {
+      this.listeners?.abort();
+      this.listeners = null;
       this.hls?.destroy();
       this.hls = null;
       if (this.video) {
@@ -42908,6 +42962,40 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   };
 
   // src/internal/balanced-view-transport.ts
+  var LIVE_FLV_CONFIG = {
+    enableStashBuffer: false,
+    stashInitialSize: 128,
+    lazyLoad: false,
+    autoCleanupSourceBuffer: true,
+    autoCleanupMaxBackwardDuration: 30,
+    autoCleanupMinBackwardDuration: 10,
+    reuseRedirectedURL: true
+  };
+  var MAX_DRIFT_S = 2;
+  var EDGE_MARGIN_S = 0.4;
+  var AUDIO_RETRY_MS = 2500;
+  function stalledAtZero(video, ms) {
+    if (video.currentTime > 0) return Promise.resolve(false);
+    return new Promise((resolve) => {
+      const done = (stalled) => {
+        clearTimeout(timer);
+        video.removeEventListener("timeupdate", onTime);
+        resolve(stalled);
+      };
+      const onTime = () => {
+        if (video.currentTime > 0) done(false);
+      };
+      const timer = setTimeout(() => done(true), ms);
+      video.addEventListener("timeupdate", onTime);
+    });
+  }
+  function chaseLiveEdge(video) {
+    const ranges = video.buffered;
+    if (ranges.length === 0) return;
+    const edge = ranges.end(ranges.length - 1);
+    if (edge - video.currentTime <= MAX_DRIFT_S) return;
+    video.currentTime = edge - EDGE_MARGIN_S;
+  }
   var FlvViewTransport = class {
     constructor(signaling, deliveryPath) {
       this.signaling = signaling;
@@ -42916,6 +43004,10 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.video = null;
       this.endedCb = null;
       this.bufferingCb = null;
+      /** Aborts this attempt's element listeners; see start(). */
+      this.listeners = null;
+      /** True when playback only started because the element had to be muted. */
+      this.mutedByPolicy = false;
     }
     onEnded(cb) {
       this.endedCb = cb;
@@ -42926,8 +43018,11 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     async start(_streamId, video) {
       this.video = video;
       const url = this.signaling.deliveryUrl(this.deliveryPath);
-      video.addEventListener("ended", () => this.endedCb?.());
-      video.addEventListener("waiting", () => this.bufferingCb?.());
+      this.listeners = new AbortController();
+      const { signal } = this.listeners;
+      video.addEventListener("ended", () => this.endedCb?.(), { signal });
+      video.addEventListener("waiting", () => this.bufferingCb?.(), { signal });
+      video.addEventListener("timeupdate", () => chaseLiveEdge(video), { signal });
       let mod;
       try {
         mod = await Promise.resolve().then(() => __toESM(require_flv(), 1));
@@ -42938,20 +43033,38 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       if (!flvjs.isSupported()) {
         throw mebiusError("CONNECTION_FAILED", "Balanced playback is not supported in this browser.");
       }
-      const player = flvjs.createPlayer({ type: "flv", url, isLive: true });
+      this.attachPlayer(flvjs, video, url, true);
+      const firstPlay = playWithAutoplayFallback(video);
+      firstPlay.catch(() => void 0);
+      if (await stalledAtZero(video, AUDIO_RETRY_MS)) {
+        this.teardownPlayer();
+        this.attachPlayer(flvjs, video, url, false);
+        this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
+        return;
+      }
+      this.mutedByPolicy = (await firstPlay).mutedByPolicy;
+    }
+    attachPlayer(flvjs, video, url, withAudio) {
+      const player = flvjs.createPlayer(
+        { type: "flv", url, isLive: true, ...withAudio ? {} : { hasAudio: false } },
+        LIVE_FLV_CONFIG
+      );
       this.player = player;
       player.on(flvjs.Events.ERROR ?? "error", () => this.bufferingCb?.());
       player.attachMediaElement(video);
       player.load();
-      await Promise.resolve(player.play()).catch(() => void 0);
+    }
+    teardownPlayer() {
+      if (!this.player) return;
+      this.player.unload();
+      this.player.detachMediaElement();
+      this.player.destroy();
+      this.player = null;
     }
     async stop() {
-      if (this.player) {
-        this.player.unload();
-        this.player.detachMediaElement();
-        this.player.destroy();
-        this.player = null;
-      }
+      this.listeners?.abort();
+      this.listeners = null;
+      this.teardownPlayer();
       if (this.video) {
         this.video.removeAttribute("src");
         this.video.load();
@@ -43000,7 +43113,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   }
 
   // src/internal/telemetry.ts
-  var SDK_VERSION = "web/0.4.0";
+  var SDK_VERSION = "web/0.4.2";
   var FLUSH_INTERVAL_MS = 15e3;
   var MAX_BATCH = 64;
   function describeDevice() {
@@ -43060,7 +43173,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       if (beacon && typeof navigator !== "undefined" && navigator.sendBeacon) {
         const url = `${this.target.url}${this.target.url.includes("?") ? "&" : "?"}token=${encodeURIComponent(this.target.token)}`;
         try {
-          navigator.sendBeacon(url, new Blob([body], { type: "application/json" }));
+          navigator.sendBeacon(url, new Blob([body], { type: "text/plain" }));
         } catch {
         }
         return;
@@ -43216,6 +43329,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       let lastError = null;
       for (const candidate of this.candidates) {
         try {
+          resetVideoElement(video);
           this.attach(candidate);
           await candidate.start(streamId, video);
           if (await hasFirstFrame(video)) {