本文详解为何 MediaRecorder 录制 Vanta.js 动画时 blob 为空，并提供完整可运行的解决方案：关键在于避免手动声明冗余 ，改用 Vanta 自动注入的 canvas 元素，并确保录制前动画已就绪。
本文详解为何 `mediarecorder` 录制 vanta.js 动画时 `blob` 为空，并提供完整可运行的解决方案：关键在于避免手动声明冗余 `
在 Web 动画录制场景中，Vanta.js（基于 Three.js 的动态背景库）常被用于创建炫酷的 Canvas 动画。但开发者尝试用 canvas.captureStream() + MediaRecorder 捕获其画面时，常遇到 blob 为 null 或导出 WebM 文件为空的问题。根本原因并非 API 使用错误，而是DOM 结构与 canvas 生命周期不匹配。
? 根本问题分析
Vanta.js 在初始化时（如 VANTA.CLOUDS("#ele")）会自动创建并插入一个 <canvas></canvas> 元素到目标容器 #ele 中。而原始代码中显式写了 <canvas id="canvas"></canvas>，导致页面存在两个 canvas：
- 一个是空的、无渲染内容的手动
<canvas></canvas>； - 另一个是 Vanta 动态创建、承载真实动画的 canvas。
当执行 document.querySelector("canvas") 时，浏览器返回的是第一个匹配的 canvas（即空的那个），其 captureStream() 虽然成功返回流，但该流始终无帧数据，最终 ondataavailable 不触发或仅触发空 chunk，chunks 数组为空 → new Blob(chunks) 得到空 Blob → 下载文件体积为 0。
✅ 正确实践方案
1. 移除冗余 <canvas></canvas> 标签
HTML 中不要预先声明 <canvas></canvas>，完全交由 Vanta 管理 DOM：
<div style="display: flex; flex-direction: column;"> <div id="link" style="height: 20px;"></div> <div id="ele"></div> <!-- Vanta 将在此插入 canvas --> </div>
2. 延迟录制，确保动画就绪
Vanta 初始化是异步的（需加载资源、构建场景）。应在 VANTA.CLOUDS() 的回调中启动录制，或使用 setTimeout/requestAnimationFrame 确保 canvas 已渲染至少一帧：
let vantaEffect;
VANTA.CLOUDS({
el: "#ele",
// 其他配置...
onReady: (effect) => {
vantaEffect = effect;
startRecording(); // ✅ 确保动画已启动后再录制
}
});3. 完整可运行录制逻辑（含健壮性增强）
const startRecording = () => {
const canvas = document.querySelector("#ele canvas"); // ✅ 精准定位 Vanta 创建的 canvas
if (!canvas) {
console.error("Vanta canvas not found. Ensure VANTA.CLOUDS has initialized.");
return;
}
const stream = canvas.captureStream(60); // 推荐 60fps，兼容性更好
const mediaRecorder = new MediaRecorder(stream, {
mimeType: "video/webm;codecs=vp8" // ✅ 使用 VP8 更兼容，H.264 需检查浏览器支持
});
const chunks = [];
mediaRecorder.ondataavailable = (e) => {
if (e.data.size > 0) chunks.push(e.data); // 过滤空 chunk
};
mediaRecorder.onstop = () => {
if (chunks.length === 0) {
console.warn("No video data captured — check if canvas is visible and animating.");
return;
}
const blob = new Blob(chunks, { type: "video/webm" });
downloadVideo(blob);
};
mediaRecorder.start();
setTimeout(() => mediaRecorder.stop(), 2000); // 录制 2 秒
};
const downloadVideo = (blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "vanta-animation.webm";
a.textContent = "✅ Click to download recorded animation";
a.style.display = "block";
document.querySelector("#link").appendChild(a);
};⚠️ 关键注意事项
-
不要依赖
querySelector("canvas")：多个 canvas 时行为不可控，务必用#ele canvas或保存 Vanta 实例后访问effect.canvas。 -
避免过短录制时间：
1000ms可能不足——首帧渲染、编码器启动均需时间，建议 ≥1500ms。 -
检查 MIME 类型兼容性：
video/webm;codecs=h264在部分浏览器（如 Safari）不支持；优先用vp8或vp9。 -
确保 canvas 可见且非
display:none/visibility:hidden：隐藏元素无法捕获有效帧。 -
服务端环境限制：若在本地
file://协议下运行，captureStream()可能受限，建议部署到http(s)://服务器测试。
通过以上调整，即可稳定捕获 Vanta.js 动画并生成可用的 WebM 视频文件。核心原则是：尊重库的 DOM 管理逻辑，同步录制时机，验证媒体流有效性。
