feat(dl-asset): add canvasVideoRecorder()

thi-ng · Dec 10, 2021 · 6736463 · 6736463
1 parent 155358a
commit 6736463
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/packages/dl-asset/src/api.ts b/packages/dl-asset/src/api.ts
@@ -21,3 +21,19 @@ export interface DownloadOpts {
      */
     expire: number;
 }
+
+/**
+ * User options for {@link canvasRecorder}.
+ */
+export interface CanvasRecorderOpts
+    extends Pick<
+        MediaRecorderOptions,
+        "mimeType" | "bitsPerSecond" | "videoBitsPerSecond"
+    > {
+    /**
+     * Recording frame rate (fps)
+     *
+     * @defaultValue 60
+     */
+    fps: number;
+}
diff --git a/packages/dl-asset/src/canvas.ts b/packages/dl-asset/src/canvas.ts
@@ -1,3 +1,4 @@
+import type { CanvasRecorderOpts } from "./api.js";
 import { downloadWithMime } from "./raw.js";
 
 /**
@@ -26,3 +27,44 @@ export const downloadCanvas = (
         quality
     );
 };
+
+/**
+ * Constructs, initializes and returns a `MediaRecorder` instance for the given
+ * canvas. The recording MUST be started & ended manually by the caller (via
+ * `.start()` and `.stop()`). The downloading starts only once sufficient frames
+ * were recorded, or latest when `.stop()` was called.
+ *
+ * @remarks
+ * The default recording format is WebM (VP9 codec) @ 60 fps, using the browser
+ * defined default bit rate.
+ *
+ * @param canvas
+ * @param fileName
+ * @param opts
+ */
+export const canvasRecorder = (
+    canvas: HTMLCanvasElement,
+    fileName: string,
+    opts?: Partial<CanvasRecorderOpts>
+) => {
+    opts = { fps: 60, mimeType: "video/webm; codecs=vp9", ...opts };
+    const stream = canvas.captureStream(opts.fps);
+    const recorder = new MediaRecorder(stream, {
+        mimeType: opts.mimeType,
+    });
+    let blobs: Blob[] = [];
+    recorder.ondataavailable = (e) => {
+        if (e.data.size > 0) {
+            blobs.push(e.data);
+            downloadWithMime(
+                fileName,
+                new Blob(blobs, { type: opts!.mimeType }),
+                {
+                    mime: opts!.mimeType!,
+                }
+            );
+            blobs = [];
+        }
+    };
+    return recorder;
+};