Complete basic rewrite

packages/ffmpeg/src/classes.ts

@@ -0,0 +1,215 @@
+import EventEmitter from "events";
+import { FFMessageType } from "./const";
+import {
+  CallbackData,
+  Callbacks,
+  DownloadProgressEvent,
+  FFMessageEventCallback,
+  FFMessageLoadConfig,
+  IsDone,
+  IsFirst,
+  LogEvent,
+  Message,
+  Progress,
+} from "./types";
+import { getMessageID } from "./utils";
+
+/**
+ * Provides APIs to interact with ffmpeg web worker.
+ *
+ * @example
+ * ```ts
+ * const ffmpeg = new FFmpeg();
+ * ```
+ */
+export class FFmpeg extends EventEmitter {
+  /** @event */ static readonly DOWNLOAD = "download" as const;
+  /** @event */ static readonly LOG = "log" as const;
+  /** @event */ static readonly PROGRESS = "progress" as const;
+
+  /**
+   * Listen to download progress events from `ffmpeg.load()`.
+   *
+   * @category Event
+   */
+  on(
+    event: typeof FFmpeg.DOWNLOAD,
+    listener: (data: DownloadProgressEvent) => void
+  ): this;
+  /**
+   * Listen to log events from `ffmpeg.exec()`.
+   *
+   * @remarks
+   * log includes output to stdout and stderr.
+   *
+   * @category Event
+   */
+  on(event: typeof FFmpeg.LOG, listener: (log: LogEvent) => void): this;
+  /**
+   * Listen to progress events from `ffmpeg.exec()`.
+   *
+   * @remarks
+   * The progress events are accurate only when the length of
+   * input and output video/audio file are the same.
+   *
+   * @category Event
+   */
+  on(
+    event: typeof FFmpeg.PROGRESS,
+    listener: (progress: Progress) => void
+  ): this;
+  on(event: string, listener: any): this {
+    return this;
+  }
+
+  #worker: Worker;
+  #resolves: Callbacks = {};
+  #rejects: Callbacks = {};
+
+  constructor() {
+    super();
+    this.#worker = new Worker(new URL("./worker.ts", import.meta.url));
+    this.#registerHandlers();
+  }
+
+  /** register worker message event handlers.
+   */
+  #registerHandlers = () => {
+    this.#worker.onmessage = ({
+      data: { id, type, data },
+    }: FFMessageEventCallback) => {
+      switch (type) {
+        case FFMessageType.LOAD:
+        case FFMessageType.EXEC:
+        case FFMessageType.WRITE_FILE:
+        case FFMessageType.READ_FILE:
+          this.#resolves[id](data);
+          break;
+        case FFMessageType.DOWNLOAD:
+          this.emit(FFmpeg.DOWNLOAD, data as DownloadProgressEvent);
+          break;
+        case FFMessageType.LOG:
+          this.emit(FFmpeg.LOG, data as LogEvent);
+          break;
+        case FFMessageType.PROGRESS:
+          this.emit(FFmpeg.PROGRESS, data as Progress);
+          break;
+        case FFMessageType.ERROR:
+          this.#rejects[id](data);
+          break;
+      }
+      delete this.#resolves[id];
+      delete this.#rejects[id];
+    };
+  };
+
+  /**
+   * Generic function to send messages to web worker.
+   */
+  #send = (
+    { type, data }: Message,
+    trans: Transferable[] = []
+  ): Promise<CallbackData> =>
+    new Promise((resolve, reject) => {
+      const id = getMessageID();
+      this.#worker.postMessage({ id, type, data }, trans);
+      this.#resolves[id] = resolve;
+      this.#rejects[id] = reject;
+    });
+
+  /**
+   * Loads ffmpeg-core inside web worker. It is required to call this method first
+   * as it initializes WebAssembly and other essential variables.
+   *
+   * @category FFmpeg
+   * @returns `true` if ffmpeg core is loaded for the first time.
+   */
+  public load = (config: FFMessageLoadConfig): Promise<IsFirst> =>
+    this.#send({
+      type: FFMessageType.LOAD,
+      data: config,
+    }) as Promise<IsFirst>;
+
+  /**
+   * Execute ffmpeg command.
+   *
+   * @remarks
+   * To avoid common I/O issues, ["-nostdin", "-y"] are prepended to the args
+   * by default.
+   *
+   * @example
+   * ```ts
+   * const ffmpeg = new FFmpeg();
+   * await ffmpeg.load();
+   * await ffmpeg.writeFile("video.avi", ...);
+   * // ffmpeg -i video.avi video.mp4
+   * await ffmpeg.exec(["-i", "video.avi", "video.mp4"]);
+   * const data = ffmpeg.readFile("video.mp4");
+   * ```
+   *
+   * @returns `0` if no error, `!= 0` if timeout (1) or error.
+   * @category FFmpeg
+   */
+  public exec = (
+    /** ffmpeg command line args */
+    args: string[],
+    /**
+     * milliseconds to wait before stopping the command execution.
+     *
+     * @defaultValue -1
+     */
+    timeout = -1
+  ): Promise<number> =>
+    this.#send({
+      type: FFMessageType.EXEC,
+      data: { args, timeout },
+    }) as Promise<number>;
+
+  /**
+   * Write data to ffmpeg.wasm in memory file system.
+   *
+   * @example
+   * ```ts
+   * const ffmpeg = new FFmpeg();
+   * await ffmpeg.load();
+   * await ffmpeg.writeFile("video.avi", await fetchFile("../video.avi"));
+   * await ffmpeg.writeFile("text.txt", "hello world");
+   * ```
+   *
+   * @category File System
+   */
+  public writeFile = (
+    path: string,
+    bin: Uint8Array | string
+  ): Promise<IsDone> => {
+    const trans: Transferable[] = [];
+    if (bin instanceof Uint8Array) {
+      trans.push(bin.buffer);
+    }
+    return this.#send(
+      {
+        type: FFMessageType.WRITE_FILE,
+        data: { path, bin },
+      },
+      trans
+    ) as Promise<IsDone>;
+  };
+
+  /**
+   * Read data from ffmpeg.wasm in memory file system.
+   *
+   * @example
+   * ```ts
+   * const ffmpeg = new FFmpeg();
+   * await ffmpeg.load();
+   * const data = await ffmpeg.readFile("video.mp4");
+   * ```
+   *
+   * @category File System
+   */
+  public readFile = (path: string): Promise<Uint8Array> =>
+    this.#send({
+      type: FFMessageType.READ_FILE,
+      data: { path },
+    }) as Promise<Uint8Array>;
+}

