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

- 採集音訊/影片
- 開始錄製並監聽回撥
- 下載 Or 轉碼

## 採集音訊/影片

### 瀏覽器相容

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/fe3a208a74b74835a041b3b11ccddda4.png#pic_center)

### 注意事項

- 除 `127.0.0.1`、`localhost`  URL 以外，網站必須配置 SSL 證書，也就是網站需要 `https` 環境
- 需要音訊/影片輸入媒體裝置，例如：麥克風、攝像頭，包含內建。

### 開始採集

利用 `navigator.mediaDevices` 物件的 [`getUserMedia`](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia) 方法採集音訊和影片媒體流。

```js
// 老的瀏覽器可能根本沒有實現 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方法包裹一個Promise
    return 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`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) 物件。

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

### 監聽錄製回撥事件

```js
// 建立一個集合儲存錄製的資料
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` 方法，我們可以檢測出是否支援我們想要錄製的音訊編碼或者影片編碼。

```js
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 :("));
}
```

### 開始錄製

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

### 暫停錄製

```js
mediaRecorder.pause();
```

### 恢復錄製

```js
mediaRecorder.resume();
```

### 結束錄製

```js
mediaRecorder.stop();
```

### 定時獲取錄製資料

上面我們監聽錄製資料回撥 `ondataavailable`，只會在 `stop`、`pause` 時才會觸發，如果錄製的時間很長，那麼對應處理的資料量也越大，因此，錄製例項還提供了一個方法 `requestData` 方便我們獲取資料。

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

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

## 下載 Or 轉碼

### 下載

```js
// 模擬下載按鈕點選實現下載
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

我們可以對採集或者錄製之後音訊、影片資料進行很多處理，例如對影片資料的處理，感興趣的小夥伴們可以檢視以下文章：

[一篇前端影像處理秘籍](https://blog.csdn.net/anyRTC/article/details/119886326)

[前端秘籍之“變容”術](https://blog.csdn.net/anyRTC/article/details/120327177)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/82409b5da7594170bbbb6fe454bd3c83.jpeg#pic_center)

web技術支援| Web 客戶端實現錄音、錄影

相關文章