MediaRecorder: dataavailable 事件
MediaRecorder 介面的 dataavailable 事件會在 MediaRecorder 將媒體資料傳遞給您的應用程式供其使用時觸發。資料以一個包含資料的 Blob 物件的形式提供。這發生在四種情況下：
- 當媒體流結束時，任何尚未傳遞給您的
ondataavailable處理程式的媒體資料都會以單個Blob的形式傳遞。 - 當呼叫
MediaRecorder.stop()時，自錄製開始或上一次dataavailable事件發生以來捕獲的所有媒體資料都將以Blob的形式傳遞；之後，捕獲將結束。 - 當呼叫
MediaRecorder.requestData()時，自錄製開始或上一次dataavailable事件發生以來捕獲的所有媒體資料都將被傳遞；然後建立一個新的Blob，媒體捕獲將繼續寫入該 Blob。 - 如果傳遞給啟動媒體捕獲的
MediaRecorder.start()方法一個timeslice屬性，則每timeslice毫秒會觸發一個dataavailable事件。這意味著通常情況下，每個 Blob 都會有一個特定的時間長度（最後一個 Blob 可能較短，因為它會包含自上一個事件以來剩餘的所有資料）。所以，如果方法呼叫如下 —recorder.start(1000);— 那麼在每錄製一秒後，dataavailable事件都會觸發，並且我們的事件處理程式將每秒被呼叫一次，傳入一個時長為一秒的媒體資料 Blob。您可以將timeslice與MediaRecorder.stop()和MediaRecorder.requestData()一起使用，以生成多個相同長度的 Blob 以及其他較短的 Blob。
注意： 與 Web API 中的其他時間值一樣，timeslice 並不精確，實際間隔可能會因其他待處理任務、瀏覽器功能（Safari 中暫停相機和麥克風）、瀏覽器特定行為（Chrome 在 Android 上錄製時鎖定螢幕會暫停 dataavailable 事件）或其他瀏覽器錯誤而延遲。這些情況也可能導致資料塊顯著增大。
因此，不要依賴 timeslice 和接收到的塊數來計算經過的時間，因為錯誤可能會累積。相反，請使用 Event.timeStamp 或類似方法維護一個單獨的計時器，記錄自開始以來的總經過時間。
包含媒體資料的 Blob 可在 dataavailable 事件的 data 屬性中找到。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("dataavailable", (event) => { })
ondataavailable = (event) => { }
事件型別
示例
js
const chunks = [];
mediaRecorder.onstop = (e) => {
console.log("data available after MediaRecorder.stop() called.");
const audio = document.createElement("audio");
audio.controls = true;
const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
const audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
};
mediaRecorder.ondataavailable = (e) => {
chunks.push(e.data);
};
規範
| 規範 |
|---|
| MediaStream Recording # dom-mediarecorder-ondataavailable |
瀏覽器相容性
載入中…
另見
- 使用 MediaStream Recording API
- Web Dictaphone：MediaRecorder + getUserMedia + Web Audio API 視覺化演示，由 Chris Mills 製作（GitHub 原始碼）。
- simpl.info MediaStream 錄製演示，由 Sam Dutton 製作。
Navigator.getUserMedia()- Dealing with huge MediaRecorder chunks on addpipe.com (2024)