捕获后未初始化 NS 错误 html canvas

Question

我正在尝试使用 javascript/html 录制 svg 动画。这是我到目前为止尝试过的：

<canvas id="canv">
    <svg width="370" height="370" viewBox="0 0 370 370" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- my svg is here, full code is below because i don't think it's important -->
    </svg>
</canvas>
<style>
    @keyframes animation{
        from{
            opacity: 0;
            transform: translateY(20%);
        }to{
            opacity: 1;
            transform: translateY(0);
        }
    }
    #bubbles{
        animation: animation 1s linear;
    }
</style>
<script>
const canvas = document.getElementById("canv")

var videoStream = canvas.captureStream(30);
const render = () => {
    videoStream.getVideoTracks()[0].requestFrame();
}
setInterval(render, 33)
var mediaRecorder = new MediaRecorder(videoStream);
var chunks = [];
mediaRecorder.ondataavailable = function(e) {
    chunks.push(e.data);
};
mediaRecorder.onstop = function(e) {
    var blob = new Blob(chunks, { 'type' : 'video/mp4' });
    chunks = [];
    var videoURL = URL.createObjectURL(blob);
    video.src = videoURL;
};

mediaRecorder.start();
setTimeout(() => {
    mediaRecorder.stop();
}, 1000)
</script>

我从 https://medium.com/@amatewasu/how-to-record-a-canvas-element-d4d0826d3591 获得了源代码并且我正在使用 firefox。完整来源：https://paste.gg/p/anonymous/89d475bc50bc469dad827a620d3f7c02

问题：我收到此错误并且未显示任何内容：

Answer 1

您需要在 canvas 上初始化一个上下文，然后 才能从中捕获流，为此，您调用它的 getContext()方法。

然后您需要使用该上下文的方法在其上实际绘制一些内容，这就是 MediaStream 将捕获的内容。

在 canvas 中附加元素，将 SVG 图像作为独立文档加载到此中，并在加载后使用其 drawImage() 在 2D 上下文中绘制它方法。（我的 this answer 展示了如何从内联
但是，drawImage() 总是只绘制动画图像的第一帧，因此对于您的情况来说它可能没那么有用。
事实上，在 canvas 上绘制 SVG 动画真的没有什么简单的方法。您可以尝试手动为每一帧生成一个新的独立 SVG 文档，更新所有计算样式或 SMIL 状态并通过绘制它。但是加载图像将是异步的，生成它可能计算量大，可能会消耗内存，并且整个过程与实际动画不同步的风险很大。

另一种解决方案是使用 2D 上下文的绘图 API 来再现 SVG，这至少是同步的，因此不同步的风险较小，但编写的代码更复杂（一些库喜欢canvg 可能有助于完成此任务，但您仍然必须找到在每一帧提取动画当前状态的方法。

捕获后未初始化 NS 错误 html canvas

NS Error not initialized after capturing html canvas

javascript

html

canvas