WebCodec(avc1.640028)解码输出回调与帧质量问题问询

问题场景 #

使用WebCodec解码avc1.640028格式视频时，两种解码方式呈现明显画质差异：

• 在requestAnimationFrame单个tick内仅调用一次解码：

  VideoDecoder.decode(
    new EncodedVideoChunk(sample)
  );
  

  此时output回调基本在每个tick触发，但视频画质较差。
• 同一tick内多次调用上述解码代码时，output回调输出的帧画质良好。

核心疑问 #

是否因解码器依赖后续样本？是否只有后续样本在同一tick入队时，解码器才能引用它们；若样本在下一tick入队，解码器会直接输出不完整帧？若猜测成立，同一tick内需解码多少样本才能保证画质正常？

参考数据 #

1. 解码与渲染分tick执行（先解码后渲染）：画质正常 #

日志如下：

decode:0 frame
decode:1 frame
decode:2 frame
decode:3 frame
decode:4 frame
decode:5 frame
decode:6 frame
decode:7 frame
decode:8 frame
decode:9 frame
decode:10 frame
decode:11 frame
decode:12 frame
decode:13 frame
decode:14 frame
decode:15 frame
decode:16 frame
decode:17 frame
decode:18 frame
decode:19 frame
decode:20 frame
decode:21 frame
decode:22 frame
decode:23 frame
decode:24 frame
decode:25 frame
decode:26 frame
decode:27 frame
decode:28 frame
decode:29 frame
decode:30 frame
decode:31 frame
decode:32 frame
decode:33 frame
decode:34 frame
decode:35 frame
decode:36 frame
decode:37 frame
decode:38 frame
decode:39 frame
decode:40 frame
decode:41 frame
decode:42 frame
decode:43 frame
decode:44 frame
decode:45 frame
decode:46 frame
decode:47 frame
decode:48 frame
decode:49 frame
decode:50 frame
decode:51 frame
decode:52 frame
decode:53 frame
decode:54 frame
decode:55 frame
decode:56 frame
decode:57 frame
decode:58 frame
decode:59 frame
decode:60 frame
decode:61 frame
decode:62 frame
decode:63 frame
decode:64 frame
decode:65 frame
decode:66 frame
decode:67 frame
decode:68 frame
decode:69 frame
decode:70 frame
decode:71 frame
decode:72 frame
decode:73 frame
decode:74 frame
decode:75 frame
decode:76 frame
decode:77 frame
decode:78 frame
decode:79 frame
decode:80 frame
decode:81 frame
decode:82 frame
decode:83 frame
decode:84 frame
decode:85 frame
decode:86 frame
decode:87 frame
decode:88 frame
decode:89 frame
decode:90 frame
decode:91 frame
decode:92 frame
decode:93 frame
decode:94 frame
decode:95 frame
decode:96 frame
decode:97 frame
decode:98 frame
decode:99 frame
render:0 frame
render:3 frame
render:2 frame
render:4 frame
render:1 frame
render:7 frame
render:6 frame
render:8 frame
render:5 frame
render:11 frame
render:10 frame
render:12 frame
render:9 frame
render:15 frame
render:14 frame
render:16 frame
render:13 frame
render:19 frame
render:18 frame
render:20 frame
render:17 frame
render:23 frame
render:22 frame
render:24 frame
render:21 frame
render:27 frame
render:26 frame
render:28 frame
render:25 frame
render:31 frame
render:30 frame
render:32 frame
render:29 frame
render:35 frame
render:34 frame
render:36 frame
render:33 frame
render:39 frame
render:38 frame
render:40 frame
render:37 frame
render:43 frame
render:42 frame
render:44 frame
render:41 frame
render:47 frame
render:46 frame
render:48 frame
render:45 frame
render:51 frame
render:50 frame
render:52 frame
render:49 frame
render:55 frame
render:54 frame
render:56 frame
render:53 frame
render:59 frame
render:58 frame
render:60 frame
render:57 frame
render:63 frame
render:62 frame
render:64 frame
render:61 frame
render:67 frame
render:66 frame
render:68 frame
render:65 frame
render:71 frame
render:70 frame
render:72 frame
render:69 frame
render:75 frame
render:74 frame
render:76 frame
render:73 frame
render:79 frame
render:78 frame
render:80 frame
render:77 frame
render:83 frame
render:82 frame
render:84 frame
render:81 frame
render:87 frame
render:86 frame
render:88 frame
render:85 frame
render:91 frame
render:90 frame
render:92 frame
render:89 frame
render:95 frame
render:94 frame
render:96 frame

画质截图：

2. 解码与渲染同tick执行：画质较差 #

日志如下：

