createObjectURL已弃用，如何将Canvas流实时传递至另一个窗口？

看起来你已经找到了一个非常靠谱的方案——用window.URL.createObjectURL(canvasStream)把子窗口Canvas的内容以流的形式同步到主窗口，这个思路完全没问题，而且在跨窗口实时画面传递的场景下效率很高。我来帮你把实现细节理清楚，再补充一些实用的优化点：

核心实现流程 #

1. 子窗口（摄像头采集窗口）的处理逻辑 #

子窗口需要先完成摄像头流的获取、Canvas绘制，再将Canvas转化为媒体流并把URL传递给主窗口：

// 子窗口代码
async function initCameraCanvas() {
  // 1. 获取摄像头媒体流
  try {
    const cameraStream = await navigator.mediaDevices.getUserMedia({ 
      video: { width: 640, height: 480 } // 指定分辨率，减少后续缩放开销
    });
    const video = document.createElement('video');
    video.srcObject = cameraStream;
    await video.play();

    // 2. 实时将摄像头画面绘制到子Canvas
    const childCanvas = document.getElementById('child-canvas');
    childCanvas.width = video.videoWidth;
    childCanvas.height = video.videoHeight;
    const ctx = childCanvas.getContext('2d');

    function drawFrame() {
      ctx.drawImage(video, 0, 0, childCanvas.width, childCanvas.height);
      requestAnimationFrame(drawFrame);
    }
    drawFrame();

    // 3. 将Canvas转为媒体流，生成Blob URL并发送给主窗口
    const canvasStream = childCanvas.captureStream(30); // 设置帧率，默认30fps
    const streamUrl = window.URL.createObjectURL(canvasStream);
    window.opener.postMessage(
      { type: 'SYNC_CANVAS_STREAM', streamUrl: streamUrl },
      window.origin // 用同源替代*，提升安全性
    );
  } catch (err) {
    console.error('子窗口初始化失败:', err);
    window.opener.postMessage({ type: 'ERROR', msg: err.message }, window.origin);
  }
}

initCameraCanvas();

2. 主窗口的接收与绘制逻辑 #

主窗口监听子窗口的消息，拿到流URL后加载并实时绘制到自身Canvas：

// 主窗口代码
const mainCanvas = document.getElementById('main-canvas');
const mainCtx = mainCanvas.getContext('2d');
const streamVideo = document.createElement('video');
let childWindow = null;

// 监听子窗口消息
window.addEventListener('message', (event) => {
  // 验证消息来源，确保安全性
  if (event.source !== childWindow) return;

  switch (event.data.type) {
    case 'SYNC_CANVAS_STREAM':
      streamVideo.src = event.data.streamUrl;
      streamVideo.play().catch(err => console.error('流播放失败:', err));
      
      // 实时绘制流画面到主Canvas
      function syncCanvas() {
        mainCtx.drawImage(streamVideo, 0, 0, mainCanvas.width, mainCanvas.height);
        requestAnimationFrame(syncCanvas);
      }
      syncCanvas();
      break;
    case 'ERROR':
      console.error('子窗口传来错误:', event.data.msg);
      break;
  }
});

// 打开子窗口
function openCameraWindow() {
  childWindow = window.open('camera-window.html', 'CameraCapture', 'width=680,height=520');
  
  // 子窗口关闭时清理资源
  childWindow.addEventListener('unload', () => {
    window.URL.revokeObjectURL(streamVideo.src);
    streamVideo.srcObject = null;
    childWindow = null;
  });
}

// 调用打开子窗口
openCameraWindow();

关键注意事项与优化建议 #

• 安全优化：永远不要在postMessage中使用*作为目标源，改用window.origin确保只有同源窗口能接收消息，避免跨域安全风险。
• 资源清理：子窗口关闭时，主窗口一定要调用window.URL.revokeObjectURL()释放Blob URL资源，同时清空video的srcObject，防止内存泄漏。
• 性能调优：根据实际需求调整captureStream()的帧率（比如低帧率场景设为15），同时让子Canvas的尺寸和摄像头流分辨率一致，减少绘制时的缩放计算。
• 替代方案对比：如果不需要实时性极高的同步，也可以用toDataURL()将Canvas转为base64字符串传递，但这种方式在高分辨率下会产生大量数据，性能远不如媒体流方案。

内容的提问来源于stack exchange，提问作者Marc-Antoine Brodeur