如何仅在调用stream.requestFrame时记录HTML画布并保存结果？

问题描述

我正在尝试使用canvas.captureStream记录HTML画布动画。

但是，我不想现场录制画布。

相反，我只想在画布完全绘制后才逐帧记录。

为了按帧记录，我使用canvas.captureStream（0）提供了0的帧率。这样就可以确保仅在调用 stream.requestFrame()时捕获帧。

但是，我不知道从这里开始如何访问流或将其另存为视频文件。理想情况下，我可以使用MediaRecorder，但是MediaRecorder.ondataavailable与requestFrame（）不同步。这意味着它记录了所有内容，而完全忽略了requestFrame（）。

以下是说明我的问题的示例：

let stream;
let recording;
let downloadButton;
let chunks = [];
let recorder;
let interval;

function setup() {
    canvas = document.getElementById("canvas");
    recording = document.getElementById("recording");
    downloadButton = document.getElementById("downloadButton");
    ctx = canvas.getContext("2d");
    stream = canvas.captureStream(0);
    recorder = new MediaRecorder(stream);
    recorder.ondataavailable = function(event) {
        if (event.data && event.data.size > 0) {
            chunks.push(event.data);
        }
    }
    recorder.onstop = function() {
        let recordedBlob = new Blob(chunks,{ type: "video/webm" });
        recording.src = URL.createObjectURL(recordedBlob);
        downloadButton.href = recording.src;
        downloadButton.download = "RecordedVideo.webm";
    }
}

function toggleAnimation() {
    if (interval) {
        stream.getTracks().forEach(track => track.stop());
        recorder.stop();
        window.clearInterval(interval);
        interval = undefined;
    } else {
        // I kNow this Could be animated a lot faster,but this is just an example
        // Imagine something like raytracing,where it takes much longer to render a frame
        interval = window.setInterval(function() {
            ctx.fillStyle = "white";
            ctx.fillRect(0,canvas.width,canvas.height);
            ctx.fillStyle = "red";
            ctx.fillRect(canvas.width / 2 + (Math.random() * 50),canvas.height / 2 + (Math.random() * 50),32,32);
            ctx.fillStyle = "black";
            ctx.font = "16px Arial";
            ctx.fillText("How can I get this to capture frames",16,16);
          ctx.fillText("only when requestFrame() is called?",32);
            // This ideally would capture only the moving frames
            stream.getVideoTracks()[0].requestFrame();
        },500); // Example delay of 0.5 seconds between frames
        recorder.start();
    }
}

<body onload="setup();">
    <input type="button" value="Play and Record Animation / Stop and Save Recording" onclick="toggleAnimation();">
    <a id="downloadButton" class="button">Download Video</a>
    <div>
        <canvas id="canvas" width="320" height="240" style="border: 1px solid black;"></canvas>
        <video id="recording" width="320" height="240" controls></video>
  </div>
</body>

尽管可以通过降低时间延迟来避免此示例中的延迟，但请设想一下诸如光线跟踪之类的情况，在这些情况下帧之间会有更大的滞后。这是我要解决的问题。

任何帮助将不胜感激！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript mediarecorder video-capture