Convert mp4 to webm for streaming audio

typescript-streaming-sandbox/lib/media/audioRecorder.ts

@@ -1,4 +1,7 @@
 import { sleep } from "../utilities/asyncUtilities";
+import { fetchFile } from "@ffmpeg/util";
+
+let ffmpeg: any = null;
 
 export class AudioRecorder {
   private recorder;
@@ -9,13 +12,54 @@ export class AudioRecorder {
     this.mediaStream = mediaStream;
   }
 
+  private static async convertAudio(blob: Blob): Promise<Blob> {
+    await ffmpeg.load();
+
+    const inputName = "input.mp4";
+    const outputName = "output.webm";
+
+    ffmpeg.writeFile(inputName, await fetchFile(blob));
+
+    await ffmpeg.exec(["-i", inputName, "-c:a", "libopus", outputName]);
+
+    const data = await ffmpeg.readFile(outputName);
+    return new Blob([data], { type: "audio/webm" });
+  }
+
   static async create(): Promise<AudioRecorder> {
+    await AudioRecorder.loadFFmpeg();
     const mediaOptions = { video: false, audio: true };
     const mediaStream = await navigator.mediaDevices.getUserMedia(mediaOptions);
-    const recorder = new MediaRecorder(mediaStream);
+    const mimeType = AudioRecorder.getSupportedMimeType();
+    const recorder = new MediaRecorder(mediaStream, { mimeType });
     return new AudioRecorder(recorder, mediaStream);
   }
 
+  private static getSupportedMimeType(): string {
+    const mimeTypes = ["audio/webm", "audio/webm;codecs=opus", "audio/mp4", "audio/mp4;codecs=aac"];
+
+    for (const mimeType of mimeTypes) {
+      if (MediaRecorder.isTypeSupported(mimeType)) {
+        return mimeType;
+      }
+    }
+    console.warn("No supported MIME type found. Defaulting to audio/webm.");
+    return "audio/webm";
+  }
+
+  private static async loadFFmpeg() {
+    if (typeof window === "undefined") return;
+    if (!ffmpeg) {
+      const { FFmpeg } = await import("@ffmpeg/ffmpeg");
+      const { fetchFile } = await import("@ffmpeg/util");
+
+      ffmpeg = new FFmpeg();
+      ffmpeg.fetchFile = fetchFile;
+
+      await ffmpeg.load();
+    }
+  }
+
   async stopRecording() {
     this.mediaStream.getTracks().forEach((track) => {
       track.stop();
@@ -24,8 +68,14 @@ export class AudioRecorder {
 
   record(length: number): Promise<Blob> {
     return new Promise(async (resolve: (blob: Blob) => void, _) => {
-      this.recorder.ondataavailable = (blobEvent) => {
-        resolve(blobEvent.data);
+      this.recorder.ondataavailable = async (blobEvent) => {
+        let recordedBlob = blobEvent.data;
+
+        if (recordedBlob.type === "audio/mp4") {
+          recordedBlob = await AudioRecorder.convertAudio(recordedBlob);
+        }
+
+        resolve(recordedBlob);
       };
 
       if (this.recorder.state !== "recording") this.recorder.start();

typescript-streaming-sandbox/package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ffmpeg/ffmpeg": "^0.12.10",
+    "@ffmpeg/util": "^0.12.1",
     "@fontsource/poppins": "^4.5.10",
     "@phosphor-icons/react": "2.0.5",
     "@types/node": "18.11.9",