Record multiple tabs using WebRTC and Javascript

Question

I am currently able to record a tab and create a media recorder from its stream. I want to be able to switch to another tab and continue the same recording on another tab and then provide a stitched video at the end. How can I implement this?

Answer 1

You can use this as an example of what you want to do:

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

// 开始为新标签页录制
function startRecording(stream) {
currentStream = stream;
mediaRecorder = new MediaRecorder(stream);

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

mediaRecorder.start();
}

// 停止当前标签页的录制
function stopRecording() {
if (mediaRecorder) {
    mediaRecorder.stop();
    currentStream.getTracks().forEach(track => track.stop());
    currentStream = null;
    mediaRecorder = null;
}
}

// 连接录制的视频
function concatenateVideos() {
const finalBlob = new Blob(recordedChunks, { type: 'video/webm' });
// 现在，您可以使用finalBlob作为连接后的视频
}

// 示例用法
startRecording(firstTabStream);
// 切换到另一个标签页并使用新标签页的流调用startRecording
stopRecording(); // 切换标签页或结束录制时
concatenateVideos(); // 获取最终连接的视频