Rakam berbilang tab menggunakan WebRTC dan Javascript

Question

Saya kini boleh merakam tab dan mencipta perakam media daripada strimnya. Saya mahu dapat menukar ke tab lain dan meneruskan rakaman yang sama pada tab lain dan kemudian menyediakan video yang dijahit pada penghujungnya. Bagaimanakah saya boleh melaksanakan ini?

Answer 1

Anda boleh menggunakan ini sebagai contoh perkara yang ingin anda lakukan:

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(); // 获取最终连接的视频