packages/ffmpeg/src/const.ts

@@ -0,0 +1,18 @@
+export const HeaderContentLength = "Content-Length";
+export const MIME_TYPE_JAVASCRIPT = "text/javascript";
+export const MIME_TYPE_WASM = "application/wasm";
+
+export const CORE_VERSION = "0.12.0";
+export const CORE_URL = `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`;
+
+export enum FFMessageType {
+  LOAD = "load",
+  WRITE_FILE = "WRITE_FILE",
+  EXEC = "EXEC",
+  READ_FILE = "READ_FILE",
+  ERROR = "ERROR",
+
+  DOWNLOAD = "DOWNLOAD",
+  PROGRESS = "PROGRESS",
+  LOG = "LOG",
+}

packages/ffmpeg/src/errors.ts

@@ -0,0 +1,13 @@
+export const ERROR_RESPONSE_BODY_READER = new Error(
+  "failed to get response body reader"
+);
+export const ERROR_ZERO_CONTENT_LENGTH = new Error(
+  "failed to get Content-Length"
+);
+export const ERROR_UNKNOWN_MESSAGE_TYPE = new Error("unknown message type");
+export const ERROR_NOT_LOADED = new Error(
+  "ffmpeg is not loaded, call `await ffmpeg.load()` first"
+);
+export const ERROR_INCOMPLETED_DOWNLOAD = new Error(
+  "failed to complete download"
+);

packages/ffmpeg/src/index.ts

@@ -0,0 +1 @@
+export * from "./classes";

packages/ffmpeg/src/types.ts

