feat: add mp4-muxer and move mp4-wasm to its own encoder

package.json

@@ -43,6 +43,7 @@
     "canvas-screenshot": "^4.1.0",
     "gifenc": "^1.0.3",
     "h264-mp4-encoder": "^1.0.12",
+    "mp4-muxer": "^1.0.2",
     "webm-muxer": "^2.2.3"
   },
   "devDependencies": {

src/encoders/Encoder.js

@@ -28,9 +28,7 @@ class Encoder {
 
   async getFileHandle(name, options) {
     if (this.directoryHandle) {
-      return await this.directoryHandle.getFileHandle(name, {
-        create: true,
-      });
+      return await this.directoryHandle.getFileHandle(name, { create: true });
     }
 
     if (!("showSaveFilePicker" in window)) return;

src/encoders/MP4WasmEncoder.js

@@ -0,0 +1,59 @@
+import MP4Wasm from "./mp4.embed.js"; // mp4-wasm
+
+import Encoder from "./Encoder.js";
+
+let mp4wasm;
+
+class MP4WasmEncoder extends Encoder {
+  static supportedExtensions = ["mp4"];
+  static supportedTargets = ["in-browser"];
+
+  static defaultOptions = {
+    extension: MP4WasmEncoder.supportedExtensions[0],
+    groupOfPictures: 20,
+    flushFrequency: 10,
+  };
+
+  get frameMethod() {
+    return "bitmap";
+  }
+
+  constructor(options) {
+    super({ ...MP4WasmEncoder.defaultOptions, ...options });
+  }
+
+  async init(options) {
+    super.init(options);
+
+    mp4wasm ||= await MP4Wasm(); // { wasmBinary }
+    console.log(mp4wasm);
+
+    this.encoder = mp4wasm.createWebCodecsEncoder({
+      // codec: "avc1.420034", // Baseline 4.2
+      codec: "avc1.4d0034", // Main 5.2
+      width: this.width,
+      height: this.height,
+      fps: this.frameRate,
+      encoderOptions: {
+        framerate: this.frameRate,
+        ...this.encoderOptions,
+      },
+    });
+  }
+
+  async encode(frame) {
+    await this.encoder.addFrame(frame);
+  }
+
+  async stop() {
+    let buffer = await this.encoder.end();
+
+    return buffer;
+  }
+
+  async dispose() {
+    this.encoder = null;
+  }
+}
+
+export default MP4WasmEncoder;