@editframe/elements 0.6.0-beta.9 → 0.7.0-beta.10

package/dist/lib/av/MP4File.cjs

@@ -0,0 +1,187 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const MP4Box = require("mp4box");
+const debug = require("debug");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const MP4Box__namespace = /* @__PURE__ */ _interopNamespaceDefault(MP4Box);
+const log = debug("ef:av:mp4file");
+class MP4File extends MP4Box__namespace.ISOFile {
+  constructor() {
+    super(...arguments);
+    this.readyPromise = new Promise((resolve, reject) => {
+      this.onReady = () => resolve();
+      this.onError = reject;
+    });
+    this.waitingForSamples = [];
+    this._hasSeenLastSamples = false;
+    this._arrayBufferFileStart = 0;
+  }
+  setSegmentOptions(id, user, options) {
+    const trak = this.getTrackById(id);
+    if (trak) {
+      trak.nextSample = 0;
+      this.fragmentedTracks.push({
+        id,
+        user,
+        trak,
+        segmentStream: null,
+        nb_samples: "nbSamples" in options && options.nbSamples || 1e3,
+        rapAlignement: ("rapAlignement" in options && options.rapAlignement) ?? true
+      });
+    }
+  }
+  /**
+   * Fragments all tracks in a file into separate array buffers.
+   */
+  async fragmentAllTracks() {
+    const trackBuffers = {};
+    for await (const segment of this.fragmentIterator()) {
+      (trackBuffers[segment.track] ??= []).push(segment.data);
+    }
+    return trackBuffers;
+  }
+  async *fragmentIterator() {
+    await this.readyPromise;
+    const trackInfo = {};
+    for (const videoTrack of this.getInfo().videoTracks) {
+      trackInfo[videoTrack.id] = { index: 0, complete: false };
+      this.setSegmentOptions(videoTrack.id, null, {
+        rapAlignement: true
+      });
+    }
+    for (const audioTrack of this.getInfo().audioTracks) {
+      trackInfo[audioTrack.id] = { index: 0, complete: false };
+      const sampleRate = audioTrack.audio.sample_rate;
+      const probablePacketSize = 1024;
+      const probableFourSecondsOfSamples = Math.ceil(
+        sampleRate / probablePacketSize * 4
+      );
+      this.setSegmentOptions(audioTrack.id, null, {
+        nbSamples: probableFourSecondsOfSamples
+      });
+    }
+    const initSegments = this.initializeSegmentation();
+    for (const initSegment of initSegments) {
+      yield {
+        track: initSegment.id,
+        segment: "init",
+        data: initSegment.buffer,
+        complete: false
+      };
+    }
+    const fragmentStartSamples = {};
+    let finishedReading = false;
+    const allTracksFinished = () => {
+      for (const fragmentedTrack of this.fragmentedTracks) {
+        if (!trackInfo[fragmentedTrack.id]?.complete) {
+          return false;
+        }
+      }
+      return true;
+    };
+    while (!(finishedReading && allTracksFinished())) {
+      for (const fragTrak of this.fragmentedTracks) {
+        const trak = fragTrak.trak;
+        if (trak.nextSample === void 0) {
+          throw new Error("trak.nextSample is undefined");
+        }
+        if (trak.samples === void 0) {
+          throw new Error("trak.samples is undefined");
+        }
+        while (trak.nextSample < trak.samples.length) {
+          let result = void 0;
+          const fragTrakNextSample = trak.samples[trak.nextSample];
+          if (fragTrakNextSample) {
+            fragmentStartSamples[fragTrak.id] ||= fragTrakNextSample;
+          }
+          try {
+            result = this.createFragment(
+              fragTrak.id,
+              trak.nextSample,
+              fragTrak.segmentStream
+            );
+          } catch (error) {
+            console.error("Failed to createFragment", error);
+          }
+          if (result) {
+            fragTrak.segmentStream = result;
+            trak.nextSample++;
+          } else {
+            finishedReading = await this.waitForMoreSamples();
+            break;
+          }
+          const nextSample = trak.samples[trak.nextSample];
+          const emitSegment = (
+            // if rapAlignement is true, we emit a fragment when we have a rap sample coming up next
+            fragTrak.rapAlignement === true && nextSample?.is_sync || // if rapAlignement is false, we emit a fragment when we have the required number of samples
+            !fragTrak.rapAlignement && trak.nextSample % fragTrak.nb_samples === 0 || // // if this is the last sample, we emit the fragment
+            // finished ||
+            // if we have more samples than the number of samples requested, we emit the fragment
+            trak.nextSample >= trak.samples.length
+          );
+          if (emitSegment) {
+            const trackInfoForFrag = trackInfo[fragTrak.id];
+            if (!trackInfoForFrag) {
+              throw new Error("trackInfoForFrag is undefined");
+            }
+            if (trak.nextSample >= trak.samples.length) {
+              trackInfoForFrag.complete = true;
+            }
+            log(
+              `Yielding fragment #${trackInfoForFrag.index} for track=${fragTrak.id}`
+            );
+            const startSample = fragmentStartSamples[fragTrak.id];
+            const endSample = trak.samples[trak.nextSample - 1];
+            if (!startSample || !endSample) {
+              throw new Error("startSample or endSample is undefined");
+            }
+            yield {
+              track: fragTrak.id,
+              segment: trackInfoForFrag.index,
+              data: fragTrak.segmentStream.buffer,
+              complete: trackInfoForFrag.complete,
+              cts: startSample.cts,
+              dts: startSample.dts,
+              duration: endSample.cts - startSample.cts + endSample.duration
+            };
+            trackInfoForFrag.index += 1;
+            fragTrak.segmentStream = null;
+            delete fragmentStartSamples[fragTrak.id];
+          }
+        }
+      }
+      finishedReading = await this.waitForMoreSamples();
+    }
+  }
+  waitForMoreSamples() {
+    if (this._hasSeenLastSamples) {
+      return Promise.resolve(true);
+    }
+    return new Promise((resolve) => {
+      this.waitingForSamples.push(resolve);
+    });
+  }
+  processSamples(last) {
+    this._hasSeenLastSamples = last;
+    for (const observer of this.waitingForSamples) {
+      observer(last);
+    }
+    this.waitingForSamples = [];
+  }
+}
+exports.MP4File = MP4File;