@@ -0,0 +1,128 @@
+export type FFFSPath = string;
+
+/**
+ * ffmpeg-core loading configuration.
+ */
+export interface FFMessageLoadConfig {
+  /**
+   * `ffmpeg-core.js` URL.
+   *
+   * @defaultValue `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.js`;
+   */
+  coreURL?: string;
+  /**
+   * `ffmpeg-core.wasm` URL.
+   *
+   * @defaultValue `https://unpkg.com/@ffmpeg/core@${CORE_VERSION}/dist/umd/ffmpeg-core.wasm`;
+   */
+  wasmURL?: string;
+  /**
+   * `ffmpeg-core.worker.js` URL, only being loaded when `thread` is `true`.
+   *
+   * @defaultValue `https://unpkg.com/@ffmpeg/core-mt@${CORE_VERSION}/dist/umd/ffmpeg-core.worker.js`;
+   */
+  workerURL?: string;
+  /**
+   * When `blob` is true, the content of `coreURL`, `wasmURL` and `workerURL`
+   * will be fetched and convert to blob URL. This avoids problems like CORS
+   * and provides download progress than can be listened like below:
+   *
+   * @example
+   * ```ts
+   * const ffmpeg = new FFmpeg();
+   * ffmpeg.on(FFmpeg.DOWNLOAD, (ev) => {
+   *   console.log(ev);
+   * })
+   * await ffmpeg.load();
+   * ```
+   *
+   * @defaultValue `true`
+   */
+  blob?: boolean;
+  /**
+   * When `thread` is true, ffmpeg imports `ffmpeg-core.worker.js` and thus
+   * makes multi-threaded core work.
+   *
+   * @defaultValue `false`
+   */
+  thread?: boolean;
+}
+
+export interface FFMessageWriteFileData {
+  path: FFFSPath;
+  bin: Uint8Array | string;
+}
+
+export interface FFMessageExecData {
+  args: string[];
+  timeout?: number;
+}
+
+export interface FFMessageReadFileData {
+  path: FFFSPath;
+}
+
+export type FFMessageData =
+  | FFMessageLoadConfig
+  | FFMessageWriteFileData
+  | FFMessageExecData
+  | FFMessageReadFileData;
+
+export interface Message {
+  type: string;
+  data?: FFMessageData;
+}
+
+export interface FFMessage extends Message {
+  id: number;
+}
+
+export interface FFMessageEvent extends MessageEvent {
+  data: FFMessage;
+}
+
+export interface DownloadProgressEvent {
+  url: string | URL;
+  total: number;
+  received: number;
+  delta: number;
+  done: boolean;
+}
+
+export interface LogEvent {
+  type: string;
+  message: string;
+}
+
+export type ExitCode = number;
+export type ErrorMessage = string;
+export type FileData = Uint8Array;
+export type Progress = number;
+export type IsFirst = boolean;
+export type IsDone = boolean;
+
+export type CallbackData =
+  | FileData
+  | ExitCode
+  | ErrorMessage
+  | DownloadProgressEvent
+  | LogEvent
+  | Progress
+  | IsFirst
+  | IsDone
+  | Error
+  | undefined;
+
+export interface Callbacks {
+  [id: number | string]: (data: CallbackData) => void;
+}
+
+export interface FFMessageEventCallback {
+  data: {
+    id: number;
+    type: string;
+    data: CallbackData;
+  };
+}
+
+export type ProgressCallback = (event: DownloadProgressEvent) => void;

packages/ffmpeg/src/utils.ts

@@ -0,0 +1,62 @@
+import {
+  ERROR_RESPONSE_BODY_READER,
+  ERROR_ZERO_CONTENT_LENGTH,
+  ERROR_INCOMPLETED_DOWNLOAD,
+} from "./errors";
+import { HeaderContentLength } from "./const";
+import { ProgressCallback } from "./types";
+
+/**
+ * Generate an unique message ID.
+ */
+export const getMessageID = (() => {
+  let messageID = 0;
+  return () => messageID++;
+})();
+
+/**
+ * Download content of a URL with progress.
+ */
+export const downloadWithProgress = async (
+  url: string | URL,
+  cb: ProgressCallback
+): Promise<Uint8Array> => {
+  const resp = await fetch(url);
+  const reader = resp.body?.getReader();
+  if (!reader) throw ERROR_RESPONSE_BODY_READER;
+
+  const total = parseInt(resp.headers.get(HeaderContentLength) || "0");
+  if (total === 0) throw ERROR_ZERO_CONTENT_LENGTH;
+
+  const data = new Uint8Array(total);
+  let received = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    const delta = value ? value.length : 0;
+
+    if (done) {
+      if (total !== received) throw ERROR_INCOMPLETED_DOWNLOAD;
+      cb({ url, total, received, delta, done });
+      break;
+    }
+
+    data.set(value, received);
+    received += delta;
+    cb({ url, total, received, delta, done });
+  }
+
+  return data;
+};
+
+/**
+ * Convert an URL to an Blob URL to avoid issues like CORS.
+ */
+export const toBlobURL = async (
+  url: string,
+  /** mime type like `text/javascript` and `application/wasm` */
+  mimeType: string,
+  cb: ProgressCallback
+): Promise<string> =>
+  URL.createObjectURL(
+    new Blob([(await downloadWithProgress(url, cb)).buffer], { type: mimeType })
+  );

packages/ffmpeg/src/worker.ts

