refactor: generate a keyframe every 3 seconds.

Author: hughfenghen

.changeset/long-beers-compete.md

@@ -0,0 +1,6 @@
+---
+'@webav/av-recorder': patch
+'@webav/av-cliper': patch
+---
+
+refactor: generate a keyframe every 3 seconds.

packages/av-cliper/src/combinator.ts

@@ -315,6 +315,7 @@ export class Combinator {
         outputAudio,
         hasVideoTrack: this.#hasVideoTrack,
         timeSlice,
+        fps,
       });
 
       let ts = 0;
@@ -418,10 +419,13 @@ function createAVEncoder(opts: {
   outputAudio?: boolean;
   hasVideoTrack: boolean;
   timeSlice: number;
+  fps: number;
 }) {
   const { ctx, cvs, outputAudio, remux, hasVideoTrack, timeSlice } = opts;
   const { width, height } = cvs;
   let frameCnt = 0;
+  // 3s 一个 GOP
+  const gopSize = Math.floor(3 * opts.fps);
 
   const audioTrackBuf = createAudioTrackBuf(1024);
 
@@ -437,8 +441,7 @@ function createAVEncoder(opts: {
       });
 
       remux.encodeVideo(vf, {
-        // todo: 3s 1 GoP
-        keyFrame: frameCnt % 150 === 0,
+        keyFrame: frameCnt % gopSize === 0,
       });
       ctx.resetTransform();
       ctx.clearRect(0, 0, width, height);

packages/av-recorder/src/av-recorder.ts

@@ -177,7 +177,12 @@ class RecoderPauseCtrl {
   // 触发暂停的时间，用于计算暂停持续了多久
   #pauseTime = 0;
 
-  constructor(readonly expectFPS: number) {}
+  // 间隔多少帧生成一个关键帧
+  #gopSize = 30;
+
+  constructor(readonly expectFPS: number) {
+    this.#gopSize = Math.floor(expectFPS * 3);
+  }
 
   start() {
     this.#offsetTime = performance.now();
@@ -221,7 +226,7 @@ class RecoderPauseCtrl {
     frame.close();
     return {
       vf,
-      opts: { keyFrame: this.#frameCnt % 30 === 0 },
+      opts: { keyFrame: this.#frameCnt % this.#gopSize === 0 },
     };
   }