@mebius-io/web 0.3.0 → 0.4.1

package/dist/index.global.js

@@ -42764,6 +42764,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 +42794,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 +42806,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 +42815,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 +42844,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 +42883,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.video = null;
       this.endedCb = null;
       this.bufferingCb = null;
+      /** True when playback only started because the element had to be muted. */
+      this.mutedByPolicy = false;
     }
     onEnded(cb) {
       this.endedCb = cb;
@@ -42866,7 +42899,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       video.addEventListener("waiting", () => this.bufferingCb?.());
       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,14 +42912,14 @@ 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();
       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.hls?.destroy();
@@ -42916,6 +42949,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.video = null;
       this.endedCb = null;
       this.bufferingCb = null;
+      /** True when playback only started because the element had to be muted. */
+      this.mutedByPolicy = false;
     }
     onEnded(cb) {
       this.endedCb = cb;
@@ -42943,7 +42978,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       player.on(flvjs.Events.ERROR ?? "error", () => this.bufferingCb?.());
       player.attachMediaElement(video);
       player.load();
-      await Promise.resolve(player.play()).catch(() => void 0);
+      this.mutedByPolicy = (await playWithAutoplayFallback(video)).mutedByPolicy;
     }
     async stop() {
       if (this.player) {
@@ -42999,17 +43034,103 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     }
   }
 
