@mebius-io/web 0.4.0 → 0.4.2

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);
@@ -147,6 +162,28 @@ var WhipPublishTransport = class {
   }
 };
 
+// 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) {
@@ -155,6 +192,10 @@ var WhepViewTransport = class {
     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;
@@ -163,6 +204,7 @@ var WhepViewTransport = class {
     this.bufferingCb = cb;
   }
   async start(streamId, video) {
+    this.video = video;
     const pc = new RTCPeerConnection(DEFAULT_RTC_CONFIG);
     this.pc = pc;
     const remote = new MediaStream();
@@ -171,7 +213,9 @@ var WhepViewTransport = class {
     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 = () => {
@@ -198,6 +242,8 @@ var WhepViewTransport = class {
     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;
@@ -235,6 +281,10 @@ 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;
   }
   onEnded(cb) {
     this.endedCb = cb;
@@ -245,11 +295,13 @@ 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;
-      await video.play().catch(() => void 0);
+      this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
       return;
     }
     let mod;
@@ -262,16 +314,18 @@ var HlsViewTransport = class {
     if (!Hls.isSupported()) {
       throw mebiusError("CONNECTION_FAILED", "Scale playback is not supported in this browser.");
     }
-    const hls = new Hls({ lowLatencyMode: true });
+    const hls = new Hls({ maxLiveSyncPlaybackRate: 1.5 });
     this.hls = hls;
     hls.on(Hls.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) {
@@ -291,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;
@@ -299,6 +387,10 @@ 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;
   }
   onEnded(cb) {
     this.endedCb = cb;
@@ -309,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");
@@ -321,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();
-    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();
@@ -383,7 +496,7 @@ function createViewCandidates(mode, signaling, deliveries = []) {
 }
 
 // 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() {
@@ -443,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;
@@ -599,6 +712,7 @@ var MebiusPlayer = class extends TypedEmitter {
     let lastError = null;
     for (const candidate of this.candidates) {
       try {
+        resetVideoElement(video);
         this.attach(candidate);
         await candidate.start(streamId, video);
         if (await hasFirstFrame(video)) {