本文详解解决canvas.capturestream()返回黑屏问题的关键：必须启用临时视频元素的autoplay属性，否则视频帧无法解码，导致canvas内容为空。
在Web实时音视频处理中，一个常见需求是：捕获用户摄像头流 → 在
核心原因在于：
你的代码中创建了temp_video用于接收原始流，但遗漏了关键一行：
temp_video.autoplay = true; // ✅ 必须添加！
此外，还需注意以下几点以确保稳定性：
- 等待元数据就绪：在设置srcObject后，应监听loadedmetadata事件，确保视频尺寸可用后再初始化Canvas尺寸，避免videoWidth为0；
- 主动触发播放：部分浏览器（尤其移动端）对自动播放策略更严格，建议调用temp_video.play().catch(...)增强兼容性；
- 帧率同步优化：setInterval易受JS执行延迟影响，推荐改用requestAnimationFrame实现更平滑的逐帧捕获；
- Canvas尺寸动态适配：视频分辨率可能随设备变化，应在resize或loadedmetadata中更新Canvas宽高。
修正后的完整可运行示例：
<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;
// ✅ 等待元数据加载完成，确保尺寸可用
return new Promise((resolve) => {
temp_video.onloadedmetadata = () => {
// 初始化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);
// ✨ 此处可添加任意Canvas图像处理逻辑（如 ctx.filter = 'grayscale(100%)';）
}
requestAnimationFrame(renderLoop);
}
renderLoop();
// ✅ 返回 captureStream（无需传入帧率参数，浏览器自动适配）
resolve(temp_canvas.captureStream());
};
});
}
const constraints = { audio: false, video: true };
async function handleSuccess(stream) {
try {
const processedStream = await manipulatedVideoStream(stream);
video.srcObject = processedStream;
} catch (err) {
console.error('Processing stream failed:', err);
}
}
function handleError(error) {
console.error('getUserMedia error:', error);
}
navigator.mediaDevices.getUserMedia(constraints)
.then(handleSuccess)
.catch(handleError);
</script>
</html>⚠️ 注意事项总结：
- temp_video必须设置autoplay = true且建议muted = true，否则在多数现代浏览器（尤其iOS Safari、Chrome on Android）中无法解码帧；
- 不要依赖setInterval控制帧率——captureStream()本身会按需采集Canvas最新状态，requestAnimationFrame更可靠；
- captureStream()返回的流默认以Canvas刷新频率为基准，无需手动传入帧率参数（传入反而可能引发兼容性问题）；
- 若需音频同步，请额外从原始流中分离音频轨道并合并至处理后的视频流（使用new MediaStream([videoTrack, audioTrack])）。
掌握这一关键点，即可稳定实现“摄像头→Canvas处理→MediaStream输出”的闭环流程。
