快打破香檳和甜甜圈！現已推出僅限星號的 Chrome 功能「EVER」。
想像一下，有一家滑雪跑步錄製器可將影片與地理位置資料、超簡單的語音備忘錄應用程式同步處理，或是一個可讓你錄製影片並上傳到 YouTube 的小工具，而且完全不需要外掛程式。
MediaRecorder API 支援錄製網頁應用程式的音訊和視訊。你現在可以透過 Firefox 和 Android 版 Google Chrome 使用這項服務。
歡迎前往這個頁面試用。
API 的操作方式相當簡單，我將說明如何使用 WebRTC 範例存放區示範中的程式碼。請注意，這個 API 只能透過安全來源：HTTPS 或 localhost。
首先，使用 MediaStream 執行個體化 MediaRecorder。您也可以使用 options 參數指定所需的輸出格式：
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream 可以是：
getUserMedia()呼叫。- WebRTC 呼叫的接收結束。
- 錄製螢幕畫面。
- 網路音訊 (導入這個問題後)。
在 options 中，您可以指定 MIME 類型，而且日後可以指定音訊和視訊的位元率。
MIME 類型的值包含容器和轉碼器的具體值範圍。例如：
- audio/webm
- 影片/Webm
- 影片/webm;codecs=vp8
- 影片/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 {
// ...
}
如需 Chrome MediaRecorder 支援的 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 音訊的瀏覽器提供 Polyfill。
Polyfill
- Muaz Khan 的 MediaStreamRecorder 是用於錄製音訊和影片的 JavaScript 程式庫，與 MediaRecorder 相容。
- Recorderjs 可讓您從 Web Audio API 節點錄製音訊。您可以在 Paul Lewis 的 Voice Memos 應用程式中查看這項操作。
瀏覽器支援
- 預設搭載 Chrome 49 以上版本
- Chrome 電腦版 47 和 48，並且已透過 chrome://flags 啟用實驗性網路平台功能
- Firefox 25 版
- 邊緣：「未考慮觀望」
規格
w3c.github.io/mediacapture-record/MediaRecorder.html