package/dist/lib/av/MP4File.js

@@ -0,0 +1,170 @@
+import * as MP4Box from "mp4box";
+import debug from "debug";
+const log = debug("ef:av:mp4file");
+class MP4File extends MP4Box.ISOFile {
+  constructor() {
+    super(...arguments);
+    this.readyPromise = new Promise((resolve, reject) => {
+      this.onReady = () => resolve();
+      this.onError = reject;
+    });
+    this.waitingForSamples = [];
+    this._hasSeenLastSamples = false;
+    this._arrayBufferFileStart = 0;
+  }
+  setSegmentOptions(id, user, options) {
+    const trak = this.getTrackById(id);
+    if (trak) {
+      trak.nextSample = 0;
+      this.fragmentedTracks.push({
+        id,
+        user,
+        trak,
+        segmentStream: null,
+        nb_samples: "nbSamples" in options && options.nbSamples || 1e3,
+        rapAlignement: ("rapAlignement" in options && options.rapAlignement) ?? true
+      });
+    }
+  }
+  /**
+   * Fragments all tracks in a file into separate array buffers.
+   */
+  async fragmentAllTracks() {
+    const trackBuffers = {};
+    for await (const segment of this.fragmentIterator()) {
+      (trackBuffers[segment.track] ??= []).push(segment.data);
+    }
+    return trackBuffers;
+  }
+  async *fragmentIterator() {
+    await this.readyPromise;
+    const trackInfo = {};
+    for (const videoTrack of this.getInfo().videoTracks) {
+      trackInfo[videoTrack.id] = { index: 0, complete: false };
+      this.setSegmentOptions(videoTrack.id, null, {
+        rapAlignement: true
+      });
+    }
+    for (const audioTrack of this.getInfo().audioTracks) {
+      trackInfo[audioTrack.id] = { index: 0, complete: false };
+      const sampleRate = audioTrack.audio.sample_rate;
+      const probablePacketSize = 1024;
+      const probableFourSecondsOfSamples = Math.ceil(
+        sampleRate / probablePacketSize * 4
+      );
+      this.setSegmentOptions(audioTrack.id, null, {
+        nbSamples: probableFourSecondsOfSamples
+      });
+    }
+    const initSegments = this.initializeSegmentation();
+    for (const initSegment of initSegments) {
+      yield {
+        track: initSegment.id,
+        segment: "init",
+        data: initSegment.buffer,
+        complete: false
+      };
+    }
+    const fragmentStartSamples = {};
+    let finishedReading = false;
+    const allTracksFinished = () => {
+      for (const fragmentedTrack of this.fragmentedTracks) {
+        if (!trackInfo[fragmentedTrack.id]?.complete) {
+          return false;
+        }
+      }
+      return true;
+    };
+    while (!(finishedReading && allTracksFinished())) {
+      for (const fragTrak of this.fragmentedTracks) {
+        const trak = fragTrak.trak;
+        if (trak.nextSample === void 0) {
+          throw new Error("trak.nextSample is undefined");
+        }
+        if (trak.samples === void 0) {
+          throw new Error("trak.samples is undefined");
+        }
+        while (trak.nextSample < trak.samples.length) {
+          let result = void 0;
+          const fragTrakNextSample = trak.samples[trak.nextSample];
+          if (fragTrakNextSample) {
+            fragmentStartSamples[fragTrak.id] ||= fragTrakNextSample;
+          }
+          try {
+            result = this.createFragment(
+              fragTrak.id,
+              trak.nextSample,
+              fragTrak.segmentStream
+            );
+          } catch (error) {
+            console.error("Failed to createFragment", error);
+          }
+          if (result) {
+            fragTrak.segmentStream = result;
+            trak.nextSample++;
+          } else {
+            finishedReading = await this.waitForMoreSamples();
+            break;
+          }
+          const nextSample = trak.samples[trak.nextSample];
+          const emitSegment = (
+            // if rapAlignement is true, we emit a fragment when we have a rap sample coming up next
+            fragTrak.rapAlignement === true && nextSample?.is_sync || // if rapAlignement is false, we emit a fragment when we have the required number of samples
+            !fragTrak.rapAlignement && trak.nextSample % fragTrak.nb_samples === 0 || // // if this is the last sample, we emit the fragment
+            // finished ||
+            // if we have more samples than the number of samples requested, we emit the fragment
+            trak.nextSample >= trak.samples.length
+          );
+          if (emitSegment) {
+            const trackInfoForFrag = trackInfo[fragTrak.id];
+            if (!trackInfoForFrag) {
+              throw new Error("trackInfoForFrag is undefined");
+            }
+            if (trak.nextSample >= trak.samples.length) {
+              trackInfoForFrag.complete = true;
+            }
+            log(
+              `Yielding fragment #${trackInfoForFrag.index} for track=${fragTrak.id}`
+            );
+            const startSample = fragmentStartSamples[fragTrak.id];
+            const endSample = trak.samples[trak.nextSample - 1];
+            if (!startSample || !endSample) {
+              throw new Error("startSample or endSample is undefined");
+            }
+            yield {
+              track: fragTrak.id,
+              segment: trackInfoForFrag.index,
+              data: fragTrak.segmentStream.buffer,
+              complete: trackInfoForFrag.complete,
+              cts: startSample.cts,
+              dts: startSample.dts,
+              duration: endSample.cts - startSample.cts + endSample.duration
+            };
+            trackInfoForFrag.index += 1;
+            fragTrak.segmentStream = null;
+            delete fragmentStartSamples[fragTrak.id];
+          }
+        }
+      }
+      finishedReading = await this.waitForMoreSamples();
+    }
+  }
+  waitForMoreSamples() {
+    if (this._hasSeenLastSamples) {
+      return Promise.resolve(true);
+    }
+    return new Promise((resolve) => {
+      this.waitingForSamples.push(resolve);
+    });
+  }
+  processSamples(last) {
+    this._hasSeenLastSamples = last;
+    for (const observer of this.waitingForSamples) {
+      observer(last);
+    }
+    this.waitingForSamples = [];
+  }
+}
+export {
+  MP4File
+};

