MediaRecorder.ondataavailable
обработчик события (часть MediaStream Recording API) обрабатывает dataavailable
событие, позволяет выполнить код, когда тип данных Blob
, представляющий обработанные данные становиться доступным для использования.
Событие dataavailable
вызывается когда MediaRecorder доставляет медиа данные в ваше приложение для использования. Они представляются в виде объекта типа Blob
, содержащего данные. Это происходит в четырёх ситуациях:
- Когда медиа поток завершается, любые мультимедийные данные ещё не доставленные в обработчик
ondataavailable
немедленно передаются в объектBlob
. - При вызове метода
MediaRecorder.stop()
, порция медиаданных, объем которых был захвачен с момента начала записи или после последнего вызова событияdataavailable
помещаються в объектBlob
; после этого захват завершается. - При вызове метода
MediaRecorder.requestData()
порция медиаданных, объем которых был захвачен с момента начала записи, или после последнего вызова событияdataavailable
помещаются в вновь созданный объект типаBlob
, и захват порций медиаданных продолжается уже в этот новый объектblob
. - Если свойство
timeslice
передается в методMediaRecorder.start()
, который запускает захват порций медиаданных, событиеdataavailable
запускается каждыеtimeslice
миллисекунд. Это значит, что каждый объект типаblob
будет иметь специфичиский размер (за исключением последнего, который может быть короче, содержащий все, что осталось с момента последнего события ). Поэтому, если метод выглядит так :recorder.start(1000);
то событиеdataavailable
будет запускаться каждую секунду общего потока медиа захвата, и обработчик события будет вызываться каждую секунду, содержащий в параметре объект типаblob
, который будет содержать объем порции записи медиаданных продолжительностью в одну секунду. Можно использовать свойствоtimeslice
вместе сMediaRecorder.stop()
иMediaRecorder.requestData()
для создания нескольких объектов типаblob
одинакового объема данных , плюс последние короткие объекты типаblob.
Медиаданные, содержащиеся в объекте типа Blob
доступны в свойстве data
, возвращаемого в параметре объекта события dataavailable
.
Синтаксис
MediaRecorder.ondataavailable = function(event) { ... }
MediaRecorder.addEventListener('dataavailable', function(event) { ... })
Пример
...
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);
}
...
Спецификации
Specification | Status | Comment |
---|---|---|
MediaStream Recording Определение 'MediaRecorder.ondataavailable' в этой спецификации. |
Рабочий черновик | Initial definition |
Совместимость с браузерами
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Смотри так же
- Использование интерфейса записи медиапотока
- Веб диктофон: MediaRecorder + getUserMedia + Web Audio API пример визуализации, от Chris Mills (source on Github.)
- Демонстрационный пример записи медиапотока, от Sam Dutton.
Navigator.getUserMedia