使用MediaRecorder捕获Vanta.js动画时Blob为空，导出WebM无效

问题根源 #

• Canvas元素错误：你手动添加的<canvas id="canvas">并未被Vanta.js使用——VANTA会自动在目标元素(#ele)内部创建新的Canvas用于渲染动画，你捕获的是自己添加的空白Canvas，自然录不到内容。
• 录制时机过早：页面加载后立即启动录制时，Vanta.js可能还未完成初始化和第一帧渲染，导致录制的是空白内容。
• MIME类型不兼容：指定video/webm;codecs=h264不符合WebM标准（WebM默认使用VP8/VP9编码），部分浏览器无法正确编码，导致Blob无内容。

修复步骤 #

1. 获取Vanta实例的真实Canvas #

调用VANTA.CLOUDS()会返回Vanta实例，直接使用实例的canvas属性获取动画渲染的真实Canvas。

2. 等待Vanta初始化完成再录制 #

利用Vanta的onReady回调，确保动画开始渲染后再启动录制。

3. 修正MediaRecorder的MIME类型 #

使用标准的WebM编码格式，比如video/webm或video/webm;codecs=vp8。

完整修正代码 #

<body id="ele">
<div></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>

<script>
  // 保存Vanta实例，用于获取真实Canvas
  const vantaInstance = VANTA.CLOUDS({
    el: "#ele",
    onReady: () => {
      // Vanta初始化完成后启动录制
      startRecording();
    }
  });

  const startRecording = () => {
    // 使用Vanta实例的真实Canvas
    const canvas = vantaInstance.canvas;
    const chunks = [];
    const stream = canvas.captureStream(30);
    // 使用兼容的WebM MIME类型
    const rec = new MediaRecorder(stream, { type: "video/webm" });

    rec.ondataavailable = (e) => chunks.push(e.data);
    rec.onstop = (e) => downloadVideo(new Blob(chunks, { type: "video/webm" }));

    rec.start();
    setTimeout(() => {
      rec.stop();
    }, 1000);
  };

  const downloadVideo = (blob) => {
    const div = document.querySelector("div");
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "test.webm";
    a.className = "button";
    a.innerText = "点击下载视频";
    div.appendChild(a);
  };
</script>
</body>

额外注意事项 #

• 确保浏览器支持MediaRecorder和canvas.captureStream()（现代主流浏览器均支持）。
• 如果录制的视频仍有问题，可以尝试调整captureStream的帧率参数，或延长录制时间确认内容是否正常。

内容的提问来源于stack exchange，提问作者Laurie W