@mebius-io/web 0.4.1 → 0.4.2

package/README.md

@@ -55,12 +55,12 @@ external deps. `Mebius` becomes a global.
 ```
 
 File + full PHP example: [`standalone/`](./standalone/). Raw download:
-`https://raw.githubusercontent.com/russimobiledroidx/mebius-web-sdk/v0.4.1/packages/web/standalone/mebius.min.js`
+`https://raw.githubusercontent.com/russimobiledroidx/mebius-web-sdk/v0.4.2/packages/web/standalone/mebius.min.js`
 
 The drop-in file is not part of the npm package — `files` ships only `dist` — so it
 is fetched from the tag, and the tag must match the version you installed. For a
 page with a build step, or one that can use an import map, prefer the ESM path:
-`https://esm.sh/@mebius-io/web@0.4.1`.
+`https://esm.sh/@mebius-io/web@0.4.2`.
 
 ## Quick Start
 

package/dist/index.cjs

@@ -129,6 +129,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;
@@ -141,6 +155,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);
@@ -307,6 +322,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;
   }
@@ -319,8 +336,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;
@@ -336,7 +355,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?.();
@@ -346,6 +365,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) {
@@ -365,6 +386,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;
@@ -373,6 +428,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;
   }
@@ -385,8 +442,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");
@@ -397,20 +457,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();
@@ -459,7 +537,7 @@ function createViewCandidates(mode, signaling, deliveries = []) {
 }
 
 // src/internal/telemetry.ts
-var SDK_VERSION = "web/0.4.1";
+var SDK_VERSION = "web/0.4.2";
 var FLUSH_INTERVAL_MS = 15e3;
 var MAX_BATCH = 64;
 function describeDevice() {
@@ -519,7 +597,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;