@mebius-io/web 0.4.1 → 0.4.3

package/dist/index.js

@@ -88,6 +88,20 @@ var DEFAULT_RTC_CONFIG = {
 };
 
 // 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;
@@ -100,6 +114,7 @@ var WhipPublishTransport = class {
     for (const track of stream.getTracks()) {
       pc.addTrack(track, stream);
     }
+    preferH264(pc);
     const offer = await pc.createOffer();
     await pc.setLocalDescription(offer);
     await waitForIceGathering(pc);
@@ -266,6 +281,8 @@ var HlsViewTransport = class {
     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;
   }
@@ -278,8 +295,10 @@ var HlsViewTransport = class {
   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;
@@ -295,7 +314,7 @@ var HlsViewTransport = class {
     if (!Hls.isSupported()) {
       throw mebiusError("CONNECTION_FAILED", "Scale playback is not supported in this browser.");
     }
-    const hls = new Hls();
+    const hls = new Hls({ maxLiveSyncPlaybackRate: 1.5 });
     this.hls = hls;
     hls.on(Hls.Events.ERROR, (_evt, data) => {
       if (data.fatal) this.bufferingCb?.();
@@ -305,6 +324,8 @@ var HlsViewTransport = class {
     this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
   }
   async stop() {
+    this.listeners?.abort();
+    this.listeners = null;
     this.hls?.destroy();
     this.hls = null;
     if (this.video) {
@@ -324,6 +345,40 @@ var HlsViewTransport = class {
 };
 
 // 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;
@@ -332,6 +387,8 @@ var FlvViewTransport = class {
     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;
   }
@@ -344,8 +401,11 @@ var FlvViewTransport = class {
   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 import("flv.js");
@@ -356,20 +416,38 @@ var FlvViewTransport = class {
     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();
@@ -418,7 +496,7 @@ function createViewCandidates(mode, signaling, deliveries = []) {
 }
 
 // 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() {
@@ -478,7 +556,7 @@ var QoeReporter = class {
     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;
@@ -612,6 +690,7 @@ function normalize(c, fallback) {
 // 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) {
@@ -623,13 +702,30 @@ var MebiusPlayer = class extends TypedEmitter {
     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) {
@@ -660,6 +756,12 @@ var MebiusPlayer = class extends TypedEmitter {
   }
   /** 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;
@@ -684,6 +786,7 @@ var MebiusPlayer = class extends TypedEmitter {
     });
     transport.onBuffering(() => {
       if (this.transport !== transport) return;
+      this.stalled = true;
       this.emit("buffering", void 0);
     });
   }