完成录制按钮将旧屏幕录制再次保存到本地文件夹

如何解决完成录制按钮将旧屏幕录制再次保存到本地文件夹

我正在使用 RecordRTC 库来录制屏幕和扬声器/麦克风声音。我的界面上有三个按钮，例如开始录制、停止录制和完成录制。

开始录制按钮只是开始屏幕录制，如下所示：

var recorder;
var recorder2Screen2;

document.getElementById('btn-start-recording').onclick = function () {
    navigator.mediaDevices.getdisplayMedia({ audio: true,video: { width: 1280,height: 720 } }).then(function (screen) {
            callback(screen);
        }).catch(function (error) {
            alert('Unable to capture your screen. Please check console logs.');
            console.error(error);
    });
    
    recorder = RecordRTC(screen,{
        type: 'video'
    });

    recorder.startRecording();

    // release screen on stopRecording
    recorder.screen = screen;
    recorder2Screen2 = recorder;
};

停止录制按钮停止录制并将录制的屏幕视频保存到我电脑的本地文件夹中，然后重新启动录像机，如下所示：

document.getElementById('btn-stop-recording').onclick = function () {

recorder2Screen2.stopRecording(function () {
    getSeekableBlob(recorder2Screen2.getBlob(),function (seekableBlob) {
        PostScreenRecordedBlob(seekableBlob,getScreenRecordedFileName("webm"));
    });
});

recorder.startRecording();
};

最后，Finish Recording 按钮首先将录音（在单击停止按钮时开始）保存到我 PC 上的同一个本地文件夹中，然后停止录音机并销毁对象，如下所示：

document.getElementById('btn-finish-recording').onclick = function () {
    recorder2Screen2.stopRecording(function () {
        getSeekableBlob(recorder2Screen2.getBlob(),function (seekableBlob) {
            PostScreenRecordedBlob(seekableBlob,getScreenRecordedFileName("webm"));
            stopScreenRecordingCallback();
        });
    });
};

function stopScreenRecordingCallback() {
    recorder2Screen2.screen.stop();
    recorder2Screen2.destroy();
    recorder2Screen2 = null;
}

当我通过单击“开始录制”按钮开始屏幕录制，然后单击“停止录制”按钮时，视频会根据我的需要正确保存在我的本地文件夹中。但是，“完成录制”按钮似乎存在一些问题，因为当我单击它时，旧的屏幕录制（上次单击“停止录制”按钮时已保存）将再次保存。

我想我正在调用 StopScreenRecordingCallBack();以错误的方式运行，但我无法弄清楚它的确切问题。任何帮助将不胜感激。

解决方法

您可能没有刷新 recordedChunks 数组，该数组将所有块放在一起形成一个 Blob，这就是为什么您会继续使用最后录制的视频进行录制。

在每个录音的末尾添加

recordedChunks = [];