我使用Vanta js创建动画背景并使用mediaRecorder将画布捕获为webm。页面将从头开始记录，1秒后停止并导出webm。
但是，blob 中没有存储任何内容，导出的 webm 是空的。
有什么建议吗？谢谢！
<body id="ele">
<div><canvas id="canvas"></canvas></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.CLOUDS("#ele");
</script>
<script>
const startRecording = () => {
const newcanvas = document.querySelector("canvas");
const chunks = []; // here we will store our recorded media chunks (Blobs)
const stream = newcanvas.captureStream(30); // grab our canvas MediaStream
const rec = new MediaRecorder(stream); // init the recorder
// every time the recorder has new data, we will store it in our array
rec.ondataavailable = (e) => chunks.push(e.data);
// only when the recorder stops, we construct a complete Blob from all the chunks
rec.onstop = (e) =>
downloadVideo(new Blob(chunks, { type: "video/webm;codecs=h264" }));
rec.start();
setTimeout(() => {
rec.stop();
}, 1000); // stop recording in 1s
};
const downloadVideo = async (blob) => {
const div = document.querySelector("div");
var url = URL.createObjectURL(blob);
console.log(url);
var a = document.createElement("a");
a.href = url;
a.download = "test.webm";
a.className = "button";
a.innerText = "click here to download";
div.appendChild(a);
};
startRecording();
</script>
</body>
只需从 html 中删除
<canvas id="canvas"></canvas>用于查询画布元素的 Javascript 代码会导致获取其中没有数据的元素。