抽离seekCSSAnimations到捕获上下文

Vinlic · Nov 23, 2023 · 24db140 · 24db140
1 parent 13e32d4
commit 24db140
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git a/core/CaptureContext.js b/core/CaptureContext.js
@@ -122,33 +122,31 @@ export default class CaptureContext {
         // 递归捕获帧
         (function nextFrame() {
             (async () => {
-                // 是否处于捕获中状态
-                const isCapturing = this.isCapturing();
-
                 // 如果已停止则跳出
                 if(this.stopFlag)
                     return;
 
-                if(isCapturing) {
-                    // 媒体调度
-                    const mediaRenderPromises = this.dispatchMedias.map(media => (async () => {
-                        // 媒体可销毁时执行销毁
-                        if (media.canDestory(this.currentTime))
-                            return media.destory();
-                        // 如媒体不可播放则跳过调度
-                        if (!media.canPlay(this.currentTime))
+                // 媒体调度
+                const mediaRenderPromises = this.dispatchMedias.map(media => (async () => {
+                    // 媒体可销毁时执行销毁
+                    if (media.canDestory(this.currentTime))
+                        return media.destory();
+                    // 如媒体不可播放则跳过调度
+                    if (!media.canPlay(this.currentTime))
+                        return;
+                    // 媒体未准备完毕时调用加载
+                    if (!media.isReady()) {
+                        // 加载媒体，如加载失败则跳过
+                        if (!await media.load())
                             return;
-                        // 媒体未准备完毕时调用加载
-                        if (!media.isReady()) {
-                            // 加载媒体，如加载失败则跳过
-                            if (!await media.load())
-                                return;
-                        };
-                        const mediaCurrentTime = this.currentTime - media.startTime - (media.offsetTime || 0);
-                        await media.seek(mediaCurrentTime > 0 ? mediaCurrentTime : 0);
-                    })());
-                    await Promise.all(mediaRenderPromises);
-                }
+                    };
+                    const mediaCurrentTime = this.currentTime - media.startTime - (media.offsetTime || 0);
+                    await media.seek(mediaCurrentTime > 0 ? mediaCurrentTime : 0);
+                })());
+                await Promise.all(mediaRenderPromises);
+
+                // CSS动画调度                
+                await ____seekCSSAnimations(this.currentTime);
 
                 // 根据帧间隔推进当前时间
                 this.currentTime += this.frameInterval;
@@ -159,9 +157,11 @@ export default class CaptureContext {
                 // 触发超时回调列表
                 this._callTimeoutCallbacks();
 
-                if(isCapturing) {
+                // 是否处于捕获中状态
+                if(this.isCapturing()) {
+
                     // 捕获帧图 - 此函数请见Page.js的#envInit的exposeFunction
-                    if (!await ____captureFrame(this.currentTime)) {
+                    if (!await ____captureFrame()) {
                         this.stopFlag = true;
                         return;
                     }
@@ -178,6 +178,7 @@ export default class CaptureContext {
                     // 如果未到达目标帧数但已被停止也触发录制完成
                     else if(this.stopFlag)
                         return ____screencastCompleted();
+
                 }
 
                 // 开始捕获下一帧

diff --git a/core/Page.js b/core/Page.js
@@ -483,6 +483,8 @@ export default class Page extends EventEmitter {
         this.target.once("close", this.close.bind(this));
         // 暴露录制完成函数
         await this.target.exposeFunction("____screencastCompleted", this.#emitScreencastCompleted.bind(this));
+        // 暴露CSS动画控制函数
+        await this.target.exposeFunction("____seekCSSAnimations", this.#seekCSSAnimations.bind(this));
         // 暴露下一帧函数
         await this.target.exposeFunction("____captureFrame", this.#captureFrame.bind(this));
         // 暴露添加音频函数
@@ -540,10 +542,8 @@ export default class Page extends EventEmitter {
     /**
      * 捕获帧
      */
-    async #captureFrame(currentTime) {
+    async #captureFrame() {
         try {
-            // CSS动画同步
-            await this.#seekCSSAnimations(currentTime);
             // 非兼容渲染模式使用BeginFrame API进行捕获否则使用截图API
             const frameFormat = this.backgroundOpacity < 1 ? "png" : this.frameFormat;
             if (!globalConfig.compatibleRenderingMode) {