[pull] main from remotion-dev:main

packages/template-recorder/src/RecordButton.tsx

@@ -127,11 +127,35 @@ export const RecordButton: React.FC<{
     });
   }, [recordingStatus, setRecordingStatus]);
 
+  useEffect(() => {
+    if (recordingStatus.type !== "recording") {
+      return;
+    }
+
+    const controller = new AbortController();
+
+    for (const rec of recordingStatus.ongoing.recorders) {
+      for (const track of rec.recorder.stream.getTracks()) {
+        track.addEventListener(
+          "ended",
+          () => {
+            onStop();
+          },
+          { once: true, signal: controller.signal },
+        );
+      }
+    }
+
+    return () => {
+      controller.abort();
+    };
+  }, [recordingStatus, onStop]);
+
   useEffect(() => {
     return () => {
       if (recordingStatus.type === "recording") {
         recordingStatus.ongoing.recorders.forEach((r) => {
-          r.recorder.stop();
+          r.stopAndWaitUntilDone();
         });
       }
     };

packages/template-recorder/src/helpers/start-media-recorder.ts

@@ -67,13 +67,19 @@ export const startMediaRecorder = async ({
     },
   );
 
-  const stopAndWaitUntilDone = () => {
+  let stoppedPromise: Promise<FinishedRecording> | null = null;
+
+  const stopRecorder = (): Promise<FinishedRecording> => {
+    if (stoppedPromise) {
+      return stoppedPromise;
+    }
+
     periodicSaveController.abort();
     const { resolve, reject, promise } =
       Promise.withResolvers<FinishedRecording>();
+    stoppedPromise = promise;
     const controller = new AbortController();
 
-    recorder.stop();
     recorder.addEventListener(
       "error",
       (event) => {
@@ -112,13 +118,27 @@ export const startMediaRecorder = async ({
       },
     );
 
+    recorder.stop();
+
     promise.finally(() => controller.abort());
 
     return promise;
   };
 
+  // Stop the recorder immediately when any track ends to prevent
+  // corrupt timestamps in the output file
+  for (const track of source.stream.getTracks()) {
+    track.addEventListener(
+      "ended",
+      () => {
+        stopRecorder();
+      },
+      { once: true },
+    );
+  }
+
   // Trigger a save every 10 seconds
   recorder.start(10_000);
 
-  return { recorder, stopAndWaitUntilDone, mimeType };
+  return { recorder, stopAndWaitUntilDone: stopRecorder, mimeType };
 };