@eventual-ai/mcap-viewer 0.0.0-stage → 0.1.0-alpha.0

package/dist/core.js

@@ -0,0 +1,534 @@
+import { B as M, H as D, M as x } from "./recording-tVYbg6KM.js";
+const w = "eventual.replay.v1.CompressedVideo";
+function m(r) {
+  if (!r || typeof r != "object" || !("data" in r) || !(r.data instanceof Uint8Array) || !("format" in r) || typeof r.format != "string" || !("keyframe" in r) || typeof r.keyframe != "boolean")
+    throw new Error("Invalid CompressedVideo message");
+  return r;
+}
+function b(r) {
+  return r.schemaName === w;
+}
+function g(r) {
+  const e = m(r.value).decode_order;
+  if (typeof e != "string" || !/^\d+$/.test(e))
+    throw new Error("Video packet is missing a valid decode_order");
+  return BigInt(e);
+}
+const v = /* @__PURE__ */ new WeakMap();
+function y(r, e) {
+  let t = v.get(e);
+  return t || (t = new E(r, e), v.set(e, t)), t;
+}
+class E {
+  constructor(e, t) {
+    this.channel = e, this.records = t;
+    const i = (s) => {
+      const o = e.metadata.get(s);
+      if (o === void 0 || !/^\d+$/.test(o))
+        throw new Error(`Missing or invalid ${s} video metadata`);
+      return BigInt(o);
+    };
+    if (this.start = i("video.decode_start"), this.end = i("video.decode_end"), this.lookahead = i("video.max_reorder_frames"), this.start > this.end) throw new Error("Invalid video decode interval");
+    this.contiguous = this.start - 1n;
+  }
+  channel;
+  records;
+  start;
+  end;
+  lookahead;
+  packets = /* @__PURE__ */ new Map();
+  keyframes = /* @__PURE__ */ new Map();
+  count = 0;
+  safeCount = 0;
+  contiguous;
+  update() {
+    for (; this.count < this.records.length; this.count++) {
+      const e = this.records[this.count], t = g(e);
+      if (t < this.start || t > this.end || this.packets.has(t))
+        throw new Error(
+          "Video decode_order is duplicated or outside the declared interval"
+        );
+      this.packets.set(t, e), m(e.value).keyframe && this.keyframes.set(t, e);
+    }
+    for (; this.packets.has(this.contiguous + 1n); ) this.contiguous++;
+  }
+  required(e) {
+    const t = g(e) + this.lookahead;
+    return t > this.end ? this.end : t;
+  }
+  target(e) {
+    let t = 0, i = this.records.length;
+    for (; t < i; ) {
+      const s = t + i >>> 1;
+      this.records[s].time <= e ? t = s + 1 : i = s;
+    }
+    return this.records[t - 1];
+  }
+  bufferedEnd(e, t) {
+    if (this.update(), t && this.contiguous !== this.end)
+      throw new Error("Incomplete video decode interval");
+    if (t) return e;
+    for (; this.safeCount < this.records.length && this.required(this.records[this.safeCount]) <= this.contiguous; )
+      this.safeCount++;
+    const i = this.records[this.safeCount];
+    return i && i.time <= e ? i.time - 1n : e;
+  }
+  snapshot(e) {
+    this.update();
+    const t = this.target(e);
+    if (!t) return [];
+    const i = g(t);
+    let s;
+    for (const [o, c] of this.keyframes)
+      o <= i && c.time <= e && (s === void 0 || o > s) && (s = o);
+    if (s === void 0)
+      throw new Error("MCAP is missing the preceding video keyframe");
+    return this.range(s, this.required(t));
+  }
+  after(e, t) {
+    this.update();
+    const i = this.target(e);
+    return i ? this.range(t + 1n, this.required(i)) : [];
+  }
+  range(e, t) {
+    if (t > this.contiguous)
+      throw new Error("Video decode dependencies are not buffered");
+    const i = [];
+    for (let s = e; s <= t; s++)
+      i.push(this.packets.get(s));
+    return i;
+  }
+}
+function k(r, e) {
+  const t = [];
+  for (const i of r.byTopic.values()) {
+    const s = i[0]?.channel;
+    s && b(s) && t.push(...y(s, i).snapshot(e));
+  }
+  return t;
+}
+const T = {
+  now: () => performance.now(),
+  request: (r) => requestAnimationFrame(r),
+  cancel: (r) => cancelAnimationFrame(r)
+};
+class q {
+  constructor(e, t = {}, i = T) {
+    this.recording = e, this.scheduler = i, this.time = e.start, this.subscribe(t), this.unsubscribeRecording = e.subscribe?.(() => this.onLoad());
+  }
+  recording;
+  scheduler;
+  time;
+  speed = 1;
+  playing = !1;
+  status = "paused";
+  closed = !1;
+  generation = 0;
+  frame;
+  anchorTime = 0n;
+  anchorWall = 0;
+  waitingForData = !1;
+  seekController;
+  video = /* @__PURE__ */ new Map();
+  submitted = /* @__PURE__ */ new Map();
+  unsubscribeRecording;
+  listeners = /* @__PURE__ */ new Set();
+  /** Subscribe a view or renderer to the shared playback clock and selected topics. */
+  subscribe(e, { topics: t } = {}) {
+    if (this.closed) throw new Error("Player is closed");
+    const i = {
+      listener: e,
+      topics: t ? new Set(t) : void 0
+    };
+    return this.listeners.add(i), () => {
+      this.listeners.delete(i);
+    };
+  }
+  emit() {
+    const e = {
+      time: this.time,
+      status: this.status,
+      playing: this.playing,
+      speed: this.speed
+    };
+    for (const { listener: t } of this.listeners) t.onState?.(e);
+  }
+  publish(e) {
+    this.submitted.set(e.channel.topic, g(e));
+    for (const { listener: t, topics: i } of this.listeners) {
+      if (this.closed) return;
+      (!i || i.has(e.channel.topic)) && t.onMessage?.(e.channel, e.time, e.value);
+    }
+  }
+  cancelFrame() {
+    this.frame !== void 0 && this.scheduler.cancel(this.frame), this.frame = void 0;
+  }
+  fail(e) {
+    this.generation++, this.seekController?.abort(), this.waitingForData = !1, this.playing = !1, this.status = "error", this.cancelFrame();
+    for (const { listener: t } of this.listeners)
+      t.onError?.(
+        e instanceof Error ? e : new Error(String(e))
+      );
+    this.emit();
+  }
+  availableEnd() {
+    for (const t of this.recording.byTopic.values()) {
+      const i = t[0]?.channel;
+      i && b(i) && !this.video.has(i.topic) && this.video.set(i.topic, y(i, t));
+    }
+    let e = this.recording.complete === !1 ? this.recording.bufferedEnd ?? this.recording.start - 1n : this.recording.end;
+    for (const t of this.video.values())
+      e = t.bufferedEnd(e, this.recording.complete !== !1);
+    return e;
+  }
+  endBuffered() {
+    return this.recording.complete !== !1 || this.recording.bounds !== void 0 && this.availableEnd() >= this.recording.end;
+  }
+  onLoad() {
+    if (this.closed) return;
+    if (this.recording.error) {
+      this.fail(this.recording.error);
+      return;
+    }
+    let e;
+    try {
+      e = this.availableEnd();
+    } catch (t) {
+      this.fail(t);
+      return;
+    }
+    this.waitingForData && this.playing && (this.recording.complete !== !1 || e !== void 0 && e > this.time) && (this.waitingForData = !1, this.anchorTime = this.time, this.anchorWall = this.scheduler.now(), this.status = "playing", this.frame = this.scheduler.request(() => {
+      this.tick();
+    })), this.emit();
+  }
+  waitForTime(e, t) {
+    return this.recording.error ? Promise.reject(this.recording.error) : this.availableEnd() >= e || this.recording.complete !== !1 ? Promise.resolve() : new Promise((i, s) => {
+      const o = () => {
+        a?.(), t.removeEventListener("abort", n);
+      }, c = () => {
+        if (this.recording.error)
+          o(), s(this.recording.error);
+        else
+          try {
+            (this.availableEnd() >= e || this.recording.complete !== !1) && (o(), i());
+          } catch (l) {
+            o(), s(l);
+          }
+      }, n = () => {
+        o(), s(t.reason);
+      }, a = this.recording.subscribe?.(c);
+      t.addEventListener("abort", n, { once: !0 }), t.aborted ? n() : c();
+    });
+  }
+  async endSnapshot(e) {
+    await Promise.all(
+      [...this.listeners].map(
+        ({ listener: t }) => t.onSnapshotEnd?.(e)
+      )
+    );
+  }
+  async seek(e) {
+    if (this.closed) return;
+    const t = ++this.generation;
+    this.seekController?.abort();
+    const i = new AbortController();
+    this.seekController = i, this.waitingForData = !1, this.cancelFrame(), this.time = e < this.recording.start ? this.recording.start : e > this.recording.end && (this.recording.complete !== !1 || this.recording.bounds !== void 0) ? this.recording.end : e, this.status = "buffering", this.emit();
+    try {
+      if (this.recording.error) throw this.recording.error;
+      if (this.recording.complete === !1 && this.availableEnd() < this.time && await this.waitForTime(this.time, i.signal), t !== this.generation || this.closed) return;
+      this.time > this.recording.end && (this.time = this.recording.end), this.submitted.clear();
+      for (const { listener: s } of this.listeners) s.onSnapshotStart?.();
+      for (const s of k(this.recording, this.time)) {
+        if (t !== this.generation || this.closed) return;
+        this.publish(s);
+      }
+      if (await this.endSnapshot(!this.playing), t !== this.generation || this.closed) return;
+      this.anchorTime = this.time, this.anchorWall = this.scheduler.now(), this.status = this.playing ? "playing" : "paused", this.emit(), this.playing && (this.frame = this.scheduler.request(() => {
+        this.tick();
+      }));
+    } catch (s) {
+      t === this.generation && !this.closed && this.fail(s);
+    }
+  }
+  play() {
+    if (!this.closed)
+      return this.playing = !0, this.seek(
+        this.endBuffered() && this.time >= this.recording.end ? this.recording.start : this.time
+      );
+  }
+  pause() {
+    if (!this.closed)
+      return this.playing = !1, this.seek(this.time);
+  }
+  setSpeed(e) {
+    if (!this.closed) {
+      if (!Number.isFinite(e) || e <= 0)
+        throw new Error("Playback speed must be positive");
+      this.speed = e, this.anchorTime = this.time, this.anchorWall = this.scheduler.now(), this.emit();
+    }
+  }
+  async tick() {
+    if (this.frame = void 0, this.closed || !this.playing) return;
+    const e = this.generation, t = this.anchorTime + BigInt(
+      Math.round((this.scheduler.now() - this.anchorWall) * 1e6 * this.speed)
+    );
+    try {
+      const i = this.availableEnd(), s = i < this.recording.end ? i : this.recording.end;
+      this.time = t > s ? s : t;
+      for (const [o, c] of this.video) {
+        const n = this.submitted.get(o), a = n === void 0 ? c.snapshot(this.time) : c.after(this.time, n);
+        for (const l of a)
+          if (this.publish(l), e !== this.generation || this.closed) return;
+      }
+      if (this.emit(), this.time === this.recording.end && this.endBuffered()) {
+        if (this.playing = !1, await this.endSnapshot(!0), e !== this.generation || this.closed) return;
+        this.status = "ended";
+      } else this.recording.complete === !1 && t >= s && (this.status = "buffering", this.waitingForData = !0);
+      this.emit(), this.playing && !this.waitingForData && (this.frame = this.scheduler.request(() => {
+        this.tick();
+      }));
+    } catch (i) {
+      e === this.generation && !this.closed && this.fail(i);
+    }
+  }
+  close() {
+    this.closed = !0, this.playing = !1, this.generation++, this.seekController?.abort(), this.unsubscribeRecording?.(), this.waitingForData = !1, this.cancelFrame(), this.listeners.clear();
+  }
+}
+function S(r) {
+  let e = !1, t;
+  for (let i = 0; i + 3 < r.length; i++) {
+    if (r[i] !== 0 || r[i + 1] !== 0) continue;
+    let s = -1;
+    if (r[i + 2] === 1 ? s = i + 3 : r[i + 2] === 0 && r[i + 3] === 1 && (s = i + 4), s < 0 || s >= r.length) continue;
+    const o = r[s] & 31;
+    o === 5 && (e = !0), o === 7 && s + 3 < r.length && (t = `avc1.${Array.from(r.slice(s + 1, s + 4), (c) => c.toString(16).padStart(2, "0")).join("")}`), i = s;
+  }
+  return { keyframe: e, codec: t };
+}
+function F(r, e) {
+  if (e === "h264") return S(r);
+  if (e !== "h265") throw new Error(`Unsupported video format: ${e}`);
+  let t = !1, i;
+  const s = [];
+  let o = -1;
+  for (let n = 0; n + 3 < r.length; n++) {
+    if (r[n] !== 0 || r[n + 1] !== 0) continue;
+    const a = r[n + 2] === 1 ? 3 : r[n + 2] === 0 && r[n + 3] === 1 ? 4 : 0;
+    a && (o >= 0 && s.push(r.subarray(o, n)), o = n + a, n = o - 1);
+  }
+  o >= 0 && s.push(r.subarray(o));
+  const c = /* @__PURE__ */ new Set();
+  for (const n of s) {
+    const a = n[0] >> 1 & 63;
+    if (a >= 16 && a <= 21 && (t = !0), a >= 32 && a <= 34 && c.add(a), a !== 33) continue;
+    const l = [];
+    for (let d = 2; d < n.length; d++)
+      d >= 4 && n[d] === 3 && n[d - 1] === 0 && n[d - 2] === 0 || l.push(n[d]);
+    if (l.length < 13) continue;
+    const h = l[1];
+    let f = 0;
+    for (let d = 0; d < 32; d++)
+      f += (l[2 + (d >> 3)] >> 7 - (d & 7) & 1) * 2 ** d;
+    const u = l.slice(6, 12);
+    for (; u.length && u.at(-1) === 0; ) u.pop();
+    const p = u.map((d) => d.toString(16).toUpperCase().padStart(2, "0")).join(".");
+    i = `hvc1.${["", "A", "B", "C"][h >> 6]}${h & 31}.${f.toString(16).toUpperCase()}.${h & 32 ? "H" : "L"}${l[12]}${p ? `.${p}` : ""}`;
+  }
+  return c.size !== 3 && (i = void 0), { keyframe: t, codec: i };
+}
+class C {
+  constructor(e, t) {
+    this.output = e, this.error = t;
+  }
+  output;
+  error;
+  decoder;
+  origin = 0n;
+  times = /* @__PURE__ */ new Map();
+  generation = 0;
+  initializing;
+  flushing;
+  pending = [];
+  failed = !1;
+  decode(e, t, i = "h264") {
+    if (!this.failed)
+      try {
+        const s = F(t, i);
+        if (!this.decoder && !this.initializing) {
+          if (!s.keyframe || !s.codec)
+            throw new Error(
+              `${i === "h265" ? "HEVC" : "H.264"} playback must begin at a keyframe with codec headers`
+            );
+          if (typeof VideoDecoder > "u")
+            throw new Error(
+              "This browser does not support WebCodecs video decoding"
+            );
+          this.origin = e;
+          const n = this.generation, a = { codec: s.codec, optimizeForLatency: !0 }, l = () => {
+            if (n === this.generation) {
+              this.decoder = new VideoDecoder({
+                output: (h) => {
+                  if (n !== this.generation) {
+                    h.close();
+                    return;
+                  }
+                  const f = this.times.get(h.timestamp);
+                  if (this.times.delete(h.timestamp), f === void 0) {
+                    h.close();
+                    return;
+                  }
+                  this.output(h, f);
+                },
+                error: (h) => {
+                  n === this.generation && this.reject(h, a.codec);
+                }
+              }), this.decoder.configure(a);
+              for (const h of this.pending.splice(0))
+                this.decoder.decode(h);
+            }
+          };
+          typeof VideoDecoder.isConfigSupported == "function" ? this.initializing = VideoDecoder.isConfigSupported(a).then((h) => {
+            if (n === this.generation) {
+              if (!h.supported)
+                throw new Error(
+                  `This browser or device does not support ${i === "h265" ? "HEVC" : "H.264"} video decoding (${a.codec})`
+                );
+              l();
+            }
+          }).catch((h) => {
+            n === this.generation && this.reject(h, a.codec);
+          }) : l();
+        }
+        const o = Number((e - this.origin) / 1000n);
+        this.times.set(o, e);
+        const c = new EncodedVideoChunk({
+          type: s.keyframe ? "key" : "delta",
+          timestamp: o,
+          data: Uint8Array.from(t)
+        });
+        this.decoder ? this.decoder.decode(c) : this.pending.push(c);
+      } catch (s) {
+        this.error(
+          s instanceof Error ? s : new Error("Video decode failed")
+        );
+      }
+  }
+  reject(e, t) {
+    this.failed = !0, this.pending = [], this.times.clear(), this.error(
+      new Error(
+        `Video decoding failed (${t}): ${e instanceof Error ? e.message : String(e)}`
+      )
+    );
+  }
+  flush() {
+    if (this.flushing) return this.flushing;
+    const e = this.generation;
+    return this.flushing = (async () => {
+      this.initializing && await this.initializing;
+      const t = this.decoder;
+      if (!(e !== this.generation || !t || t.state !== "configured"))
+        try {
+          await t.flush();
+        } catch (i) {
+          e === this.generation && this.error(
+            i instanceof Error ? i : new Error("Video decode failed")
+          );
+        }
+    })(), this.flushing;
+  }
+  reset() {
+    this.generation++, this.decoder && this.decoder.state !== "closed" && this.decoder.close(), this.decoder = void 0, this.initializing = void 0, this.flushing = void 0, this.pending = [], this.failed = !1, this.times.clear();
+  }
+}
+class V {
+  constructor(e, t = {}) {
+    this.canvas = e, this.options = t, this.imageTopic = t.imageTopic, this.video = new C(
+      (i, s) => this.present(i, s),
+      (i) => this.onError?.(i)
+    );
+  }
+  canvas;
+  options;
+  onFrame;
+  onError;
+  image;
+  frameTime = 0n;
+  presentationTime;
+  frames = /* @__PURE__ */ new Map();
+  latestInputTime;
+  presentationFloor = 0n;
+  requested;
+  generation = 0;
+  snapshot = !1;
+  imageTopic;
+  video;
+  onMessage(e, t, i) {
+    try {
+      if (e.schemaName !== w || (this.imageTopic ??= e.topic, this.imageTopic !== e.topic)) return;
+      const s = m(i);
+      (this.presentationTime === void 0 || t <= this.presentationTime) && (this.latestInputTime === void 0 || t > this.latestInputTime) && (this.latestInputTime = t), this.video.decode(t, s.data, s.format), s.decode_order === e.metadata.get("video.decode_end") && this.video.flush();
+    } catch (s) {
+      this.onError?.(s instanceof Error ? s : new Error(String(s)));
+    }
+  }
+  onState(e) {
+    this.presentationTime = e.time, e.status !== "buffering" && this.selectFrame();
+  }
+  onSnapshotStart() {
+    this.resetSnapshot(), this.snapshot = !0;
+  }
+  async onSnapshotEnd(e) {
+    const t = this.generation;
+    this.presentationFloor = this.latestInputTime ?? 0n, e && await this.video.flush(), t === this.generation && (this.snapshot = !1, (this.latestInputTime === void 0 || e && (!this.image || this.frameTime < this.presentationFloor)) && this.clearCanvas(), this.image && this.frameTime >= this.presentationFloor && (this.render(), this.onFrame?.(this.frameTime)));
+  }
+  present(e, t) {
+    if (this.image && t < this.frameTime) {
+      e.close();
+      return;
+    }
+    this.frames.get(t)?.close(), this.frames.set(t, e), this.selectFrame();
+  }
+  selectFrame() {
+    let e;
+    for (const i of this.frames.keys())
+      (this.presentationTime === void 0 || i <= this.presentationTime) && (e === void 0 || i > e) && (e = i);
+    if (e === void 0) return;
+    const t = this.frames.get(e);
+    this.frames.delete(e);
+    for (const [i, s] of this.frames)
+      i < e && (s.close(), this.frames.delete(i));
+    this.image?.close(), this.image = t, this.frameTime = e, !this.snapshot && e >= this.presentationFloor && (this.render(), this.onFrame?.(e));
+  }
+  render() {
+    this.requested === void 0 && (this.requested = requestAnimationFrame(() => {
+      this.requested = void 0;
+      const e = this.canvas.getContext("2d");
+      if (!this.image || !e || this.snapshot || this.frameTime < this.presentationFloor)
+        return;
+      const t = this.image.displayWidth, i = this.image.displayHeight;
+      (this.canvas.width !== t || this.canvas.height !== i) && (this.canvas.width = t, this.canvas.height = i, this.canvas.style.aspectRatio = `${t} / ${i}`), e.drawImage(this.image, 0, 0);
+    }));
+  }
+  resetSnapshot() {
+    this.generation++, this.video.reset();
+    for (const e of this.frames.values()) e.close();
+    this.frames.clear(), this.snapshot = !1, this.frameTime = 0n, this.latestInputTime = void 0, this.presentationFloor = 0n, this.imageTopic = this.options.imageTopic, this.image?.close(), this.image = void 0;
+  }
+  clearCanvas() {
+    this.canvas.getContext("2d")?.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+  reset() {
+    this.resetSnapshot(), this.presentationTime = void 0, this.clearCanvas();
+  }
+  destroy() {
+    this.reset(), this.requested !== void 0 && cancelAnimationFrame(this.requested), this.requested = void 0;
+  }
+}
+export {
+  M as BlobSource,
+  D as HttpSource,
+  V as ImageRenderer,
+  x as McapRecording,
+  q as ReplayPlayer
+};

package/dist/data-loader.js

@@ -0,0 +1,53 @@
+import { M as o } from "./recording-tVYbg6KM.js";
+class h {
+  baseUrl;
+  headers;
+  constructor({ baseUrl: e, headers: r }) {
+    this.baseUrl = new URL(`${String(e).replace(/\/+$/, "")}/`), this.headers = new Headers(r);
+  }
+  async request(e, r, t) {
+    const a = new Headers(this.headers);
+    new Headers(r.headers).forEach(
+      (n, i) => a.set(i, n)
+    ), t !== void 0 && a.set("Content-Type", "application/json");
+    const s = await fetch(new URL(`v1/${e}`, this.baseUrl), {
+      method: t === void 0 ? "GET" : "POST",
+      headers: a,
+      signal: r.signal,
+      body: t === void 0 ? void 0 : JSON.stringify(t),
+      cache: "no-store"
+    });
+    if (!s.ok)
+      throw new Error(
+        `Replay request failed (${s.status}): ${await s.text()}`
+      );
+    return s.json();
+  }
+  /** List the service's supported canonical data types. */
+  capabilities(e = {}) {
+    return this.request("capabilities", e);
+  }
+  /** Discover a datasource's canonical schemas and actual wire encodings. */
+  discover(e, r = {}) {
+    return this.request(
+      `discover?${new URLSearchParams({ datasource: e })}`,
+      r
+    );
+  }
+  /** Resolve topic URLs for ordered spans; each span can succeed or fail independently. */
+  manifest(e, r = {}) {
+    return this.request("manifest", r, e);
+  }
+  /** Open the single MCAP shared by all topics in one successful manifest result. */
+  async openSpan(e, r = {}) {
+    if ("error" in e)
+      throw new Error(`${e.error.code}: ${e.error.message}`);
+    const t = await o.open(e.manifest.url, r);
+    if (r.bounds) return t;
+    const a = t.metadata.get("replay"), s = a?.get("start_ns"), n = a?.get("end_ns");
+    return s !== void 0 && n !== void 0 ? t.withBounds({ start: BigInt(s), end: BigInt(n) - 1n }) : t;
+  }
+}
+export {
+  h as ReplayDataLoader
+};

package/dist/mcap-viewer.js

@@ -0,0 +1,11 @@
+import { B as a, H as o, M as p } from "./recording-tVYbg6KM.js";
+import { ImageRenderer as c, ReplayPlayer as l } from "./core.js";
+import { ReplayDataLoader as R } from "./data-loader.js";
+export {
+  a as BlobSource,
+  o as HttpSource,
+  c as ImageRenderer,
+  p as McapRecording,
+  R as ReplayDataLoader,
+  l as ReplayPlayer
+};