Chrome非活跃标签页下CanvasRenderingContext2D从video调用drawImage异常问题

成因 #

Chrome为了降低后台标签页的功耗占用、提升前台标签页的运行性能，针对不可见状态的video元素实现了专门的渲染节流策略：
当标签页切换到后台后，即便video的音频正常播放、timeupdate事件正常触发，视频帧的解码输出流水线会被主动冻结，仅保留标签页切走瞬间的最后一帧作为缓存供调用，所以无论用什么精度的定时器执行ctx.drawImage(video, 0, 0)，拿到的都是同一帧画面。该现象不是Canvas的bug，是video元素的后台功耗优化逻辑导致的预期表现。

解决方案 #

可以根据你的业务场景选择以下适配方案：

• 避免将video元素设置为完全不可见：不要用display: none、visibility: hidden隐藏video，可将其插入DOM后设置极小的可见尺寸，例如：

  .hide-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0.01;
    pointer-events: none;
  }
  

  只要浏览器判定video属于可见渲染元素，就不会触发帧冻结逻辑。
• 从媒体流层面直接取帧：如果必须完全隐藏video，可通过MediaStreamTrackProcessor接口直接从video的媒体流中读取实时解码帧，绕开DOM层的渲染节流，该方案仅支持Chrome 94及以上版本。
• 启用画中画模式：将video切换为画中画播放状态时，Chrome会将其判定为前台活跃元素，不会触发后台节流。
• 可控环境下关闭后台节流：如果是内部工具、可配置浏览器参数的场景，可给Chrome添加启动参数--disable-backgrounding-occluded-windows，关闭后台标签页的渲染节流逻辑。

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