package/dist/lib/av/msToTimeCode.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const msToTimeCode = (ms, subSecond = false) => {
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const pad = (num) => num.toString().padStart(2, "0");
+  let timecode = `${pad(hours)}:${pad(minutes % 60)}:${pad(seconds % 60)}`;
+  if (subSecond) {
+    const subSeconds = Math.floor(ms % 1e3 / 10);
+    timecode += `.${subSeconds.toString().padStart(2, "0")}`;
+  }
+  return timecode;
+};
+exports.msToTimeCode = msToTimeCode;

package/dist/lib/av/msToTimeCode.js

@@ -0,0 +1,15 @@
+const msToTimeCode = (ms, subSecond = false) => {
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const pad = (num) => num.toString().padStart(2, "0");
+  let timecode = `${pad(hours)}:${pad(minutes % 60)}:${pad(seconds % 60)}`;
+  if (subSecond) {
+    const subSeconds = Math.floor(ms % 1e3 / 10);
+    timecode += `.${subSeconds.toString().padStart(2, "0")}`;
+  }
+  return timecode;
+};
+export {
+  msToTimeCode
+};

package/dist/lib/util/awaitMicrotask.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const awaitMicrotask = () => new Promise(queueMicrotask);
+exports.awaitMicrotask = awaitMicrotask;

