MediaRecorder.ondataavailable
event handler (part of the
MediaStream 录制 API
) handles the
dataavailable
event, letting you run code in response to
Blob
data being made available for use.
dataavailable
event is fired when the MediaRecorder delivers media data to your application for its use. The data is provided in a
Blob
object that contains the data. This occurs in four situations:
ondataavailable
handler is passed in a single
Blob
.
MediaRecorder.stop()
is called, all media data which has been captured since recording began or the last time a
dataavailable
event occurred is delivered in a
Blob
; after this, capturing ends.
MediaRecorder.requestData()
is called, all media data which has been captured since recording began or the last time a
dataavailable
event occurred is delivered; then a new
Blob
is created and media capture continues into that blob.
timeslice
property was passed into the
MediaRecorder.start()
method that started media capture, a
dataavailable
event is fired every
timeslice
milliseconds. That means that each blob will have a specific time duration (except the last blob, which might be shorter, since it would be whatever is left over since the last event). So if the method call looked like this —
recorder.start(1000);
— the
dataavailable
event would fire after each second of media capture, and our event handler would be called every second with a blob of media data that's one second long. You can use
timeslice
alongside
MediaRecorder.stop()
and
MediaRecorder.requestData()
to produce multiple same-length blobs plus other shorter blobs as well.
Blob
containing the media data is available in the
dataavailable
event's
data
特性。
MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })
...
var chunks = [];
mediaRecorder.onstop = function(e) {
console.log("data available after MediaRecorder.stop() called.");
var audio = document.createElement('audio');
audio.controls = true;
var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
var audioURL = window.URL.createObjectURL(blob);
audio.src = audioURL;
console.log("recorder stopped");
}
mediaRecorder.ondataavailable = function(e) {
chunks.push(e.data);
}
...
| 规范 | 状态 | 注释 |
|---|---|---|
|
MediaStream 录制
The definition of 'MediaRecorder.ondataavailable' in that specification. |
工作草案 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ondataavailable
|
Chrome 49 | Edge 79 | Firefox 25 | IE No | Opera 36 | Safari No | WebView Android 49 | Chrome Android 49 | Firefox Android 25 | Opera Android 36 | Safari iOS No | Samsung Internet Android 5.0 |
完整支持
不支持
Navigator.getUserMedia
MediaRecorder