@@ -0,0 +1,132 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="esnext" />
+/// <reference lib="webworker" />
+
+import type { FFmpegCoreModule, FFmpegCoreModuleFactory } from "@ffmpeg/types";
+import type {
+  FFMessageEvent,
+  FFMessageLoadConfig,
+  FFMessageWriteFileData,
+  FFMessageExecData,
+  FFMessageReadFileData,
+  CallbackData,
+  IsFirst,
+  IsDone,
+  ExitCode,
+} from "./types";
+import { toBlobURL } from "./utils";
+import {
+  CORE_URL,
+  FFMessageType,
+  MIME_TYPE_JAVASCRIPT,
+  MIME_TYPE_WASM,
+} from "./const";
+import { ERROR_UNKNOWN_MESSAGE_TYPE, ERROR_NOT_LOADED } from "./errors";
+
+declare global {
+  interface WorkerGlobalScope {
+    createFFmpegCore: FFmpegCoreModuleFactory;
+  }
+}
+
+let ffmpeg: FFmpegCoreModule;
+
+const load = async ({
+  coreURL: _coreURL = CORE_URL,
+  wasmURL: _wasmURL,
+  workerURL: _workerURL,
+  blob = true,
+  thread = false,
+}: FFMessageLoadConfig): Promise<IsFirst> => {
+  const first = !ffmpeg;
+  let coreURL = _coreURL;
+  let wasmURL = _wasmURL ? _wasmURL : _coreURL.replace(/.js$/g, ".wasm");
+  let workerURL = _workerURL
+    ? _workerURL
+    : _coreURL.replace(/.js$/g, ".worker.js");
+
+  if (blob) {
+    coreURL = await toBlobURL(coreURL, MIME_TYPE_JAVASCRIPT, (data) =>
+      self.postMessage({ type: FFMessageType.DOWNLOAD, data })
+    );
+    wasmURL = await toBlobURL(wasmURL, MIME_TYPE_WASM, (data) =>
+      self.postMessage({ type: FFMessageType.DOWNLOAD, data })
+    );
+    if (thread) {
+      try {
+        workerURL = await toBlobURL(workerURL, MIME_TYPE_JAVASCRIPT, (data) =>
+          self.postMessage({ type: FFMessageType.DOWNLOAD, data })
+        );
+        // eslint-disable-next-line
+      } catch (e) {}
+    }
+  }
+
+  importScripts(coreURL);
+  ffmpeg = await (self as WorkerGlobalScope).createFFmpegCore({
+    // Fixed `Overload resolution failed.` when using multi-threaded ffmpeg-core.
+    mainScriptUrlOrBlob: coreURL,
+    locateFile: (path: string, prefix: string): string => {
+      if (path.endsWith(".wasm")) return wasmURL;
+      if (path.endsWith(".worker.js")) return workerURL;
+      return prefix + path;
+    },
+  });
+  ffmpeg.setLogger((data) =>
+    self.postMessage({ type: FFMessageType.LOG, data })
+  );
+  ffmpeg.setProgress((data: number) =>
+    self.postMessage({ type: FFMessageType.PROGRESS, data })
+  );
+  return first;
+};
+
+const writeFile = ({ path, bin }: FFMessageWriteFileData): IsDone => {
+  ffmpeg.FS.writeFile(path, bin);
+  return true;
+};
+
+const exec = ({ args, timeout = -1 }: FFMessageExecData): ExitCode => {
+  ffmpeg.setTimeout(timeout);
+  ffmpeg.exec(...args);
+  const ret = ffmpeg.ret;
+  ffmpeg.reset();
+  return ret;
+};
+
+const readFile = ({ path }: FFMessageReadFileData): Uint8Array =>
+  ffmpeg.FS.readFile(path);
+
+self.onmessage = async ({
+  data: { id, type, data: _data },
+}: FFMessageEvent): Promise<void> => {
+  const trans = [];
+  let data: CallbackData;
+  try {
+    if (type !== FFMessageType.LOAD && !ffmpeg) throw ERROR_NOT_LOADED;
+
+    switch (type) {
+      case FFMessageType.LOAD:
+        data = await load(_data as FFMessageLoadConfig);
+        break;
+      case FFMessageType.WRITE_FILE:
+        data = writeFile(_data as FFMessageWriteFileData);
+        break;
+      case FFMessageType.EXEC:
+        data = exec(_data as FFMessageExecData);
+        break;
+      case FFMessageType.READ_FILE:
+        data = readFile(_data as FFMessageReadFileData);
+        break;
+      default:
+        throw ERROR_UNKNOWN_MESSAGE_TYPE;
+    }
+  } catch (e) {
+    self.postMessage({ id, type: FFMessageType.ERROR, data: e as Error });
+    return;
+  }
+  if (data instanceof Uint8Array) {
+    trans.push(data.buffer);
+  }
+  self.postMessage({ id, type, data }, trans);
+};