package/dist/lib/util/awaitMicrotask.js

@@ -0,0 +1,4 @@
+const awaitMicrotask = () => new Promise(queueMicrotask);
+export {
+  awaitMicrotask
+};

package/dist/lib/util/memoize.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const memoize = (_target, _propertyKey, descriptor) => {
+  const get = descriptor.get;
+  if (!get) return;
+  const memoized = /* @__PURE__ */ new WeakMap();
+  descriptor.get = function() {
+    if (!memoized.has(this)) {
+      memoized.set(this, get.call(this));
+    }
+    return memoized.get(this);
+  };
+};
+exports.memoize = memoize;

package/dist/lib/util/memoize.js

@@ -0,0 +1,14 @@
+const memoize = (_target, _propertyKey, descriptor) => {
+  const get = descriptor.get;
+  if (!get) return;
+  const memoized = /* @__PURE__ */ new WeakMap();
+  descriptor.get = function() {
+    if (!memoized.has(this)) {
+      memoized.set(this, get.call(this));
+    }
+    return memoized.get(this);
+  };
+};
+export {
+  memoize
+};

package/dist/packages/elements/src/EF_FRAMEGEN.cjs

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const debug = require("debug");
+const task = require("@lit/task");
+const awaitMicrotask = require("../../../lib/util/awaitMicrotask.cjs");
+const EFTemporal = require("./elements/EFTemporal.cjs");
+const EFTimegroup = require("./elements/EFTimegroup.cjs");
+const log = debug("ef:elements:EF_FRAMEGEN");
+class TriggerCanvas {
+  constructor() {
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 1;
+    this.canvas.height = 1;
+    Object.assign(this.canvas.style, {
+      position: "fixed",
+      top: "0px",
+      left: "0px",
+      width: "1px",
+      height: "1px",
+      zIndex: "100000"
+    });
+    document.body.prepend(this.canvas);
+    const ctx = this.canvas.getContext("2d", { willReadFrequently: true });
+    if (!ctx) throw new Error("Canvas 2d context not ready");
+    this.ctx = ctx;
+    this.ctx.fillStyle = "black";
+  }
+  trigger() {
+    log("TRIGGERING CANVAS");
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+}
+class EfFramegen {
+  constructor() {
+    this.time = 0;
+    this.frameDurationMs = 0;
+    this.initialBusyTasks = Promise.resolve([]);
+    this.frameBox = document.createElement("div");
+    this.BRIDGE = window.FRAMEGEN_BRIDGE;
+    this.triggerCanvas = new TriggerCanvas();
+    if (this.BRIDGE) {
+      this.connectToBridge();
+    }
+  }
+  trace(...args) {
+    console.trace("[EF_FRAMEGEN]", ...args);
+  }
+  connectToBridge() {
+    const BRIDGE = this.BRIDGE;
+    if (!BRIDGE) {
+      throw new Error("No BRIDGE when attempting to connect to bridge");
+    }
+    BRIDGE.onInitialize(async (renderId, renderOptions) => {
+      log("BRIDGE.onInitialize", renderId, renderOptions);
+      await this.initialize(renderId, renderOptions);
+      BRIDGE.initialized(renderId);
+    });
+    BRIDGE.onBeginFrame((renderId, frameNumber, isLast) => {
+      log("BRIDGE.onBeginFrame", renderId, frameNumber, isLast);
+      this.beginFrame(renderId, frameNumber, isLast);
+    });
+  }
+  async initialize(renderId, renderOptions) {
+    addEventListener("unhandledrejection", (event) => {
+      this.trace("Unhandled rejection:", event.reason);
+      if (this.BRIDGE) {
+        this.BRIDGE.error(renderId, event.reason);
+      }
+    });
+    addEventListener("error", (event) => {
+      this.trace("Uncaught error", event.error);
+      if (this.BRIDGE) {
+        this.BRIDGE.error(renderId, event.error);
+      }
+    });
+    this.renderOptions = renderOptions;
+    const workbench = document.querySelector("ef-workbench");
+    if (!workbench) {
+      throw new Error("No workbench found");
+    }
+    workbench.rendering = true;
+    const timegroups = EFTimegroup.shallowGetTimegroups(workbench);
+    const temporals = EFTemporal.deepGetElementsWithFrameTasks(workbench);
+    const firstGroup = timegroups[0];
+    if (!firstGroup) {
+      throw new Error("No temporal elements found");
+    }
+    firstGroup.currentTimeMs = renderOptions.encoderOptions.fromMs;
+    this.frameDurationMs = 1e3 / renderOptions.encoderOptions.video.framerate;
+    this.initialBusyTasks = Promise.all(
+      temporals.filter((temporal) => temporal.frameTask.status < task.TaskStatus.COMPLETE).map((temporal) => temporal.frameTask).map((task2) => task2.taskComplete)
+    );
+    this.time = 0;
+    if (renderOptions.showFrameBox) {
+      Object.assign(this.frameBox.style, {
+        width: "200px",
+        height: "100px",
+        font: "30px Arial",
+        backgroundColor: "white",
+        position: "absolute",
+        top: "0px",
+        left: "0px",
+        zIndex: "100000"
+      });
+      document.body.prepend(this.frameBox);
+    }
+    this.audioBufferPromise = firstGroup.renderAudio(
+      renderOptions.encoderOptions.alignedFromUs / 1e3,
+      renderOptions.encoderOptions.alignedToUs / 1e3
+      // renderOptions.encoderOptions.fromMs,
+      // renderOptions.encoderOptions.toMs,
+    );
+    log("Initialized");
+  }
+  async beginFrame(renderId, frameNumber, isLast) {
+    if (this.renderOptions === void 0) {
+      throw new Error("No renderOptions");
+    }
+    if (this.renderOptions.showFrameBox) {
+      this.frameBox.innerHTML = `
+        <div>Frame #${frameNumber}</div>
+        <div>${this.time.toFixed(4)}</div>
+      `;
+    }
+    const workbench = document.querySelector("ef-workbench");
+    if (!workbench) {
+      throw new Error("No workbench found");
+    }
+    workbench.rendering = true;
+    const timegroups = EFTimegroup.shallowGetTimegroups(workbench);
+    const temporals = EFTemporal.deepGetElementsWithFrameTasks(workbench);
+    const firstGroup = timegroups[0];
+    if (!firstGroup) {
+      throw new Error("No temporal elements found");
+    }
+    this.time = this.renderOptions.encoderOptions.fromMs + frameNumber * this.frameDurationMs;
+    firstGroup.currentTimeMs = this.time;
+    log("Awaiting initialBusyTasks");
+    await this.initialBusyTasks;
+    log("Awaiting microtask");
+    await awaitMicrotask.awaitMicrotask();
+    log("Awaiting frame tasks");
+    const now = performance.now();
+    await Promise.all(
+      temporals.filter((temporal) => temporal.frameTask.status < task.TaskStatus.COMPLETE).map((temporal) => {
+        return temporal.frameTask;
+      }).map((task2) => task2.taskComplete)
+    );
+    log(`frame:${frameNumber} All tasks complete ${performance.now() - now}ms`);
+    if (isLast && this.audioBufferPromise) {
+      const renderedAudio = await this.audioBufferPromise;
+      const channelCount = renderedAudio.numberOfChannels;
+      const interleavedSamples = new Float32Array(
+        channelCount * renderedAudio.length
+      );
+      for (let i = 0; i < renderedAudio.length; i++) {
+        for (let j = 0; j < channelCount; j++) {
+          interleavedSamples.set(
+            renderedAudio.getChannelData(j).slice(i, i + 1),
+            i * channelCount + j
+          );
+        }
+      }
+      if (this.BRIDGE) {
+        this.triggerCanvas.trigger();
+        this.BRIDGE.frameReady(
+          renderId,
+          frameNumber,
+          interleavedSamples.buffer
+        );
+      } else {
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(new Blob([interleavedSamples.buffer]));
+        await new Promise((resolve, reject) => {
+          fileReader.onload = resolve;
+          fileReader.onerror = reject;
+        });
+        return fileReader.result;
+      }
+    } else {
+      if (this.BRIDGE) {
+        this.triggerCanvas.trigger();
+        this.BRIDGE.frameReady(renderId, frameNumber, new ArrayBuffer(0));
+      } else {
+        const fileReader = new FileReader();
+        fileReader.readAsDataURL(new Blob([]));
+        await new Promise((resolve, reject) => {
+          fileReader.onload = resolve;
+          fileReader.onerror = reject;
+        });
+        return fileReader.result;
+      }
+    }
+  }
+}
+window.EF_FRAMEGEN = new EfFramegen();
+exports.EfFramegen = EfFramegen;

package/dist/packages/elements/src/EF_FRAMEGEN.d.ts

@@ -0,0 +1,44 @@
+import { VideoRenderOptions } from '../../assets/src';
+
+declare global {
+    interface Window {
+        EF_FRAMEGEN?: EfFramegen;
+        FRAMEGEN_BRIDGE?: {
+            onInitialize: (callback: (renderId: string, renderOptions: VideoRenderOptions) => void) => void;
+            initialized(renderId: string): void;
+            onBeginFrame(callback: (renderId: string, frameNumber: number, isLast: boolean) => void): void;
+            onTriggerCanvas(callback: () => void): void;
+            frameReady(renderId: string, frameNumber: number, audioSamples: ArrayBuffer): void;
+            error(renderId: string, error: Error): void;
+        };
+    }
+}
+declare class TriggerCanvas {
+    private canvas;
+    private ctx;
+    constructor();
+    trigger(): void;
+}
+export declare class EfFramegen {
+    time: number;
+    frameDurationMs: number;
+    initialBusyTasks: Promise<unknown[]>;
+    audioBufferPromise?: Promise<AudioBuffer>;
+    renderOptions?: VideoRenderOptions;
+    frameBox: HTMLDivElement;
+    BRIDGE: {
+        onInitialize: (callback: (renderId: string, renderOptions: VideoRenderOptions) => void) => void;
+        initialized(renderId: string): void;
+        onBeginFrame(callback: (renderId: string, frameNumber: number, isLast: boolean) => void): void;
+        onTriggerCanvas(callback: () => void): void;
+        frameReady(renderId: string, frameNumber: number, audioSamples: ArrayBuffer): void;
+        error(renderId: string, error: Error): void;
+    } | undefined;
+    triggerCanvas: TriggerCanvas;
+    trace(...args: any[]): void;
+    constructor();
+    connectToBridge(): void;
+    initialize(renderId: string, renderOptions: VideoRenderOptions): Promise<void>;
+    beginFrame(renderId: string, frameNumber: number, isLast: boolean): Promise<string | ArrayBuffer | null | undefined>;
+}
+export {};