2 HTML躬行記——WebRTC基礎實踐( 二 )

2026-05-09 生活百科

1）MediaRecorder
WebRTC 提供了 MediaRecorder 類，它能接收兩個參數，第一個是遠程的 MediaStream 媒體流，第二個是配置項。
其配置項包括編解碼器、音視頻碼率、容器的 MIME 類型（例如 video/webm、video/mp4 ）等相關信息。
先看個示例， HTML結構如下所示，一個 video 元素和兩個 button 元素：回放和下載。
<video id="video"></video><button id="playback">回放</button><button id="download">下載</button>然后看下錄像的整體邏輯，和之前自拍一節類似，也需要調用 getUserMedia() 獲取媒體流。
在 then() 的回調中實例化 MediaRecorder 類，并配置多媒體格式。
其中WebM是一個由Google資助，免版權費用的視頻文件格式；VP8是一個開放的影像壓縮格式。
const video = document.getElementById('video');const playback = document.getElementById('playback');const download = document.getElementById('download');const size = 300;const chunks = [];// 一個由 Blob 對象組成的數組navigator.mediaDevices.getUserMedia({video: {width: size,height: size,},audio: true}).then((stream) => {// 配置多媒體格式const options = { mimeType: 'video/webm;codecs=vp8' };// 實例化錄制對象const recorder = new MediaRecorder(stream, options);// 當收到數據時觸發該事件recorder.ondataavailable = function(e) {chunks.push(e.data);// data 是一個可用的 Blob 對象}// 開始錄制recorder.start(10);});recorder 的 dataavailable 事件會在收到數據時觸發，e 參數的 data 屬性是一個可用的 Blob 對象。
最后在開始錄制調用 start() 方法時，可以配置一個毫秒級的時間片，那么在錄制時會按照配置的值分割成一個個單獨的區塊，而不是錄制一個非常大的整塊內容。
分塊可以提高效率和可靠性，如果是一整塊，那么會變得越來越大，讀寫效率也會變差。
2）回放
首先根據 chunks 生成 Blob 對象，再根據 Blob 對象生成 URL 對象。
playback.addEventListener('click', () => {// 根據 chunks 生成 Blob 對象const blob = new Blob(chunks, {type: 'video/webm'});// 根據 Blob 對象生成 URL 對象video.src = https://www.huyubaike.com/biancheng/window.URL.createObjectURL(blob);video.play();}, false);URL.createObjectURL 是一個靜態方法，返回值是一個指定的 File 對象或 Blob 對象。
3）下載
首先與回放一樣，也是生成一個 URL 對象，然后創建 a 元素，將對象賦給 href 屬性。
并且要指定 download 屬性，告訴瀏覽器下載 URL 而不是導航。
download.addEventListener('click', (e) => {const blob = new Blob(chunks, {type: 'video/webm'});const url = window.URL.createObjectURL(blob);// 創建 a 元素const a = document.createElement('a');a.href = https://www.huyubaike.com/biancheng/url;// 指示瀏覽器下載 URL 而不是導航a.download ='test.webm';a.click();}, false);參考資料：
WebRTC官方
WebRTC MDN
Build the backend services needed for a WebRTC app
【2 HTML躬行記——WebRTC基礎實踐】

推薦閱讀

上一篇：沒有了

下一篇：支持JDK19虛擬線程的web框架，之一：體驗