@give-tech/ec-player 0.0.1-beta.52 → 0.0.1-beta.54

package/dist/index.js

@@ -253,17 +253,21 @@ class BasePlayer {
     };
     this.renderLoop = () => {
       if (!this.isPlaying) return;
-      this.updateState({
-        decoded: this.frameBuffer.length,
-        droppedFrames: this.droppedFrames
-      });
-      if (this.frameBuffer.length > 0 && this.renderer) {
-        const frame = this.frameBuffer.shift();
-        this.renderer.render(frame);
-        this.updateState({ resolution: `${frame.width}x${frame.height}` });
-        const fps = this.renderer.updateFps();
-        this.updateState({ fps });
-        this.callbacks.onFrameRender?.(frame);
+      try {
+        this.updateState({
+          decoded: this.frameBuffer.length,
+          droppedFrames: this.droppedFrames
+        });
+        if (this.frameBuffer.length > 0 && this.renderer) {
+          const frame = this.frameBuffer.shift();
+          this.renderer.render(frame);
+          this.updateState({ resolution: `${frame.width}x${frame.height}` });
+          const fps = this.renderer.updateFps();
+          this.updateState({ fps });
+          this.callbacks.onFrameRender?.(frame);
+        }
+      } catch (error) {
+        console.error("[BasePlayer] Render error:", error);
       }
       this.frameTimer = requestAnimationFrame(this.renderLoop);
     };
@@ -1846,105 +1850,109 @@ class HLSPlayer extends BasePlayer {
     this._lastRafTime = 0;
     this.renderLoop = (timestamp = 0) => {
       if (!this.isPlaying) return;
-      const now = performance.now();
-      const BACKGROUND_PAUSE_THRESHOLD = 500;
-      if (this._lastRafTime > 0 && now - this._lastRafTime > BACKGROUND_PAUSE_THRESHOLD) {
-        const pauseDuration = now - this._lastRafTime;
-        console.log("[renderLoop] Background pause detected, duration:", pauseDuration.toFixed(0), "ms");
-        if (this.config.isLive) {
-          const KEEP_FRAMES = 5;
-          if (this.frameBuffer.length > KEEP_FRAMES) {
-            const droppedCount = this.frameBuffer.length - KEEP_FRAMES;
-            this.frameBuffer = this.frameBuffer.slice(-KEEP_FRAMES);
-            this.droppedFrames += droppedCount;
-            console.log("[renderLoop] Live resume: dropped", droppedCount, "old frames, keeping latest", KEEP_FRAMES);
+      try {
+        const now = performance.now();
+        const BACKGROUND_PAUSE_THRESHOLD = 500;
+        if (this._lastRafTime > 0 && now - this._lastRafTime > BACKGROUND_PAUSE_THRESHOLD) {
+          const pauseDuration = now - this._lastRafTime;
+          console.log("[renderLoop] Background pause detected, duration:", pauseDuration.toFixed(0), "ms");
+          if (this.config.isLive) {
+            const KEEP_FRAMES = 5;
+            if (this.frameBuffer.length > KEEP_FRAMES) {
+              const droppedCount = this.frameBuffer.length - KEEP_FRAMES;
+              this.frameBuffer = this.frameBuffer.slice(-KEEP_FRAMES);
+              this.droppedFrames += droppedCount;
+              console.log("[renderLoop] Live resume: dropped", droppedCount, "old frames, keeping latest", KEEP_FRAMES);
+            }
+            this.playStartTime = now;
+            this.accumulatedMediaTime = 0;
+          } else {
+            this.playStartTime = now - this.accumulatedMediaTime;
           }
-          this.playStartTime = now;
-          this.accumulatedMediaTime = 0;
-        } else {
-          this.playStartTime = now - this.accumulatedMediaTime;
-        }
-      }
-      this._lastRafTime = now;
-      if (!this._lastLogTime || now - this._lastLogTime > 1e3) {
-        this._lastLogTime = now;
-        console.log("[renderLoop] frameBuffer=", this.frameBuffer.length, "renderer=", !!this.renderer);
-      }
-      const downloaded = this.isFMP4 ? this.sampleQueue.length : this.nalQueue.length;
-      const segments = this.isFMP4 ? this.fmp4Segments : this.segments;
-      const totalSegments = segments.length;
-      this.updateState({
-        decoded: this.frameBuffer.length,
-        downloaded,
-        droppedFrames: this.droppedFrames,
-        segmentIndex: this.currentSegmentIndex,
-        totalSegments
-      });
-      if (this.frameBuffer.length > 0 && this.renderer) {
-        const wasBuffering = this.state.isBuffering;
-        if (this.state.isBuffering) {
-          this.updateState({ isBuffering: false, bufferingProgress: void 0 });
-        }
-        this._consecutiveEmptyBuffer = 0;
-        const timescale = this.fmp4Demuxer.getTimescale();
-        if (this.playStartTime === 0) {
-          this.playStartTime = now;
-          this.accumulatedMediaTime = 0;
-          console.log("[renderLoop] Init: timescale=", timescale);
         }
-        if (wasBuffering && this.accumulatedMediaTime > 0) {
-          this.playStartTime = now - this.accumulatedMediaTime / this._playbackRate;
-          console.log("[renderLoop] Buffer recovered, reset playStartTime to continue from", Math.floor(this.accumulatedMediaTime), "ms");
+        this._lastRafTime = now;
+        if (!this._lastLogTime || now - this._lastLogTime > 1e3) {
+          this._lastLogTime = now;
+          console.log("[renderLoop] frameBuffer=", this.frameBuffer.length, "renderer=", !!this.renderer);
         }
-        const elapsedWallTime = (now - this.playStartTime) * this._playbackRate;
-        if (Math.floor(elapsedWallTime / 1e3) !== Math.floor((elapsedWallTime - 20 * this._playbackRate) / 1e3)) {
-          console.log("[renderLoop] elapsed=", Math.floor(elapsedWallTime), "accumulated=", Math.floor(this.accumulatedMediaTime), "rate=", this._playbackRate, "frameBuffer=", this.frameBuffer.length);
-        }
-        const getFrameDurationMs = (frame2) => {
-          return frame2.duration ? frame2.duration * 1e3 / timescale : 33.33;
-        };
-        const bufferMs = 50;
-        if (this._playbackRate > 1) {
-          const behindTime = elapsedWallTime - this.accumulatedMediaTime;
-          if (behindTime > 50 && this.frameBuffer.length > 1) {
-            const avgFrameDuration = getFrameDurationMs(this.frameBuffer[0]);
-            const framesToSkip = Math.min(
-              Math.floor(behindTime / avgFrameDuration),
-              this.frameBuffer.length - 1
-              // 保留至少 1 帧
-            );
-            if (framesToSkip > 0) {
-              for (let i = 0; i < framesToSkip; i++) {
-                const skipFrame = this.frameBuffer.shift();
-                const skipDuration = getFrameDurationMs(skipFrame);
-                this.accumulatedMediaTime += skipDuration;
+        const downloaded = this.isFMP4 ? this.sampleQueue.length : this.nalQueue.length;
+        const segments = this.isFMP4 ? this.fmp4Segments : this.segments;
+        const totalSegments = segments.length;
+        this.updateState({
+          decoded: this.frameBuffer.length,
+          downloaded,
+          droppedFrames: this.droppedFrames,
+          segmentIndex: this.currentSegmentIndex,
+          totalSegments
+        });
+        if (this.frameBuffer.length > 0 && this.renderer) {
+          const wasBuffering = this.state.isBuffering;
+          if (this.state.isBuffering) {
+            this.updateState({ isBuffering: false, bufferingProgress: void 0 });
+          }
+          this._consecutiveEmptyBuffer = 0;
+          const timescale = this.fmp4Demuxer.getTimescale();
+          if (this.playStartTime === 0) {
+            this.playStartTime = now;
+            this.accumulatedMediaTime = 0;
+            console.log("[renderLoop] Init: timescale=", timescale);
+          }
+          if (wasBuffering && this.accumulatedMediaTime > 0) {
+            this.playStartTime = now - this.accumulatedMediaTime / this._playbackRate;
+            console.log("[renderLoop] Buffer recovered, reset playStartTime to continue from", Math.floor(this.accumulatedMediaTime), "ms");
+          }
+          const elapsedWallTime = (now - this.playStartTime) * this._playbackRate;
+          if (Math.floor(elapsedWallTime / 1e3) !== Math.floor((elapsedWallTime - 20 * this._playbackRate) / 1e3)) {
+            console.log("[renderLoop] elapsed=", Math.floor(elapsedWallTime), "accumulated=", Math.floor(this.accumulatedMediaTime), "rate=", this._playbackRate, "frameBuffer=", this.frameBuffer.length);
+          }
+          const getFrameDurationMs = (frame2) => {
+            return frame2.duration ? frame2.duration * 1e3 / timescale : 33.33;
+          };
+          const bufferMs = 50;
+          if (this._playbackRate > 1) {
+            const behindTime = elapsedWallTime - this.accumulatedMediaTime;
+            if (behindTime > 50 && this.frameBuffer.length > 1) {
+              const avgFrameDuration = getFrameDurationMs(this.frameBuffer[0]);
+              const framesToSkip = Math.min(
+                Math.floor(behindTime / avgFrameDuration),
+                this.frameBuffer.length - 1
+                // 保留至少 1 帧
+              );
+              if (framesToSkip > 0) {
+                for (let i = 0; i < framesToSkip; i++) {
+                  const skipFrame = this.frameBuffer.shift();
+                  const skipDuration = getFrameDurationMs(skipFrame);
+                  this.accumulatedMediaTime += skipDuration;
+                }
+                console.log("[renderLoop] Skipped", framesToSkip, "frames at rate", this._playbackRate, ", behind=", Math.floor(behindTime));
               }
-              console.log("[renderLoop] Skipped", framesToSkip, "frames at rate", this._playbackRate, ", behind=", Math.floor(behindTime));
             }
           }
-        }
-        const frame = this.frameBuffer[0];
-        const frameDurationMs = getFrameDurationMs(frame);
-        if (elapsedWallTime >= this.accumulatedMediaTime - bufferMs) {
-          this.frameBuffer.shift();
-          this.renderer.render(frame);
-          this.accumulatedMediaTime += frameDurationMs;
-          this.setCurrentTime(this.accumulatedMediaTime);
-          this.updateState({ resolution: `${frame.width}x${frame.height}` });
-          const fps = this.renderer.updateFps();
-          this.updateState({ fps });
-          this.callbacks.onFrameRender?.(frame);
-        }
-      } else {
-        if (this.isPlaying && !this.state.isBuffering) {
-          this._consecutiveEmptyBuffer++;
-          if (this._consecutiveEmptyBuffer >= 15) {
-            this.updateState({ isBuffering: true });
+          const frame = this.frameBuffer[0];
+          const frameDurationMs = getFrameDurationMs(frame);
+          if (elapsedWallTime >= this.accumulatedMediaTime - bufferMs) {
+            this.frameBuffer.shift();
+            this.renderer.render(frame);
+            this.accumulatedMediaTime += frameDurationMs;
+            this.setCurrentTime(this.accumulatedMediaTime);
+            this.updateState({ resolution: `${frame.width}x${frame.height}` });
+            const fps = this.renderer.updateFps();
+            this.updateState({ fps });
+            this.callbacks.onFrameRender?.(frame);
+          }
+        } else {
+          if (this.isPlaying && !this.state.isBuffering) {
+            this._consecutiveEmptyBuffer++;
+            if (this._consecutiveEmptyBuffer >= 15) {
+              this.updateState({ isBuffering: true });
+            }
+          }
+          if (this.playStartTime === 0) {
+            console.log("[renderLoop] Waiting for frames...");
           }
         }
-        if (this.playStartTime === 0) {
-          console.log("[renderLoop] Waiting for frames...");
-        }
+      } catch (error) {
+        console.error("[HLSPlayer] Render error:", error);
       }
       this.frameTimer = requestAnimationFrame(this.renderLoop);
     };
@@ -2611,7 +2619,16 @@ class HLSPlayer extends BasePlayer {
       }
       throw error;
     }
-    const content = await response.text();
+    let content;
+    try {
+      content = await response.text();
+    } catch (error) {
+      if (error.name === "AbortError") {
+        console.log("[HLSPlayer] Read playlist body aborted");
+        return { isMaster: true, isFMP4: false, segments: [], fmp4Segments: [], variants: 0 };
+      }
+      throw error;
+    }
     const lines = content.split("\n");
     const segments = [];
     const fmp4Segments = [];
@@ -3370,120 +3387,135 @@ class FLVPlayer extends BasePlayer {
     this.playStartTimeOffset = 0;
     this.resyncCount = 0;
     this._lastRafTime = 0;
+    this._prevRenderDts = -1;
+    this._frameIntervalSamples = [];
     this.renderLoop = () => {
       if (!this.isPlaying) return;
-      this.updateState({
-        decoded: this._timedFrameBuffer.length,
-        downloaded: this._videoTagQueue.length,
-        droppedFrames: this.droppedFrames
-      });
-      const now = performance.now();
-      const isLive = this.config.isLive;
-      const BACKGROUND_PAUSE_THRESHOLD = 500;
-      if (this._lastRafTime > 0 && now - this._lastRafTime > BACKGROUND_PAUSE_THRESHOLD) {
-        const pauseDuration = now - this._lastRafTime;
-        console.log("[FLVPlayer] Background pause detected, duration:", pauseDuration.toFixed(0), "ms, isLive:", isLive, "queue:", this._videoTagQueue.length, "buffer:", this._timedFrameBuffer.length);
-        if (isLive) {
-          const droppedDecoded = this._timedFrameBuffer.length;
-          const droppedQueue = this._videoTagQueue.length;
-          this._timedFrameBuffer = [];
-          this._videoTagQueue = [];
-          this.droppedFrames += droppedDecoded;
-          this.playStartTime = 0;
-          this.firstFrameDts = -1;
-          this.pausedTime = 0;
-          console.log("[FLVPlayer] Live resume: cleared all buffers (decoded:", droppedDecoded, ", queue:", droppedQueue, "), waiting for new data");
-        } else {
-          this.playStartTimeOffset += pauseDuration;
-        }
-      }
-      this._lastRafTime = now;
-      if (this._timedFrameBuffer.length > 0 && this.renderer) {
-        if (this.state.isBuffering) {
-          this.updateState({ isBuffering: false, bufferingProgress: void 0 });
-        }
-        this.consecutiveEmptyBuffer = 0;
-        if (this.playStartTime <= 0) {
-          this.firstFrameDts = this._timedFrameBuffer[0].dts;
-          this.playStartTime = now;
-          this.playStartTimeOffset = 0;
-          this.pausedTime = 0;
-          console.log("[FLVPlayer] RenderLoop initialized, firstFrameDts:", this.firstFrameDts, "isLive:", isLive);
+      try {
+        this.updateState({
+          decoded: this._timedFrameBuffer.length,
+          downloaded: this._videoTagQueue.length,
+          droppedFrames: this.droppedFrames
+        });
+        const now = performance.now();
+        const isLive = this.config.isLive;
+        const BACKGROUND_PAUSE_THRESHOLD = 500;
+        if (this._lastRafTime > 0 && now - this._lastRafTime > BACKGROUND_PAUSE_THRESHOLD) {
+          const pauseDuration = now - this._lastRafTime;
+          console.log("[FLVPlayer] Background pause detected, duration:", pauseDuration.toFixed(0), "ms, isLive:", isLive, "queue:", this._videoTagQueue.length, "buffer:", this._timedFrameBuffer.length);
+          if (isLive) {
+            const droppedDecoded = this._timedFrameBuffer.length;
+            const droppedQueue = this._videoTagQueue.length;
+            this._timedFrameBuffer = [];
+            this._videoTagQueue = [];
+            this.droppedFrames += droppedDecoded;
+            this.playStartTime = 0;
+            this.firstFrameDts = -1;
+            this.pausedTime = 0;
+            console.log("[FLVPlayer] Live resume: cleared all buffers (decoded:", droppedDecoded, ", queue:", droppedQueue, "), waiting for new data");
+          } else {
+            this.playStartTimeOffset += pauseDuration;
+          }
         }
-        if (isLive) {
-          if (this.lastRenderedDts < 0 && this._timedFrameBuffer.length > 0) {
-            const firstFrame = this._timedFrameBuffer.shift();
-            this.renderFrame(firstFrame, now);
-            this.firstFrameDts = firstFrame.dts;
+        this._lastRafTime = now;
+        if (this._timedFrameBuffer.length > 0 && this.renderer) {
+          if (this.state.isBuffering) {
+            this.updateState({ isBuffering: false, bufferingProgress: void 0 });
+          }
+          this.consecutiveEmptyBuffer = 0;
+          if (this.playStartTime <= 0) {
+            this.firstFrameDts = this._timedFrameBuffer[0].dts;
             this.playStartTime = now;
+            this.playStartTimeOffset = 0;
             this.pausedTime = 0;
-            console.log("[FLVPlayer] Live first frame rendered immediately, dts:", firstFrame.dts);
-          } else {
-            const elapsed = (now - this.playStartTime - this.pausedTime) * this._playbackRate;
-            const currentTargetDts = this.firstFrameDts + elapsed;
-            this.setCurrentTime(Math.floor(currentTargetDts));
-            let frameToRender = null;
-            while (this._timedFrameBuffer.length > 0 && this._timedFrameBuffer[0].dts <= currentTargetDts) {
+            console.log("[FLVPlayer] RenderLoop initialized, firstFrameDts:", this.firstFrameDts, "isLive:", isLive);
+          }
+          if (isLive) {
+            if (this.lastRenderedDts < 0 && this._timedFrameBuffer.length > 0) {
+              const firstFrame = this._timedFrameBuffer.shift();
+              this.renderFrame(firstFrame, now);
+              this.firstFrameDts = firstFrame.dts;
+              this.playStartTime = now;
+              this.pausedTime = 0;
+              console.log("[FLVPlayer] Live first frame rendered immediately, dts:", firstFrame.dts);
+            } else {
+              const elapsed = (now - this.playStartTime - this.pausedTime) * this._playbackRate;
+              const currentTargetDts = this.firstFrameDts + elapsed;
+              this.setCurrentTime(Math.floor(currentTargetDts));
+              let frameToRender = null;
+              while (this._timedFrameBuffer.length > 0 && this._timedFrameBuffer[0].dts <= currentTargetDts) {
+                if (frameToRender) {
+                  this.droppedFrames++;
+                }
+                frameToRender = this._timedFrameBuffer.shift();
+              }
               if (frameToRender) {
-                this.droppedFrames++;
+                this.renderFrame(frameToRender, now);
               }
-              frameToRender = this._timedFrameBuffer.shift();
             }
-            if (frameToRender) {
+          } else {
+            const nextFrame = this._timedFrameBuffer[0];
+            const elapsed = (now - this.playStartTime - this.playStartTimeOffset) * this._playbackRate;
+            const currentTargetPts = this.firstFrameDts + elapsed;
+            if (this.lastRenderedDts >= 0) {
+              this.setCurrentTime(Math.floor(this.lastRenderedDts));
+            }
+            if (nextFrame.dts <= currentTargetPts) {
+              const frameToRender = this._timedFrameBuffer.shift();
               this.renderFrame(frameToRender, now);
+              this.lastRenderedDts = frameToRender.dts;
+              if (this._prevRenderDts >= 0) {
+                this._frameIntervalSamples.push(frameToRender.dts - this._prevRenderDts);
+                if (this._frameIntervalSamples.length >= 30) {
+                  const avg = this._frameIntervalSamples.reduce((a, b) => a + b, 0) / this._frameIntervalSamples.length;
+                  console.log("[FLVPlayer] 帧率诊断: 平均帧间隔", avg.toFixed(1), "ms, 约", (1e3 / avg).toFixed(1), "fps, 样本数:", this._frameIntervalSamples.length);
+                  this._frameIntervalSamples = [];
+                }
+              }
+              this._prevRenderDts = frameToRender.dts;
+              const lag = currentTargetPts - frameToRender.dts;
+              if (lag > 1e3) {
+                this.playStartTime = now;
+                this.playStartTimeOffset = 0;
+                this.firstFrameDts = frameToRender.dts;
+                this.resyncCount++;
+                if (this.resyncCount <= 3) {
+                  console.log("[FLVPlayer] Major resync, lag:", Math.floor(lag), "ms");
+                }
+              }
             }
           }
-        } else {
-          const nextFrame = this._timedFrameBuffer[0];
-          const elapsed = (now - this.playStartTime - this.playStartTimeOffset) * this._playbackRate;
-          const currentTargetPts = this.firstFrameDts + elapsed;
-          if (this.lastRenderedDts >= 0) {
-            this.setCurrentTime(Math.floor(this.lastRenderedDts));
+          if (now - this.lastRenderLogTime > 5e3) {
+            console.log("[FLVPlayer] RenderLoop stats:", {
+              renderedFrames: this.renderedFrames,
+              droppedFrames: this.droppedFrames,
+              decoded: this._timedFrameBuffer.length,
+              downloaded: this._videoTagQueue.length,
+              mode: isLive ? "live" : "vod"
+            });
+            this.lastRenderLogTime = now;
           }
-          if (nextFrame.dts <= currentTargetPts) {
-            const frameToRender = this._timedFrameBuffer.shift();
-            this.renderFrame(frameToRender, now);
-            this.lastRenderedDts = frameToRender.dts;
-            const lag = currentTargetPts - frameToRender.dts;
-            if (lag > 1e3) {
-              this.playStartTime = now;
-              this.playStartTimeOffset = 0;
-              this.firstFrameDts = frameToRender.dts;
-              this.resyncCount++;
-              if (this.resyncCount <= 3) {
-                console.log("[FLVPlayer] Major resync, lag:", Math.floor(lag), "ms");
-              }
+        } else {
+          if (this.isPlaying && !this.state.isBuffering) {
+            if (this.consecutiveEmptyBuffer >= 15) {
+              this.updateState({ isBuffering: true });
             }
           }
-        }
-        if (now - this.lastRenderLogTime > 5e3) {
-          console.log("[FLVPlayer] RenderLoop stats:", {
-            renderedFrames: this.renderedFrames,
-            droppedFrames: this.droppedFrames,
-            decoded: this._timedFrameBuffer.length,
-            downloaded: this._videoTagQueue.length,
-            mode: isLive ? "live" : "vod"
-          });
-          this.lastRenderLogTime = now;
-        }
-      } else {
-        if (this.isPlaying && !this.state.isBuffering) {
-          if (this.consecutiveEmptyBuffer >= 15) {
-            this.updateState({ isBuffering: true });
+          if (this.consecutiveEmptyBuffer === 0 && this.lastRenderedDts >= 0) {
+            this.bufferEmptyStartTime = now;
+          }
+          this.consecutiveEmptyBuffer++;
+          if (isLive && this.bufferEmptyStartTime > 0) {
+            this.pausedTime = now - this.bufferEmptyStartTime;
+          }
+          if (this.consecutiveEmptyBuffer === 1) {
+            console.warn("[FLVPlayer] Buffer empty, waiting for frames... queue:", this._videoTagQueue.length);
+          } else if (this.consecutiveEmptyBuffer % 60 === 0) {
+            console.warn("[FLVPlayer] Buffer still empty after", Math.floor(this.consecutiveEmptyBuffer / 60), "seconds");
           }
         }
-        if (this.consecutiveEmptyBuffer === 0 && this.lastRenderedDts >= 0) {
-          this.bufferEmptyStartTime = now;
-        }
-        this.consecutiveEmptyBuffer++;
-        if (isLive && this.bufferEmptyStartTime > 0) {
-          this.pausedTime = now - this.bufferEmptyStartTime;
-        }
-        if (this.consecutiveEmptyBuffer === 1) {
-          console.warn("[FLVPlayer] Buffer empty, waiting for frames... queue:", this._videoTagQueue.length);
-        } else if (this.consecutiveEmptyBuffer % 60 === 0) {
-          console.warn("[FLVPlayer] Buffer still empty after", Math.floor(this.consecutiveEmptyBuffer / 60), "seconds");
-        }
+      } catch (error) {
+        console.error("[FLVPlayer] Render error:", error);
       }
       this.frameTimer = requestAnimationFrame(this.renderLoop);
     };
@@ -3704,6 +3736,8 @@ class FLVPlayer extends BasePlayer {
       this.playStartTime = performance.now();
       this.playStartTimeOffset = 0;
       this._lastRafTime = 0;
+      this._prevRenderDts = -1;
+      this._frameIntervalSamples = [];
       console.log("[FLVPlayer] Play time initialized, firstFrameDts:", this.firstFrameDts);
     }
     this.isPlaying = true;
@@ -4303,7 +4337,7 @@ class FLVPlayer extends BasePlayer {
    * 渲染一帧
    */
   renderFrame(frame, now) {
-    if (!this.renderer) return;
+    if (!this.renderer || !frame.frame) return;
     this.renderer.render(frame.frame);
     this.renderedFrames++;
     this.lastRenderedDts = frame.dts;
@@ -4378,6 +4412,9 @@ class Canvas2DRenderer {
     this.frameCount = 0;
     this.lastFpsUpdate = performance.now();
     this.lastFps = 0;
+    this.cachedImageData = null;
+    this.cachedWidth = 0;
+    this.cachedHeight = 0;
     this.canvas = canvas;
     this.ctx = canvas.getContext("2d");
     if (!this.ctx) {
@@ -4392,12 +4429,18 @@ class Canvas2DRenderer {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
   render(frame) {
+    if (!frame || !frame.data) return;
     const { width, height, data } = frame;
     if (this.canvas.width !== width || this.canvas.height !== height) {
       this.canvas.width = width;
       this.canvas.height = height;
+      this.cachedImageData = this.ctx.createImageData(width, height);
+      this.cachedWidth = width;
+      this.cachedHeight = height;
     }
-    const imageData = new ImageData(new Uint8ClampedArray(data), width, height);
+    const imageData = this.cachedImageData;
+    const dest = imageData.data;
+    dest.set(data);
     this.ctx.putImageData(imageData, 0, 0);
   }
   updateFps() {
@@ -4467,6 +4510,10 @@ class EcPlayerCore {
       await this.player.finishInitDecoder(initResult);
       this.callbacks.onStateChange?.({ isLoaded: true });
     } catch (error) {
+      if (error?.name === "AbortError") {
+        console.log("[EcPlayerCore] Load aborted (expected)");
+        return;
+      }
       console.error("[EcPlayerCore] Load failed:", error);
       this.callbacks.onError?.(error);
       throw error;
@@ -4810,12 +4857,12 @@ const _EnvDetector = class _EnvDetector {
       // function index: 0
       // Code section (10)
       10,
-      19,
+      23,
       1,
-      // section id=10, size=19, 1 func
-      17,
+      // section id=10, size=23, 1 func
+      21,
       0,
-      // func body size=17, 0 locals
+      // func body size=21, 0 locals
       // v128.const i32x4 0 0 0 0
       253,
       12,