本文详解解决canvas.capturestream()返回黑屏问题的关键：必须启用临时视频元素的autoplay属性，否则无法触发帧捕获，导致输出流无画面。
在使用 canvas.captureStream() 将处理后的视频帧重新封装为 MediaStream 时，一个常见但极易被忽略的陷阱是：用于绘制源视频的 。你的代码中创建了 temp_video，但未设置 autoplay = true，也未等待其 loadeddata 或 canplay 事件，导致 temp_video.videoWidth 和 temp_video.videoHeight 初始为 0，drawImage 实际未绘制任何有效帧——因此 captureStream() 捕获到的是一系列空白帧，最终呈现为黑屏。
✅ 正确做法是：
- 设置 temp_video.autoplay = true 和 temp_video.muted = true（后者为避免浏览器静音策略阻断自动播放）；
- 等待 temp_video 进入可播放状态（推荐监听 'canplay' 事件），再启动绘制循环；
- 确保 canvas 尺寸在视频尺寸确定后才设置，避免 0×0 绘制；
- 使用 requestAnimationFrame 替代 setInterval，以实现更精准、更节能的帧同步（尤其在高负载或低性能设备上）。
以下是修复后的完整可运行示例：
<html>
<head></head>
<body>
<video id="video-id" playsinline autoplay muted></video>
</body>
<script>
const video = document.getElementById('video-id');
function manipulatedVideoStream(stream) {
const temp_video = document.createElement('video');
const temp_canvas = document.createElement('canvas');
const ctx = temp_canvas.getContext('2d');
// ✅ 关键修复：启用自动播放 + 静音
temp_video.autoplay = true;
temp_video.muted = true;
temp_video.srcObject = stream;
let animationId;
// ✅ 等待视频就绪后再开始绘制
temp_video.addEventListener('canplay', () => {
// 初始化 canvas 尺寸
temp_canvas.width = temp_video.videoWidth;
temp_canvas.height = temp_video.videoHeight;
// ✅ 推荐：使用 requestAnimationFrame 实现平滑帧捕获
function renderLoop() {
if (temp_video.readyState === temp_video.HAVE_ENOUGH_DATA) {
ctx.drawImage(temp_video, 0, 0, temp_canvas.width, temp_canvas.height);
// ✅ 示例：叠加红色边框（可替换为你自己的图像处理逻辑）
ctx.strokeStyle = 'red';
ctx.lineWidth = 4;
ctx.strokeRect(2, 2, temp_canvas.width - 4, temp_canvas.height - 4);
}
animationId = requestAnimationFrame(renderLoop);
}
renderLoop();
});
// 返回捕获流（无需传入帧率参数，captureStream 默认按实际绘制频率推流）
return temp_canvas.captureStream();
}
const constraints = { audio: false, video: true };
function handleSuccess(stream) {
video.srcObject = manipulatedVideoStream(stream);
}
function handleError(error) {
console.error('getUserMedia error:', error);
}
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
</script>
</html>⚠️ 注意事项：
- captureStream() 在 Chrome/Edge 中支持良好，Firefox 也已支持（需较新版本），但 Safari 目前不支持 canvas.captureStream()（截至 Safari 17+ 仍不可用），生产环境需做特性检测与降级处理；
- 若需音频同步处理，请结合 AudioContext 和 MediaStreamAudioSourceNode，但本例仅聚焦视频流；
- 避免在 drawImage 前频繁修改 canvas.width/height（会清空画布并重置上下文），应在尺寸稳定后统一设置。
总结：黑屏并非 captureStream 失效，而是上游数据未就绪所致。确保视频元素可播放、尺寸已知、绘制持续触发，即可稳定输出处理后的媒体流。
