@mebius-io/web 0.4.1 → 0.4.3

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);
@@ -42883,6 +42898,8 @@ 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;
     }
@@ -42895,8 +42912,10 @@ 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;
         this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
@@ -42912,7 +42931,7 @@ 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();
+      const hls = new Hls2({ maxLiveSyncPlaybackRate: 1.5 });
       this.hls = hls;
       hls.on(Hls2.Events.ERROR, (_evt, data) => {
         if (data.fatal) this.bufferingCb?.();
@@ -42922,6 +42941,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
     }
     async stop() {
+      this.listeners?.abort();
+      this.listeners = null;
       this.hls?.destroy();
       this.hls = null;
       if (this.video) {
@@ -42941,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;
@@ -42949,6 +43004,8 @@ 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;
     }
@@ -42961,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));
@@ -42973,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();
-      this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
+    }
+    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();
@@ -43035,7 +43113,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   }
 
   // src/internal/telemetry.ts
-  var SDK_VERSION = "web/0.4.1";
+  var SDK_VERSION = "web/0.4.3";
   var FLUSH_INTERVAL_MS = 15e3;
   var MAX_BATCH = 64;
   function describeDevice() {
@@ -43095,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;
@@ -43229,6 +43307,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   // src/player.ts
   var STATS_INTERVAL_MS2 = 2e3;
   var FIRST_FRAME_TIMEOUT_MS = 8e3;
+  var ELEMENT_OWNER = /* @__PURE__ */ new WeakMap();
   var MebiusPlayer = class extends TypedEmitter {
     /** @internal */
     constructor(signaling, options = {}, deliveries = [], telemetry = null, userId) {
@@ -43240,13 +43319,30 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.statsTimer = null;
       this.playing = false;
       this.reporter = null;
+      /** True between a `buffering` event and the element actually resuming. */
+      this.stalled = false;
+      /** Cancels element listeners bound for the lifetime of one play(). */
+      this.elementListeners = null;
       this.candidates = createViewCandidates(options.mode ?? "auto", signaling, deliveries);
     }
     /** Start playing `streamId` into the given video element or selector. */
     async play(streamId, viewTarget) {
       if (this.playing) return;
       const video = resolveVideoElement(viewTarget);
+      const previous = ELEMENT_OWNER.get(video);
+      if (previous && previous !== this) await previous.stop();
+      ELEMENT_OWNER.set(video, this);
       this.video = video;
+      this.elementListeners = new AbortController();
+      video.addEventListener(
+        "playing",
+        () => {
+          if (!this.stalled || !this.playing) return;
+          this.stalled = false;
+          this.emit("playing", { streamId });
+        },
+        { signal: this.elementListeners.signal }
+      );
       const startedAtMs = Date.now();
       let lastError = null;
       for (const candidate of this.candidates) {
@@ -43277,6 +43373,12 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     }
     /** Stop playback and detach from the video element. */
     async stop() {
+      this.elementListeners?.abort();
+      this.elementListeners = null;
+      if (this.video && ELEMENT_OWNER.get(this.video) === this) {
+        ELEMENT_OWNER.delete(this.video);
+      }
+      this.stalled = false;
       this.stopStats();
       await this.reporter?.stop();
       this.reporter = null;
@@ -43301,6 +43403,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       });
       transport.onBuffering(() => {
         if (this.transport !== transport) return;
+        this.stalled = true;
         this.emit("buffering", void 0);
       });
     }