使用WebRTC和Javascript錄製多個標籤頁

Question

我目前能夠錄製一個標籤頁，並從其串流創建一個媒體錄製器。我希望能夠切換到另一個標籤頁並在另一個標籤頁上繼續進行相同的錄製，然後最後提供一個拼接好的影片。我該如何實現這個？

Answer 1

你可以將此作為你想要做的範例：

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