Chromium浏览器中脱离DOM的video元素无法向canvas推流问题

Chromium系浏览器（Chrome、Edge等）会对未挂载到DOM或不可见的video元素做资源优化，自动暂停视频解码来节省CPU/GPU资源，这就是你遇到黑帧或暂停问题的核心原因。下面是几个可行的解决办法：

方法1：强制未挂载video持续解码播放 #

给未挂载的video元素配置关键属性，并在用户交互上下文内触发播放，配合requestAnimationFrame持续绘制帧：

// 创建未挂载的video元素，配置核心属性
const video = document.createElement('video');
video.muted = true;       // 静音，绕过Chromium自动播放限制
video.playsinline = true; // 允许内联播放，避免自动全屏
video.autoplay = true;

// 必须在用户交互（比如按钮点击）内执行初始化，符合浏览器策略
document.querySelector('#start-btn').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    video.srcObject = stream;
    await video.play(); // 触发播放
    
    const canvas = document.getElementById('filter-canvas');
    const ctx = canvas.getContext('2d');
    
    function drawWithFilter() {
      // 将video帧绘制到canvas
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 这里添加你的实时滤镜逻辑，比如像素处理、滤镜函数调用等
      requestAnimationFrame(drawWithFilter);
    }
    
    drawWithFilter();
  } catch (err) {
    console.error('摄像头获取失败:', err);
  }
});

方法2：跳过video元素，直接处理摄像头流帧 #

使用MediaStreamTrackProcessor直接从摄像头流读取原始视频帧，完全不依赖video元素，从根源规避Chromium的优化限制：

document.querySelector('#start-btn').addEventListener('click', async () => {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    const videoTrack = stream.getVideoTracks()[0];
    
    // 创建帧处理器，直接读取摄像头原始帧
    const processor = new MediaStreamTrackProcessor({ track: videoTrack });
    const reader = processor.readable.getReader();
    
    const canvas = document.getElementById('filter-canvas');
    const ctx = canvas.getContext('2d');
    
    async function processFrames() {
      const { done, value: frame } = await reader.read();
      if (done) return;
      
      // 将帧绘制到canvas
      ctx.drawImage(frame, 0, 0, canvas.width, canvas.height);
      // 添加你的滤镜处理逻辑
      
      frame.close(); // 及时释放帧资源，避免内存泄漏
      requestAnimationFrame(processFrames);
    }
    
    processFrames();
  } catch (err) {
    console.error('摄像头获取失败:', err);
  }
});

关键注意点 #

• Chromium的自动播放策略要求：视频播放必须在用户交互上下文内触发（比如点击、触摸事件），所有初始化逻辑要放在用户事件回调里，否则play()会被浏览器拒绝。
• MediaStreamTrackProcessor需要Chrome 94+、Edge 94+以上版本支持，若需兼容旧版浏览器，可尝试ImageCapture API作为替代（功能相对有限）。

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