MediaRecorder.ondataavailable

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨апрель 2021 г.⁩.

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);  }...