WebRTC 學習筆記 (3) 錄製／下載影音串流

const createStream = async () => {
    const constraints = { audio: true, video: true };
    // 取得裝置的影音串流
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    return stream;
};

const startRecord = async () => {
    const stream = await createStream();
    const options = {
        audioBitsPerSecond: 128000,
        videoBitsPerSecond: 2500000,
        mimeType: 'video/webm'
    };
    // 建立 MediaRecorder 物件
    const recorder = new MediaRecorder(stream, options);
    // 開始錄製
    recorder.start();
};

startRecord(); 

// 每秒回傳一次錄製的串流
MediaRecorder.start(1000);

const recordedChunks = [];

recorder.start(1000);

setTimeout(() => {
    recorder.stop();
}, 5000);

// 1. 取得錄製的 Blob chuck，並儲存變數內
recorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
        recordedChunks.push(event.data);
    }
};

// 2. 監聽錄製停止
recorder.onstop = () => {
    download();
};

// 3. 執行檔案下載
const download = () => {
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
};