快打破香檳和甜甜圈!現已推出僅限星號的 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