时间戳

首页 > 解决方案 > MediaRecorder API 无法以更高的帧速率录制

javascript - MediaRecorder API 无法以更高的帧速率录制

问题描述

我目前正在做一个项目，需要能够录制我的屏幕并将其本地保存到我的计算机上。

录音被保存为 webm，但每个人的帧率都很差，通常在 10-15 fps 左右。有没有办法提高录制的帧率？

我可以通过使用 MediaRecorder 选项和编解码器来提高录制质量，但这似乎根本不会影响我获得的帧速率。

这是我用来录制的代码：

const options = {
        mimeType: 'video/webm; codecs="vp9.00.41.8.00.01"',
        videoBitsPerSecond: 800 * Mbps,
        videoMaximizeFrameRate: true,
    };
mediaRecorder = new MediaRecorder(stream, options); 

mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.onstop = handleStop;

startBtn.onclick = e => {
    mediaRecorder.start();
    startBtn.innerHTML = 'Recording';
}

stopBtn.onclick = e => {
    mediaRecorder.stop();
    startBtn.innerHTML = 'Start';
}

function handleDataAvailable(e) {
    recordedChunks.push(e.data);
}

async function handleStop() {
    const blob = new Blob(recordedChunks, {
        mimeType: 'video/webm'
    });

    const buffer = Buffer.from(await blob.arrayBuffer());

    const { filePath } = await dialog.showSaveDialog({
        buttonLabel: 'Save video',
        defaultPath: `vid-${Date.now()}.webm`
    });

    console.log(filePath);

    if (filePath) {
        writeFile(filePath, buffer, () => console.log('video saved successfully'));
    }
}

我浏览了 MDN 文档并没有找到任何关于它的信息。我也尝试使用具有不同参数的不同编解码器，但结果总是相同的。

标签： javascriptscreen-recordingweb-mediarecorder

解决方案

您获得的帧速率对于任何标准屏幕捕获都是典型的。

加快速度的唯一方法是利用 GPU 的特定功能进行捕获和编码。这超出了 Web API 的范围。

推荐阅读