Commit 3941c2a1de792410db3dc20dfe7fb323ce0733ab | the-knife

author	maria <maria@kuuro.net> 2026-09-06 20:03:05-03:00
committer	GitHub <noreply@github.com> 2026-09-06 20:03:05-03:00
log	3941c2a1de792410db3dc20dfe7fb323ce0733ab
tree	be33e0ac8fe8a4d19af6ce4353c57ae81df9749b
parent	2d6a3799978659e349faf8ff4297098ffb782ebb
signature	Signed by PGP key B5690EEEBB952194

fix(web): improve preview recording frame delivery (#10403)

2 files changed, 57 insertions(+), 16 deletions(-)

apps
- web
  - src
    browser
    browserRecording.test.ts
    browserRecording.ts

apps/web/src/browser/browserRecording.test.ts+38-12

 @@ -146,6 +146,7 @@ describe("browser recording", () => {
     vi.stubGlobal("cancelAnimationFrame", vi.fn());
     vi.stubGlobal("MediaRecorder", FakeMediaRecorder as unknown as typeof MediaRecorder);
     getDisplayMedia.mockResolvedValue({
+      getVideoTracks: () => [],
       getTracks: () => [{ stop: vi.fn() }],
     });
     requestDisplayMediaCapture.mockImplementation((tabId: string) => {
 @@ -187,7 +188,7 @@ describe("browser recording", () => {
     getDisplayMedia.mockImplementationOnce(async () => {
       expect(animationFrameCount).toBe(2);
       expect(useBrowserSurfaceStore.getState().activityByTabId["background-tab"]).toBe(1);
-      return { getTracks: () => [{ stop: vi.fn() }] };
+      return { getVideoTracks: () => [], getTracks: () => [{ stop: vi.fn() }] };
     });
     await startBrowserRecording("background-tab");
 @@ -214,21 +215,31 @@ describe("browser recording", () => {
     await stopBrowserRecording("hidden-window-tab");
   });
-  it("records the native tab stream armed by the main process", async () => {
+  it.each([
+    { width: 1280, height: 720, frameRate: 60, bitrate: 2_764_800 },
+    { width: 320, height: 240, frameRate: 30, bitrate: 2_500_000 },
+    { width: 3840, height: 2160, frameRate: 60, bitrate: 24_883_200 },
+    { width: 7680, height: 4320, frameRate: 60, bitrate: 50_000_000 },
+  ])("records the native $width x $height stream at $frameRate fps", async (settings) => {
     const stopTrack = vi.fn();
-    const stream = { getTracks: () => [{ stop: stopTrack }] } as unknown as MediaStream;
+    const stream = {
+      getVideoTracks: () => [{ getSettings: () => settings }],
+      getTracks: () => [{ stop: stopTrack }],
+    } as unknown as MediaStream;
     getDisplayMedia.mockResolvedValueOnce(stream);
     await startBrowserRecording("recording-tab");
     expect(getDisplayMedia).toHaveBeenCalledWith({
       audio: false,
-      video: { frameRate: { max: 30 } },
+      video: { frameRate: { ideal: 30, max: 30 } },
     });
     expect(FakeMediaRecorder.instances[0]?.stream).toBe(stream);
+    expect(FakeMediaRecorder.instances[0]?.options?.videoBitsPerSecond).toBe(settings.bitrate);
     await stopBrowserRecording("recording-tab");
     expect(stopTrack).toHaveBeenCalledOnce();
+    expect(stopTrack.mock.invocationCallOrder[0]).toBeLessThan(save.mock.invocationCallOrder[0]!);
   });
   it("uses the configured recording frame rate", async () => {
 @@ -238,7 +249,7 @@ describe("browser recording", () => {
     expect(getDisplayMedia).toHaveBeenCalledWith({
       audio: false,
-      video: { frameRate: { max: 60 } },
+      video: { frameRate: { ideal: 60, max: 60 } },
     });
     await stopBrowserRecording("recording-tab");
   });
 @@ -263,7 +274,7 @@ describe("browser recording", () => {
     expect(getDisplayMedia).toHaveBeenCalledWith({
       audio: false,
-      video: { frameRate: { max: 60 } },
+      video: { frameRate: { ideal: 60, max: 60 } },
     });
     await stopBrowserRecording(tabId);
 @@ -275,6 +286,7 @@ describe("browser recording", () => {
   it("stops the native stream when MediaRecorder cleanup fails", async () => {
     const stopTrack = vi.fn();
     getDisplayMedia.mockResolvedValueOnce({
+      getVideoTracks: () => [],
       getTracks: () => [{ stop: stopTrack }],
     });
 @@ -290,6 +302,7 @@ describe("browser recording", () => {
   it("uses the best supported encoder and saves the recorder's actual format", async () => {
     FakeMediaRecorder.supportedTypes = new Set([
+      "video/mp4;codecs=avc1",
       "video/mp4;codecs=avc1.42e01e",
       "video/webm;codecs=vp9",
       "video/webm;codecs=av1",
 @@ -300,7 +313,8 @@ describe("browser recording", () => {
     await stopBrowserRecording("recording-tab");
     expect(FakeMediaRecorder.instances[0]?.options).toEqual({
-      mimeType: "video/webm;codecs=av1",
+      mimeType: "video/mp4;codecs=avc1",
+      videoBitsPerSecond: 3_110_400,
     });
     expect(save).toHaveBeenCalledWith(
       "recording-tab",
 @@ -316,7 +330,7 @@ describe("browser recording", () => {
     await startBrowserRecording("recording-tab");
     await stopBrowserRecording("recording-tab");
-    expect(FakeMediaRecorder.instances[0]?.options).toBeUndefined();
+    expect(FakeMediaRecorder.instances[0]?.options).toEqual({ videoBitsPerSecond: 3_110_400 });
     expect(save).toHaveBeenCalledWith(
       "recording-tab",
       "video/platform-default",
 @@ -375,7 +389,10 @@ describe("browser recording", () => {
     expect(readActiveBrowserRecordingTabIds()).toEqual(new Set());
     expect(useBrowserSurfaceStore.getState().activityByTabId["recording-tab"]).toBeUndefined();
-    finishCapture({ getTracks: () => [{ stop: stopTrack }] } as unknown as MediaStream);
+    finishCapture({
+      getVideoTracks: () => [],
+      getTracks: () => [{ stop: stopTrack }],
+    } as unknown as MediaStream);
     await vi.advanceTimersByTimeAsync(0);
     expect(stopTrack).toHaveBeenCalledOnce();
   });
 @@ -411,7 +428,10 @@ describe("browser recording", () => {
   it("serializes display media grants for concurrent recording starts", async () => {
     let finishFirstCapture!: (stream: MediaStream) => void;
-    const stream = { getTracks: () => [{ stop: vi.fn() }] } as unknown as MediaStream;
+    const stream = {
+      getVideoTracks: () => [],
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
     getDisplayMedia
       .mockImplementationOnce(
         () =>
 @@ -440,7 +460,10 @@ describe("browser recording", () => {
   it("cancels a queued recording when stopped before its media grant", async () => {
     let finishFirstCapture!: (stream: MediaStream) => void;
-    const stream = { getTracks: () => [{ stop: vi.fn() }] } as unknown as MediaStream;
+    const stream = {
+      getVideoTracks: () => [],
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
     getDisplayMedia.mockImplementationOnce(
       () =>
         new Promise<MediaStream>((resolve) => {
 @@ -477,7 +500,10 @@ describe("browser recording", () => {
       }),
     );
     let finishBlockingCapture!: (stream: MediaStream) => void;
-    const stream = { getTracks: () => [{ stop: vi.fn() }] } as unknown as MediaStream;
+    const stream = {
+      getVideoTracks: () => [],
+      getTracks: () => [{ stop: vi.fn() }],
+    } as unknown as MediaStream;
     getDisplayMedia.mockImplementationOnce(
       () =>
         new Promise<MediaStream>((resolve) => {

apps/web/src/browser/browserRecording.ts+19-4

 @@ -238,17 +238,29 @@ export function findActiveBrowserRecordingRuntimeTabId(
 }
 const preferredMimeTypes = [
-  "video/webm;codecs=av1",
+  "video/mp4;codecs=avc1",
-  "video/webm;codecs=vp9",
   "video/mp4;codecs=avc1.640028",
   "video/mp4;codecs=avc1.42e01e",
+  "video/webm;codecs=vp9",
   "video/webm;codecs=vp8",
   "video/webm",
 ] as const;
 const createMediaRecorder = (stream: MediaStream): MediaRecorder => {
   const mimeType = preferredMimeTypes.find((candidate) => MediaRecorder.isTypeSupported(candidate));
-  return mimeType ? new MediaRecorder(stream, { mimeType }) : new MediaRecorder(stream);
+  const settings = stream.getVideoTracks()[0]?.getSettings();
+  // Browser defaults under-budget native-resolution text and motion. Scale with captured pixels
+  // and frames, while bounding storage and encoder load for very large displays.
+  const videoBitsPerSecond = Math.round(
+    Math.min(
+      50_000_000,
+      Math.max(
+        2_500_000,
+        (settings?.width ?? 1920) * (settings?.height ?? 1080) * (settings?.frameRate ?? 30) * 0.05,
+      ),
+    ),
+  );
+  return new MediaRecorder(stream, { ...(mimeType ? { mimeType } : {}), videoBitsPerSecond });
 };
 const captureTabMediaStream = (frameRate: number): Promise<MediaStream> =>
 @@ -256,7 +268,7 @@ const captureTabMediaStream = (frameRate: number): Promise<MediaStream> =>
   // stream already arrives at that tab's native size and needs no source or dimension constraints.
   navigator.mediaDevices.getDisplayMedia({
     audio: false,
-    video: { frameRate: { max: frameRate } },
+    video: { frameRate: { ideal: frameRate, max: frameRate } },
   });
 const stopMediaRecorder = async (recorder: MediaRecorder | null): Promise<void> => {
 @@ -680,6 +692,9 @@ const finalizeBrowserRecording = async (
           cause,
         });
       }
+      // Encoding has flushed; release native capture before materializing and saving the file.
+      stopMediaStream(recording.stream);
+      recording.stream = null;
       const mimeType =
         recording.recorder.mimeType ||
         recording.chunks.find((chunk) => chunk.type.length > 0)?.type;