WebCodecs的VideoDecoder是否支持HEVC视频流的透明度？

是的，可以通过VideoDecoder保留HEVC视频的透明度，问题出在默认的解码输出格式配置上，以下是具体解决步骤：

• 指定带alpha通道的输出像素格式
  默认情况下，VideoDecoder会输出不带alpha通道的YUV格式（比如I420），这类格式无法承载透明度信息，导致透明区域被渲染为黑色。你需要在VideoDecoderConfig中显式配置outputPixelFormat为支持alpha的RGBA/BGRA格式：

  const decoderConfig = {
    codec: 'hev1.1.6.L153.B0', // 需匹配你的HEVC视频实际编码参数
    codedWidth: 视频宽度,
    codedHeight: 视频高度,
    outputPixelFormat: 'RGBA' // 关键配置：启用带alpha的输出格式
  };
  

  注意：codec字段需要和你的视频编码参数完全匹配（可通过videoElement.videoTracks[0].getSettings().codec获取正确值）。

• 确保Canvas上下文支持alpha
  渲染解码后的VideoFrame时，确认Canvas使用的是支持alpha的2D上下文：

  const ctx = canvas.getContext('2d', { alpha: true }); // 默认即为true，但若之前显式设为false需修改
  

• 验证视频编码格式兼容性
  你的视频本身是带alpha通道的HEVC编码（比如HEVC Main 10 Profile with Alpha），这一点从video元素能正常显示透明可以确认，无需额外处理。

完成以上配置后，VideoDecoder解码输出的VideoFrame会包含完整的alpha通道信息，渲染到Canvas时就能正确显示透明区域，而非黑色。

内容的提问来源于stack exchange，提问作者Dániel Barta