MediaRecorder.ondataavailable
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 |
---|
MediaStream Recording # dom-mediarecorder-ondataavailable |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Использование интерфейса записи медиапотока
- Веб диктофон: MediaRecorder + getUserMedia + Web Audio API пример визуализации, от Chris Mills (source on Github.)
- Демонстрационный пример записи медиапотока, от Sam Dutton.
Navigator.getUserMedia