iT邦幫忙

2021 iThome 鐵人賽

DAY 23
1
Software Development

新手也能打造網路電話系統-WebRTC入門與活用系列 第 23

Day 23 - 應用篇 - 錄音錄影

有時我們會希望將視訊的過程記錄起來,而這樣的功能可藉由MediaRecorder來完成。

錄製媒體流

初始化MediaRecorder並傳入錄製的媒體流及設定,接著需要將錄製到的每段資料儲存起來。

const options = { mimeType: "video/webm; codecs=vp9" };
const video_large = document.getElementById('largeVideo');
const chunks = [];

//初始化MediaRecorder,內部傳入要錄製的媒體流及錄製設定
const recorder = new MediaRecorder(stream, options);

//儲存錄製得到的每段資料
recorder.ondataavailable = (e) => { //當取得每段錄製資料時,進入此監聽事件
    chunks.push(e.data);
}

recorder.start(); //開始錄製

停止錄製及下載檔案

設定MediaRecorder停止的監聽事件,當進入事件時建立連結並點擊它以下載檔案。

//停止錄製後下載檔案
recorder.onstop = () => {
    const blob = new Blob(chunks, {
        type: "video/webm"
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");

    document.body.appendChild(link);
    link.style = "display: none";
    link.href = url;
    link.download = "video.webm";
    link.click();
}

recorder.stop(); //停止錄製

專案修改

將錄音錄影的功能加入專案中。

Step1 錄製媒體流及下載檔案

開啟creator.jsjoiner.js檔案,並撰寫以下程式碼,而startRecorder方法則於取得對方的媒體流後執行。

let recorder;

function startRecorder() {
    const options = { mimeType: "video/webm; codecs=vp9" };
    const video_large = document.getElementById('largeVideo');
    const chunks = [];

    //初始化MediaRecorder,內部傳入對方的媒體流及錄製設定
    recorder = new MediaRecorder(video_large.captureStream(), options);

    //儲存錄製得到的每段資料
    recorder.ondataavailable = (e) => { //當取得每段錄製資料時,進入此監聽事件
        chunks.push(e.data);
    }

    //停止錄製後下載檔案
    recorder.onstop = () => { //當停止錄製時,進入此監聽事件
        const blob = new Blob(chunks, {
            type: "video/webm"
        });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");

        document.body.appendChild(link);
        link.style = "display: none";
        link.href = url; //將網址設定給 a tage 的 href 屬性
        link.download = "video.webm"; //設定檔案名稱
    }

    recorder.start(); //開始錄製
}

Step2 停止錄製

開啟creator.jsjoiner.js檔案,並在結束通話的finish事件內撰寫停止錄製的程式碼。

socket.on('finish', () => { //當對方離開通話後,進入此監聽事件
    ... //Others
    recorder.stop(); //停止錄製
});

Step3 查看成果

執行專案後,讓兩個裝置進行視訊通話便會開始錄製,通話結束後會下載錄製完成的檔案。


上一篇
Day 22 - 應用篇 - 螢幕分享
下一篇
Day 24 - 進階篇 - 頻寬調整
系列文
新手也能打造網路電話系統-WebRTC入門與活用30

尚未有邦友留言

立即登入留言