JavaScript中如何在隐藏canvas的同时正常捕获其视频流？

你遇到的空白问题本质和canvas.captureStream()无关，是你的绘制逻辑依赖了canvas的显示状态下的计算样式：

• 你的drawCanvas方法通过getComputedStyle(canvas)获取宽高设置canvas的绘图缓冲区尺寸
• 当你给canvas设置display: none时，元素的计算样式宽高会返回0，导致canvas的绘图缓冲区被设为0x0，绘制内容自然为空，捕获到的流也就变成空白了

两种常用实现方案任选其一即可：

方案1：修改canvas尺寸获取逻辑，不依赖显示样式 #

直接将canvas的绘图缓冲区尺寸和输入视频的分辨率绑定，不需要读取显示样式，就算设置display: none也不会影响绘制，修改后的drawCanvas示例：

function drawCanvas(canvas, img) {
  // 直接用视频帧的原始宽高做缓冲区基准，也可以自己固定需要的输出分辨率
  canvas.width = img.width;
  canvas.height = img.height;
  let ratio  = Math.min(canvas.width / img.width, canvas.height / img.height);
  let x = (canvas.width - img.width * ratio) / 2;
  let y = (canvas.height - img.height * ratio) / 2;
  canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
  canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height,
          x, y, img.width * ratio, img.height * ratio);
}

改完之后取消你代码里canvas.style.display = "none";的注释，也能正常捕获流。

方案2：不用display:none隐藏，用不影响计算样式的隐藏方式 #

如果不想改绘制逻辑，就换一种隐藏canvas的方法，这些方法不会改变元素的计算样式宽高，也不会在页面上显示：

• 绝对定位移出可视区

.output_canvas {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

• 透明度设为0

.output_canvas {
  opacity: 0;
  pointer-events: none;
}

• visibility设为hidden

.output_canvas {
  visibility: hidden;
}

内容的提问来源于stack exchange，提问作者古今中