Web 實現客戶端錄音或錄像的流程大致分為：

• 采集音頻/視頻
• 開始錄制并監聽回調
• 下載 Or 轉碼

采集音頻/視頻

瀏覽器兼容

注意事項

• 除 127.0.0.1、localhost URL 以外，網站必須配置 SSL 證書，也就是網站需要 https 環境
• 需要音頻/視頻輸入媒體設備，例如：麥克風、攝像頭，包含內置。

開始采集

利用 navigator.mediaDevices 對象的 getUserMedia 方法采集音頻和視頻媒體流。

// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設置一個空的對象 if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {}; }// 一些瀏覽器部分支持 mediaDevices。我們不能直接給對象設置 getUserMedia // 因為這樣可能會覆蓋已有的屬性。這里我們只會在沒有getUserMedia屬性的時候添加它。 if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function(constraints) {// 首先，如果有getUserMedia的話，就獲得它var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;// 一些瀏覽器根本沒實現它 - 那么就返回一個error到promise的reject來保持一個統一的接口if (!getUserMedia) {return Promise.reject(new Error('getUserMedia is not implemented in this browser'));}// 否則，為老的navigator.getUserMedia方法包裹一個Promisereturn new Promise(function(resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});} }// 開始采集輸入媒體 navigator.mediaDevices.getUserMedia({// 采集音頻audio: true,// 采集視頻video: true }) .then(function(stream) {// TODO }) .catch(function(err) {console.log(err.name + ": " + err.message); });

錄制

創建錄制實例

利用 new 指令 創建一個 MediaRecorder 對象。

// 定義錄制的編碼格式 const options = {mimeType: "video/webm;codecs=opus" }; // 錄制實例 const mediaRecorder = new MediaRecorder(audioStream, options);

監聽錄制回調事件

// 創建一個集合存儲錄制的數據 const recordedBlobs = [];// 監聽錄制錯誤 mediaRecorder.onerror = async (event) => {// TODO }// 監聽錄制開始 mediaRecorder.onstart = async (event) => {// TODO }// 監聽錄制結束或者中斷的回調 mediaRecorder.onstop = async (event) => {// 這里我們可以將錄制的數據，進行處理之后，存儲至服務端，例如：上傳 OSS }// 監聽錄制暫停 mediaRecorder.onpause = async (event) => {// TODO }// 監聽錄制恢復 mediaRecorder.onstart = async (event) => {// TODO }// 監聽錄制過程中返回數據 mediaRecorder.ondataavailable = (event) => {console.log('handleDataAvailable', event);if (event.data && event.data.size > 0) {recordedBlobs.push(event.data);} }

檢測編碼類型是否支持

利用 isTypeSupported 方法，我們可以檢測出是否支持我們想要錄制的音頻編碼或者視頻編碼。

var types = ["video/webm","audio/webm","video/webm\;codecs=vp8","video/webm\;codecs=daala","video/webm\;codecs=h264","audio/webm\;codecs=opus","video/mpeg"];for (var i in types) {console.log( "Is " + types[i] + " supported? " + (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :(")); }

開始錄制

// 一直錄 mediaRecorder.start(); // 錄制置頂時間，單位為浩渺 mediaRecorder.start(60000); // 錄制 60秒

暫停錄制

mediaRecorder.pause();

恢復錄制

mediaRecorder.resume();

結束錄制

mediaRecorder.stop();

定時獲取錄制數據

上面我們監聽錄制數據回調 ondataavailable，只會在 stop、pause 時才會觸發，如果錄制的時間很長，那么對應處理的數據量也越大，因此，錄制實例還提供了一個方法 requestData 方便我們獲取數據。

需要注意的是：當前錄制狀態必須為正在錄制中，否則會報錯。

captureMedia.onclick = function() {mediaRecorder.requestData();// makes snapshot available of data so far// ondataavailable fires, then capturing continues// in new Blob }

下載 Or 轉碼

下載

// 模擬下載按鈕點擊實現下載 function download () {const blob = new Blob(recordedBlobs, {type: 'video/webm'});const url = window.URL.createObjectURL(blob);const a = document.createElement('a');a.style.display = 'none';a.href = url;a.download = 'test.webm';document.body.appendChild(a);a.click();setTimeout(() => {document.body.removeChild(a);window.URL.revokeObjectURL(url);}, 100); });

轉碼

我們可以將數據發送至服務端（或 OSS），由服務端轉碼，感興趣的同學也可以去試試 ffmpeg。

Ending

我們可以對采集或者錄制之后音頻、視頻數據進行很多處理，例如對視頻數據的處理，感興趣的小伙伴們可以查看以下文章：

一篇前端圖像處理秘籍

前端秘籍之“易容”術

總結

以上是生活随笔為你收集整理的web技术支持| Web 客户端实现录音、录像的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。