fix: 续解码架构 + 帧队列扩容 1024 + 重播/seek/destroy 同步帧计数

2026-08-21 20:30:45 +08:00
parent a34639975c
commit 0996ba45ec
1 changed files with 64 additions and 17 deletions
@@ -243,9 +243,11 @@ export function useCanvasPlayer(

  // ── 内部引用 ──
  const decoderRef = useRef<VideoDecoder | null>(null)
-  const frameQueueRef = useRef(new FrameQueue(600))
+  const frameQueueRef = useRef(new FrameQueue(1024))
  /** 已解码的片段索引集合，用于按需解码（先标记防重入，失败时移除允许重试） */
  const decodedSegmentsRef = useRef(new Set<number>())
+  /** 每个片段已解码的帧数，用于 decodeAroundPosition 继续未完成解码 */
+  const decodedFrameCountsRef = useRef(new Map<number, number>())
  /** 解码代数计数器，seek 时递增以作废正在进行的异步解码 */
  const decodeGenerationRef = useRef(0)
  const rafRef = useRef<number>(0)
@@ -477,7 +479,12 @@ export function useCanvasPlayer(

  // ── 初始化 VideoDecoder 并解码指定片段 ──
  const decodeSegment = useCallback(
-    async (_buffer: ArrayBuffer, meta: SegmentMeta, maxFrames?: number): Promise<void> => {
+    async (
+      _buffer: ArrayBuffer,
+      meta: SegmentMeta,
+      maxFrames?: number,
+      startFrame: number = 0,
+    ): Promise<void> => {
      console.log(`[DIAG_v2] >>> decodeSegment ENTER assetId=${meta.assetId}`)
      if (isDestroyedRef.current) return

@@ -573,7 +580,8 @@ export function useCanvasPlayer(
      let decodedCount = 0
      let skippedCount = 0
      let decodeErrors = 0
-      for (const sample of samplesCollected) {
+      for (let si = startFrame; si < samplesCollected.length; si++) {
+        const sample = samplesCollected[si]
        // seek/重播时旧的 decodeSegment 立即退出，不往帧队列推废帧
        if (decodeGenerationRef.current !== gen) {
          console.log(
@@ -642,6 +650,20 @@ export function useCanvasPlayer(
        `[useCanvasPlayer] Segment ${meta.assetId}: decoded ${decodedCount}, skipped ${skippedCount}, errors ${decodeErrors}, decoder.state=${decoder.state}`,
      )

+      // 记录该片段已解码帧数（用于 decodeAroundPosition 续解码）
+      const totalDecoded = decodedCount + startFrame
+      const metaArr = segmentMetaRef.current
+      for (let idx = 0; idx < metaArr.length; idx++) {
+        if (metaArr[idx].assetId === meta.assetId) {
+          if (totalDecoded >= samplesCollected.length) {
+            decodedFrameCountsRef.current.set(idx, Infinity)
+          } else {
+            decodedFrameCountsRef.current.set(idx, totalDecoded)
+          }
+          break
+        }
+      }
+
      // 不做 flush，每个片段独立解码器，flush 在某些 Chromium 版本下会永久挂起
      console.log(`[useCanvasPlayer] Segment ${meta.assetId}: decode done, skip flush`)
    },
@@ -658,7 +680,6 @@ export function useCanvasPlayer(
      const metas = segmentMetaRef.current
      if (!metas || metas.length === 0) return

-      // 记录当前代数，seek 后代数变化则中止
      const gen = decodeGenerationRef.current

      let targetIdx = -1
@@ -673,27 +694,48 @@ export function useCanvasPlayer(
      }
      if (targetIdx === -1) targetIdx = metas.length - 1

-      for (
-        let i = Math.max(0, targetIdx - 1);
-        i <= Math.min(metas.length - 1, targetIdx + 1);
-        i++
-      ) {
-        // seek 已作废当前解码任务
+      // 向前看 2 个片段，提前预解码避免切换卡顿
+      const endIdx = Math.min(metas.length - 1, targetIdx + 2)
+      for (let i = Math.max(0, targetIdx - 1); i <= endIdx; i++) {
        if (decodeGenerationRef.current !== gen) return
-        if (decodedSegmentsRef.current.has(i)) continue
        const meta = metas[i]
        const buffer = segmentDataRef.current.get(meta.assetId)
        if (!buffer) continue
-        // 先标记为解码中，防止下一帧渲染时重复发起解码
+
+        const frameCount = decodedFrameCountsRef.current.get(i) ?? 0
+        const totalSamples = meta.samples.length
+
+        // 完全解码的片段：检查队列深度
+        if (frameCount === Infinity) {
+          const availableFrames = frameQueueRef.current.size
+          if (availableFrames > 90) continue
+          // 队列不足，强制重新解码
+          decodedFrameCountsRef.current.delete(i)
+          decodedSegmentsRef.current.delete(i)
+        }
+
+        // 已标记为解码中但未完成：续解码
+        if (decodedSegmentsRef.current.has(i)) {
+          const currentCount = decodedFrameCountsRef.current.get(i) ?? 0
+          if (currentCount >= totalSamples) continue
+          try {
+            await decodeSegment(buffer, meta, 300, currentCount)
+          } catch (e) {
+            console.warn(`[useCanvasPlayer] 续解码片段 ${i} 失败:`, e)
+          }
+          if (decodeGenerationRef.current !== gen) return
+          continue
+        }
+
+        // 未开始解码的片段：开始解码
        decodedSegmentsRef.current.add(i)
        try {
-          await decodeSegment(buffer, meta, 300)
+          const startFrame = decodedFrameCountsRef.current.get(i) ?? 0
+          await decodeSegment(buffer, meta, 300, startFrame)
        } catch (e) {
-          // 解码失败则移除标记，允许后续重试
          decodedSegmentsRef.current.delete(i)
          console.warn(`[useCanvasPlayer] 按需解码片段 ${i} 失败:`, e)
        }
-        // await 后再次检查代数，seek 期间不更新标记
        if (decodeGenerationRef.current !== gen) return
      }
    },
@@ -845,8 +887,10 @@ export function useCanvasPlayer(
    // 播放结束后重播 或 从起点重新播放：重置到起点，清空解码缓存
    if (state.currentTime >= totalDuration - 0.1 || state.currentTime <= 0.1) {
      decodeGenerationRef.current++
-      // 不清空帧队列：帧按绝对时间戳存储，重播时 getCurrentFrame(≈0) 仍能正确找到第一帧
-      // 不清空 decodedSegmentsRef：所有片段已在 init 时解码完成，重播不需要重新解码
+      // 清空帧计数：让 decodeAroundPosition 认为所有片段都需要解码
+      decodedFrameCountsRef.current.clear()
+      decodedSegmentsRef.current.clear()
+      // 不清空帧队列：旧帧仍有效（按绝对时间戳索引），getCurrentFrame 可继续使用
      playStartOffsetRef.current = 0
      setState((s) => ({ ...s, currentTime: 0 }))
    }
@@ -880,6 +924,7 @@ export function useCanvasPlayer(
      // 清空帧队列（clear 内部会 close 所有帧）+ 清空已解码标记
      frameQueueRef.current.clear()
      decodedSegmentsRef.current.clear()
+      decodedFrameCountsRef.current.clear()
      await decodeAroundPosition(clampedTime)
    },
    [totalDuration, decodeAroundPosition],
@@ -899,6 +944,7 @@ export function useCanvasPlayer(
    segmentDataRef.current.clear()
    segmentMetaRef.current = []
    decodedSegmentsRef.current.clear()
+    decodedFrameCountsRef.current.clear()
  }, [])

  // ── 预加载下一个片段的数据 ──
@@ -986,6 +1032,7 @@ export function useCanvasPlayer(
      // 3. 按需解码：初始只解码前 3 个片段，后续通过 decodeAroundPosition 动态加载
      //    避免一次性全量解码导致 frameQueue 环形缓冲区旧帧被丢弃引发黑屏
      decodedSegmentsRef.current.clear()
+      decodedFrameCountsRef.current.clear()
      const initGen = decodeGenerationRef.current
      const initialDecodeCount = Math.min(metas.length, 3)
      console.log(