Javascript - 我想使用WebRTC来记录多个标签

Question

我现在能够录制单个选项卡，然后从其流创建媒体记录器。我希望能够切换到另一个选项卡并在另一个选项卡上继续进行相同的录制，然后最后提供最终的串联视频。我怎样才能实现这个目标？

Answer 1

您可以将此作为您想要执行的操作的示例：

let currentStream = null;
let mediaRecorder = null;
let recordedChunks = [];

// Start recording for a new tab
function startRecording(stream) {
currentStream = stream;
mediaRecorder = new MediaRecorder(stream);

mediaRecorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    }
};

mediaRecorder.start();
}

// Stop recording for the current tab
function stopRecording() {
if (mediaRecorder) {
    mediaRecorder.stop();
    currentStream.getTracks().forEach(track => track.stop());
    currentStream = null;
    mediaRecorder = null;
}
}

// Concatenate recorded videos
function concatenateVideos() {
const finalBlob = new Blob(recordedChunks, { type: 'video/webm' });
// You can now use the finalBlob as the concatenated video
}

// Example usage
startRecording(firstTabStream);
// Switch to another tab and call startRecording with the new tab's stream
stopRecording(); // When switching tabs or ending recording
concatenateVideos(); // To get the final concatenated video