decode:0 frame
decode:1 frame
decode:2 frame
decode:3 frame
decode:4 frame
render:0 frame
decode:5 frame
render:3 frame
decode:6 frame
render:2 frame
decode:7 frame
render:4 frame
decode:8 frame
render:1 frame
decode:9 frame
render:7 frame
decode:10 frame
render:6 frame
decode:11 frame
render:8 frame
decode:12 frame
render:5 frame
decode:13 frame
render:11 frame
decode:14 frame
render:10 frame
decode:15 frame
render:12 frame
decode:16 frame
render:9 frame
decode:17 frame
decode:18 frame
render:15 frame
render:14 frame
decode:19 frame
render:16 frame
decode:21 frame
render:13 frame
decode:22 frame
render:19 frame
decode:23 frame
render:18 frame
decode:24 frame
render:17 frame
decode:25 frame
render:23 frame
decode:26 frame
render:22 frame
decode:27 frame
render:24 frame
decode:28 frame
render:21 frame
decode:29 frame
render:27 frame
decode:30 frame
render:26 frame
decode:31 frame
render:28 frame
decode:32 frame
decode:33 frame
render:25 frame
render:31 frame
decode:34 frame
render:30 frame
decode:35 frame
render:32 frame
decode:36 frame
render:29 frame
decode:37 frame
render:35 frame
decode:38 frame
render:34 frame
decode:39 frame
render:36 frame
decode:40 frame
render:33 frame
decode:41 frame
render:39 frame
decode:43 frame
render:38 frame
decode:44 frame
render:40 frame
decode:45 frame
render:37 frame
decode:46 frame
render:43 frame
decode:47 frame
render:44 frame
decode:48 frame
render:41 frame
decode:49 frame
render:47 frame
decode:50 frame
render:46 frame
decode:51 frame
decode:52 frame
render:48 frame
decode:53 frame
render:45 frame
decode:54 frame
render:51 frame
decode:55 frame
render:50 frame
decode:56 frame
render:52 frame
render:49 frame
decode:57 frame
render:55 frame
decode:58 frame
render:54 frame
decode:59 frame
render:56 frame
decode:60 frame
render:53 frame
decode:61 frame
render:59 frame
decode:62 frame
render:58 frame
decode:63 frame
render:60 frame
decode:64 frame
render:57 frame
decode:65 frame
render:63 frame
decode:66 frame
render:62 frame
decode:67 frame
render:64 frame
decode:68 frame
render:61 frame
decode:69 frame
render:67 frame
decode:70 frame
render:66 frame
decode:71 frame
render:68 frame
decode:72 frame
render:65 frame
decode:73 frame
render:71 frame
decode:74 frame
render:70 frame
decode:75 frame
render:72 frame
decode:76 frame
render:69 frame
decode:77 frame
render:75 frame
decode:78 frame
render:74 frame
decode:79 frame
decode:80 frame
render:76 frame
render:73 frame
decode:81 frame
render:79 frame
decode:82 frame
render:78 frame
decode:83 frame
render:80 frame
decode:84 frame
render:77 frame
decode:85 frame
render:83 frame

画质截图：

原因验证与解释 #

你的猜测完全正确，这是H.264编码特性与WebCodec调度逻辑共同作用的结果：

1. H.264帧依赖机制：avc1.640028是H.264的MP4封装格式，H.264使用I/P/B帧结构，其中B帧需要同时依赖前面的I/P帧和后面的P/I帧才能完成完整解码。如果解码器仅收到当前B帧，后续参考帧未入队，为了避免阻塞渲染流程，解码器会输出基于已有数据的不完整预测帧，表现为画质模糊、出现块效应。
2. WebCodec的tick调度逻辑：在单个requestAnimationFrame tick内，若仅入队一个样本，解码器会判定当前没有更多待处理的参考帧，直接尝试解码输出；而同一tick内入队多个样本时，解码器能提前获取到B帧所需的后续参考帧，从而完成完整解码，输出正常画质的帧。

解决方案与建议 #

关于同一tick内需解码的样本数量，没有固定值，取决于视频的GOP（图像组）结构：

• 核心原则是确保当前待解码的B帧对应的前后参考帧都已入队。通常建议每个tick内入队至少1个完整GOP的样本（GOP长度一般为15-30帧，具体看视频编码参数）。
• 更稳妥的方案是先缓存一定数量的编码样本（比如2个GOP长度），再批量送入解码器，而非逐帧在每个tick单独入队。
• 另外，将解码与渲染拆分到不同tick执行（先批量解码再渲染）也能彻底规避这个问题，从你提供的正常画质日志可以看出，这种模式下解码器有足够的参考帧完成完整解码。

内容的提问来源于stack exchange，提问作者Guichi