+  // src/internal/telemetry.ts
+  var SDK_VERSION = "web/0.4.1";
+  var FLUSH_INTERVAL_MS = 15e3;
+  var MAX_BATCH = 64;
+  function describeDevice() {
+    const nav = typeof navigator === "undefined" ? void 0 : navigator;
+    const uaData = nav?.userAgentData;
+    return { os: uaData?.platform || nav?.platform || void 0, sdk: SDK_VERSION };
+  }
+  function describeNetwork() {
+    const conn = typeof navigator === "undefined" ? void 0 : navigator.connection;
+    return conn?.effectiveType ? { type: conn.effectiveType } : void 0;
+  }
+  var QoeReporter = class {
+    constructor(target, role, streamId, userId) {
+      this.target = target;
+      this.role = role;
+      this.streamId = streamId;
+      this.userId = userId;
+      this.sessionId = randomId();
+      this.buffer = [];
+      this.timer = null;
+      this.unloadHandler = null;
+    }
+    start() {
+      if (this.timer) return;
+      this.timer = setInterval(() => void this.flush(), FLUSH_INTERVAL_MS);
+      if (typeof window !== "undefined") {
+        this.unloadHandler = () => void this.flush(true);
+        window.addEventListener("pagehide", this.unloadHandler);
+      }
+    }
+    add(sample) {
+      this.buffer.push(sample);
+      if (this.buffer.length >= MAX_BATCH) void this.flush();
+    }
+    async stop() {
+      if (this.timer) clearInterval(this.timer);
+      this.timer = null;
+      if (this.unloadHandler && typeof window !== "undefined") {
+        window.removeEventListener("pagehide", this.unloadHandler);
+      }
+      this.unloadHandler = null;
+      await this.flush();
+    }
+    /** Send and clear the buffer. `beacon` uses sendBeacon, for page-unload flushes. */
+    async flush(beacon = false) {
+      if (!this.buffer.length) return;
+      const samples = this.buffer.splice(0, MAX_BATCH);
+      const body = JSON.stringify({
+        sessionId: this.sessionId,
+        streamId: this.streamId,
+        role: this.role,
+        userId: this.userId,
+        samples,
+        device: describeDevice(),
+        network: describeNetwork()
+      });
+      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" }));
+        } catch {
+        }
+        return;
+      }
+      try {
+        await fetch(this.target.url, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", Authorization: `Bearer ${this.target.token}` },
+          body,
+          keepalive: true
+        });
+      } catch {
+      }
+    }
+  };
+  function randomId() {
+    const c = typeof crypto === "undefined" ? void 0 : crypto;
+    if (c?.randomUUID) return c.randomUUID();
+    return `s-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+  }
+
   // src/broadcaster.ts
   var STATS_INTERVAL_MS = 2e3;
   var MebiusBroadcaster = class extends TypedEmitter {
     /** @internal */
-    constructor(signaling, options) {
+    constructor(signaling, options, telemetry = null, userId) {
       super();
       this.options = options;
+      this.telemetry = telemetry;
+      this.userId = userId;
       this.stream = null;
       this.facingMode = "user";
       this.statsTimer = null;
       this.started = false;
+      this.reporter = null;
       this.transport = createPublishTransport(signaling);
     }
     /** Begin broadcasting under the given stream id. */
@@ -43018,12 +43139,18 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       this.stream = await this.capture();
       await this.transport.start(streamId, this.stream);
       this.started = true;
+      if (this.telemetry) {
+        this.reporter = new QoeReporter(this.telemetry, "pub", streamId, this.userId);
+        this.reporter.start();
+      }
       this.startStats();
       this.emit("started", { streamId });
     }
     /** Stop broadcasting and release the camera/microphone. */
     async stop() {
       this.stopStats();
+      await this.reporter?.stop();
+      this.reporter = null;
       await this.transport.stop();
       this.stream?.getTracks().forEach((t) => t.stop());
       this.stream = null;
@@ -43079,7 +43206,14 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     startStats() {
       this.statsTimer = setInterval(async () => {
         const stats = await this.transport.getStats();
-        if (stats) this.emit("stats", stats);
+        if (!stats) return;
+        this.emit("stats", stats);
+        this.reporter?.add({
+          ts: Math.floor(Date.now() / 1e3),
+          bitrateKbps: stats.bitrateKbps,
+          fps: stats.framesPerSecond,
+          rttMs: stats.rttMs
+        });
       }, STATS_INTERVAL_MS);
     }
     stopStats() {
@@ -43097,12 +43231,15 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   var FIRST_FRAME_TIMEOUT_MS = 8e3;
   var MebiusPlayer = class extends TypedEmitter {
     /** @internal */
-    constructor(signaling, options = {}, deliveries = []) {
+    constructor(signaling, options = {}, deliveries = [], telemetry = null, userId) {
       super();
+      this.telemetry = telemetry;
+      this.userId = userId;
       this.transport = null;
       this.video = null;
       this.statsTimer = null;
       this.playing = false;
+      this.reporter = null;
       this.candidates = createViewCandidates(options.mode ?? "auto", signaling, deliveries);
     }
     /** Start playing `streamId` into the given video element or selector. */
@@ -43110,14 +43247,21 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
       if (this.playing) return;
       const video = resolveVideoElement(viewTarget);
       this.video = video;
+      const startedAtMs = Date.now();
       let lastError = null;
       for (const candidate of this.candidates) {
         try {
+          resetVideoElement(video);
           this.attach(candidate);
           await candidate.start(streamId, video);
           if (await hasFirstFrame(video)) {
             this.transport = candidate;
             this.playing = true;
+            if (this.telemetry) {
+              this.reporter = new QoeReporter(this.telemetry, "play", streamId, this.userId);
+              this.reporter.start();
+              this.reporter.add({ ts: Math.floor(Date.now() / 1e3), firstFrameMs: Date.now() - startedAtMs });
+            }
             this.startStats();
             this.emit("playing", { streamId });
             return;
@@ -43134,6 +43278,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     /** Stop playback and detach from the video element. */
     async stop() {
       this.stopStats();
+      await this.reporter?.stop();
+      this.reporter = null;
       await this.transport?.stop();
       this.transport = null;
       this.video = null;
@@ -43149,6 +43295,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
         if (this.transport !== transport) return;
         this.playing = false;
         this.stopStats();
+        void this.reporter?.stop();
+        this.reporter = null;
         this.emit("ended", void 0);
       });
       transport.onBuffering(() => {
@@ -43159,7 +43307,13 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     startStats() {
       this.statsTimer = setInterval(async () => {
         const stats = await this.transport?.getStats();
-        if (stats) this.emit("stats", stats);
+        if (!stats) return;
+        this.emit("stats", stats);
+        this.reporter?.add({
+          ts: Math.floor(Date.now() / 1e3),
+          bitrateKbps: stats.bitrateKbps,
+          fps: stats.framesPerSecond
+        });
       }, STATS_INTERVAL_MS2);
     }
     stopStats() {
@@ -43294,10 +43448,12 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
   // src/client.ts
   var MebiusClient = class extends TypedEmitter {
     /** @internal */
-    constructor(config2, token, deliveries = []) {
+    constructor(config2, token, deliveries = [], telemetry = null, userId) {
       super();
       this.token = token;
       this.deliveries = deliveries;
+      this.telemetry = telemetry;
+      this.userId = userId;
       this.expiryTimer = null;
       this.connected = false;
       this.signaling = new SignalingClient(config2.gateway, token);
@@ -43322,12 +43478,12 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
     /** Create a broadcaster bound to this connection. */
     createBroadcaster(options = {}) {
       this.assertConnected();
-      return new MebiusBroadcaster(this.signaling, options);
+      return new MebiusBroadcaster(this.signaling, options, this.telemetry, this.userId);
     }
     /** Create a player bound to this connection. */
     createPlayer(options = {}) {
       this.assertConnected();
-      return new MebiusPlayer(this.signaling, options, this.deliveries);
+      return new MebiusPlayer(this.signaling, options, this.deliveries, this.telemetry, this.userId);
     }
     /**
      * Create a monitor: a player tuned for watching a stream you are interacting
@@ -43342,7 +43498,7 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
      */
     createMonitor() {
       this.assertConnected();
-      return new MebiusPlayer(this.signaling, { mode: "low-latency" }, this.deliveries);
+      return new MebiusPlayer(this.signaling, { mode: "low-latency" }, this.deliveries, this.telemetry, this.userId);
     }
     /** Close the connection and release resources. */
     disconnect(reason) {
@@ -43375,7 +43531,8 @@ Schedule: ${scheduleItems.map((seg) => segmentToString(seg))} pos: ${this.timeli
         throw mebiusError("UNKNOWN", "Call Mebius.init() before Mebius.connect().");
       }
       if (!options.token) throw mebiusError("UNKNOWN", "Mebius.connect requires a token.");
-      const client = new MebiusClient(config, options.token, options.deliveries ?? []);
+      const telemetry = options.beaconToken && options.beaconUrl ? { token: options.beaconToken, url: options.beaconUrl } : null;
+      const client = new MebiusClient(config, options.token, options.deliveries ?? [], telemetry, options.userId);
       client.open();
       return client;
     },