Chrome扩展中如何冻结MediaStreamTrack并替换为静态图像？

核心思路 #

要实现“冻结”摄像头轨道为静态图像，关键是生成与原轨道参数完全匹配的静态MediaStreamTrack，再通过标准的MediaStream API替换原轨道。之前的黑屏问题大多是因为新轨道的分辨率、帧率等参数与原轨道不匹配，导致Google Meets无法兼容。

步骤与代码实现 #

1. 获取原轨道参数与当前帧 #

首先找到页面中的视频元素，提取原摄像头轨道的关键参数，并捕获当前画面帧：

// 获取页面中的目标视频元素（可根据实际情况调整选择器）
const vid = document.querySelector('video[srcObject]:not([id*="screen"])');
if (!vid) return;

// 获取原摄像头轨道
const originalTrack = vid.srcObject.getVideoTracks()[0];
if (!originalTrack) return;

// 提取原轨道的核心参数
const trackSettings = originalTrack.getSettings();
const { width, height } = trackSettings;
const frameRate = trackSettings.frameRate || 30; // 兼容无明确帧率配置的情况

2. 生成静态图像轨道 #

使用Canvas绘制捕获到的帧，再从Canvas生成与原轨道参数匹配的MediaStreamTrack：

// 创建与原轨道同尺寸的Canvas
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');

// 绘制当前画面帧到Canvas
ctx.drawImage(vid, 0, 0, width, height);

// 定期重绘（确保Canvas流持续输出，适配部分场景的渲染校验）
setInterval(() => {
  ctx.drawImage(vid, 0, 0, width, height);
}, 1000 / frameRate);

// 从Canvas生成静态轨道，帧率匹配原轨道
const staticTrack = canvas.captureStream(frameRate).getVideoTracks()[0];

3. 替换原轨道 #

通过MediaStream的标准方法移除原轨道并添加新的静态轨道：

const stream = vid.srcObject;
// 移除原摄像头轨道
stream.removeTrack(originalTrack);
// 添加静态图像轨道
stream.addTrack(staticTrack);

// 可选：停止原轨道以释放摄像头资源
originalTrack.stop();

4. Chrome扩展中的特殊处理 #

由于Chrome扩展的Content Script与页面上下文隔离，需要将代码注入到页面主世界才能正常访问MediaStream对象：

// Content Script中注入代码到页面主世界
const injectScript = document.createElement('script');
injectScript.textContent = `
(function() {
  function freezeCamera() {
    const vid = document.querySelector('video[srcObject]:not([id*="screen"])');
    if (!vid) return;

    const originalTrack = vid.srcObject.getVideoTracks()[0];
    if (!originalTrack) return;

    const trackSettings = originalTrack.getSettings();
    const { width, height } = trackSettings;
    const frameRate = trackSettings.frameRate || 30;

    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(vid, 0, 0, width, height);

    setInterval(() => {
      ctx.drawImage(vid, 0, 0, width, height);
    }, 1000 / frameRate);

    const staticTrack = canvas.captureStream(frameRate).getVideoTracks()[0];
    const stream = vid.srcObject;
    stream.removeTrack(originalTrack);
    stream.addTrack(staticTrack);
    originalTrack.stop();
  }

  // 页面加载完成后执行，或根据扩展需求触发
  if (document.readyState === 'complete') {
    freezeCamera();
  } else {
    window.addEventListener('load', freezeCamera);
  }
})();
`;
document.body.appendChild(injectScript);
injectScript.remove();

为什么之前的方法失败？ #

• 修改enabled属性：Chrome中MediaStreamTrack.enabled = false会让轨道输出黑帧，而非冻结当前画面，不符合需求。
• 调用stop()：直接终止轨道会触发Meets的摄像头断开检测，导致界面提示异常。
• Canvas流参数不匹配：之前生成的Canvas流没有对齐原轨道的分辨率、帧率，Meets的视频渲染逻辑会拒绝显示，导致黑屏。
• Object.defineProperty替换：MediaStream的轨道列表是动态维护的，直接修改属性无法触发Meets的轨道更新逻辑，必须使用removeTrack/addTrack标准API。

内容的提问来源于stack exchange，提问作者A. Abramov