Enregistrez plusieurs onglets à l'aide de WebRTC et Javascript

Question

Je suis actuellement capable d'enregistrer un onglet et de créer un enregistreur multimédia à partir de son flux. Je souhaite pouvoir passer à un autre onglet et continuer le même enregistrement sur un autre onglet, puis fournir une vidéo assemblée à la fin. Comment puis-je mettre en œuvre cela ?

Answer 1

Vous pouvez utiliser ceci comme exemple de ce que vous voulez faire :

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