MediaRecorder: событие dataavailable

Событие dataavailable интерфейса MediaRecorder срабатывает, когда MediaRecorder предоставляет данные медиа потока вашему приложению для использования. Данные предоставляются в объекте Blob, содержащем эти данные. Это происходит в четырёх ситуациях:

Когда поток медиа заканчивается, любые данные медиа, которые ещё не были переданы обработчику ondataavailable вашего приложения, передаются в одном объекте Blob.
Когда вызывается метод MediaRecorder.stop(), все данные медиа, записанные с момента начала записи или с последнего срабатывания события dataavailable, передаются в объекте Blob; после этого запись завершается.
Когда вызывается метод MediaRecorder.requestData(), все данные медиа, записанные с момента начала записи или с последнего срабатывания события dataavailable, передаются; затем создаётся новый объект Blob, и запись медиа продолжается в этом объекте.
Если свойство timeslice было передано в метод MediaRecorder.start(), который начал запись медиа, событие dataavailable срабатывает каждые timeslice миллисекунд. Это означает, что обычно каждый объект blob будет иметь определённую длительность (за исключением последнего объекта blob, который может быть короче, так как он будет содержать оставшиеся данные с момента последнего события). Таким образом, если вызов метода выглядел так — recorder.start(1000); — событие dataavailable будет срабатывать после каждой секунды записи медиа, а наш обработчик событий будет вызываться каждую секунду с объектом blob данных медиа длительностью в одну секунду. Вы можете использовать timeslice вместе с MediaRecorder.stop() и MediaRecorder.requestData() для создания нескольких объектов blob одинаковой длины, а также других более коротких объектов.

Примечание: Как и другие временные значения в веб-API, timeslice не являются точными, и реальные интервалы могут быть задержаны из-за других ожидающих задач, функций браузера (приостановка камеры и микрофона в Safari), браузерных особенностей (блокировка экрана во время записи в Chrome на Android приостанавливает событие dataavailable), или других ошибок браузера. Такие сценарии также могут привести к значительно большим кускам данных.

Поэтому не полагайтесь на timeslice и количество полученных кусков для расчёта прошедшего времени, так как ошибки могут накапливаться. Вместо этого ведите отдельный таймер с использованием Event.timeStamp или аналогичного, который записывает общее прошедшее время с момента запуска.

Объект Blob, содержащий данные медиа, доступен в свойстве data события dataavailable.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("dataavailable", (event) => {});

ondataavailable = (event) => {};

Тип события

Объект BlobEvent. Наследуется от Event.

Пример

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 # dom-mediarecorder-ondataavailable

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`dataavailable_event`	49	79	25	36	14.1	49	25	36	14	5.0	49

См. также

Использование API записи MediaStream
Web Dictaphone: демонстрация MediaRecorder + getUserMedia + Web Audio API визуализации, от Chris Mills (исходный код на GitHub.)
демо записи MediaStream на simpl.info, от Sam Dutton.
Navigator.getUserMedia()
Обработка больших кусков MediaRecorder на addpipe.com (2024)

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event