快來開香檳、吃甜甜圈吧！目前「所有」都實作了 Chrome 功能，「最醒目」。
想像一下，滑雪跑步記錄器可將影片與地理位置資料同步，或是超簡單的語音備忘錄應用程式，或是可讓你錄製影片並上傳至 YouTube 的小工具，而且這些功能都不需要外掛程式。
MediaRecorder API 可讓您透過網路應用程式錄製音訊和視訊。這項 API 現已支援 Firefox、Android 版 Chrome 和電腦版 Chrome。
按這裡試用。
這個 API 很簡單，我會使用 WebRTC 範例存放區示範中的程式碼來說明。請注意，您只能從安全來源使用此 API：HTTPS 或 localhost。
首先，請使用 MediaStream 將 MediaRecorder 例項化。您可以選擇使用 options 參數指定所需的輸出格式：
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream 可以來自下列來源：
getUserMedia()呼叫。- WebRTC 通話的接收端。
- 螢幕錄影畫面。
- Web Audio，只要實作這個問題。
對於 options，您可以指定 MIME 類型，並在日後指定音訊和影片的比特率。
MIME 類型具有或多或少的特定值，結合容器和編解碼器。例如：
- audio/webm
- video/webm
- video/webm;codecs=vp8
- video/webm;codecs=vp9
使用靜態方法 MediaRecorder.isTypeSupported() 檢查是否支援 MIME 類型，例如在您將 MediaRecorder 例項化時：
var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options = {mimeType: 'video/webm; codecs=vp8'};
} else {
// ...
}
如需 MediaRecorder 在 Chrome 中支援的 MIME 類型完整清單，請參閱這裡。
接下來，請新增資料處理常式，並呼叫 start() 方法來開始記錄：
var recordedChunks = [];
var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
} else {
// ...
}
}
這個範例會將 Blob 新增至 recordedChunks 陣列，只要有資料可用。您可以選擇為 start() 方法提供 timeSlice 引數，用於指定每個 Blob 要擷取的媒體長度。
錄製完成後，請告知 MediaRecorder：
mediaRecorder.stop();
從已記錄的 Blob 陣列建立「super-Blob」，在影片元素中播放錄製的 Blob：
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
或者，您可以透過 XHR 上傳至伺服器，或是使用 YouTube 等 API (請參閱下方的實驗版示範)。
下載作業可透過一些連結駭客手法完成：
function download() {
var blob = new Blob(recordedChunks, {
type: 'video/webm'
});
var url = URL.createObjectURL(blob);
var 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);
}
針對 API 和示範提供意見
在沒有外掛程式的情況下錄製音訊和影像，是網頁應用程式相對較新的功能，因此我們特別感謝您對 API 的意見回饋。
- MediaRecorder 實作錯誤：crbug.com/262211
- Chrome：crbug.com/new
- Firefox：bugzil.la
- 示範：github.com/webrtc/samples
我們也想瞭解哪些使用情境對您而言最為重要，以及您希望我們優先改善哪些功能。請前往 crbug.com/262211 評論這篇文章或追蹤進度。
示範
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (相同的程式碼，更簡單的行動版網址！)
- 使用實驗版自訂
<google-youtube-upload>元素錄製影片並上傳到 YouTube
應用程式
- Paul Lewis 的 Voice Memos 應用程式現在支援 MediaRecorder，並為不支援 MediaRecorder 音訊的瀏覽器提供多重填充功能。
填充
- Muaz Khan 的 MediaStreamRecorder 是用於錄製音訊和影片的 JavaScript 程式庫，與 MediaRecorder 相容。
- Recorderjs 可透過 Web Audio API 節點錄製音訊。您可以在 Paul Lewis 的「語音備忘錄」應用程式中查看實際操作畫面。
瀏覽器支援
- 預設為 Chrome 49 以上版本
- Chrome 電腦版 47 和 48，已透過 chrome://flags 啟用實驗性網頁平台功能
- Firefox 25 以上版本
- Edge：'Under Consideration'
規格
w3c.github.io/mediacapture-record/MediaRecorder.html