MediaRecorder

Интерфейс MediaRecorder API записи потоков медиа предоставляет функциональность для лёгкой записи медиа. Он создаётся с помощью конструктора MediaRecorder().

Конструктор

MediaRecorder(): Создаёт новый объект MediaRecorder, используя MediaStream для записи. Доступны опции, позволяющие установить тип MIME контейнера (например, "video/webm" или "video/mp4") и битрейты аудио и видео дорожек или единый общий битрейт.

Свойства объекта

MediaRecorder.mimeType Только для чтения: Возвращает тип MIME, выбранный в качестве контейнера записи для объекта MediaRecorder при его создании.
MediaRecorder.state Только для чтения: Возвращает текущее состояние объекта MediaRecorder (inactive, recording, или paused).
MediaRecorder.stream Только для чтения: Возвращает поток, переданный в конструктор при создании объекта MediaRecorder.
MediaRecorder.videoBitsPerSecond Только для чтения: Возвращает битрейт видео кодирования. Он может отличаться от битрейта, указанного в конструкторе (если он был предоставлен).
MediaRecorder.audioBitsPerSecond Только для чтения: Возвращает битрейт аудио кодирования. Он может отличаться от битрейта, указанного в конструкторе (если он был предоставлен).
MediaRecorder.audioBitrateMode Только для чтения Экспериментально: Возвращает режим битрейта, используемый для кодирования аудиодорожек.

Статические методы

MediaRecorder.isTypeSupported(): Статический метод, возвращающий значение true или false, указывающее, поддерживается ли данный тип MIME медиа текущим пользовательским агентом.

Методы объекта

MediaRecorder.pause(): Приостанавливает запись медиа.
MediaRecorder.requestData(): Запрашивает Blob, содержащий сохранённые данные до текущего момента (или с момента последнего вызова requestData()). После вызова этого метода запись продолжается, но в новом Blob.
MediaRecorder.resume(): Возобновляет запись медиа после паузы.
MediaRecorder.start(): Начинает запись медиа; этот метод может принять аргумент timeslice со значением в миллисекундах. Если он указан, медиа будет записано в отдельных фрагментах заданной длительности, а не по умолчанию в одном большом фрагменте.
MediaRecorder.stop(): Останавливает запись, после чего генерируется событие dataavailable, содержащее последние Blob сохранённых данных. Запись больше не происходит.

События

Прослушивайте эти события, используя addEventListener() или назначив обработчик события свойству oneventname этого интерфейса.

dataavailable: Вызывается периодически каждый раз, когда записано timeslice миллисекунд медиа (или когда всё медиа записано, если timeslice не было указано). Событие типа BlobEvent содержит записанное медиа в свойстве data.
error: Вызывается при возникновении критических ошибок, которые останавливают запись. Полученное событие основано на интерфейсе MediaRecorderErrorEvent, а свойство error содержит исключение DOMException, описывающее произошедшую ошибку.
pause: Вызывается при приостановке записи медиа.
resume: Вызывается при возобновлении записи медиа после паузы.
start: Вызывается при начале записи медиа.
stop: Вызывается по завершении записи медиа, либо когда заканчивается MediaStream, либо после вызова метода MediaRecorder.stop().

Пример

if (navigator.mediaDevices) {
  console.log("getUserMedia supported.");

  const constraints = { audio: true };
  let chunks = [];

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((stream) => {
      const mediaRecorder = new MediaRecorder(stream);

      record.onclick = () => {
        mediaRecorder.start();
        console.log(mediaRecorder.state);
        console.log("recorder started");
        record.style.background = "red";
        record.style.color = "black";
      };

      stop.onclick = () => {
        mediaRecorder.stop();
        console.log(mediaRecorder.state);
        console.log("recorder stopped");
        record.style.background = "";
        record.style.color = "";
      };

      mediaRecorder.onstop = (e) => {
        console.log("data available after MediaRecorder.stop() called.");

        const clipName = prompt("Enter a name for your sound clip");

        const clipContainer = document.createElement("article");
        const clipLabel = document.createElement("p");
        const audio = document.createElement("audio");
        const deleteButton = document.createElement("button");
        const mainContainer = document.querySelector("body");

        clipContainer.classList.add("clip");
        audio.setAttribute("controls", "");
        deleteButton.textContent = "Delete";
        clipLabel.textContent = clipName;

        clipContainer.appendChild(audio);
        clipContainer.appendChild(clipLabel);
        clipContainer.appendChild(deleteButton);
        mainContainer.appendChild(clipContainer);

        audio.controls = true;
        const blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
        chunks = [];
        const audioURL = URL.createObjectURL(blob);
        audio.src = audioURL;
        console.log("recorder stopped");

        deleteButton.onclick = (e) => {
          const evtTgt = e.target;
          evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
        };
      };

      mediaRecorder.ondataavailable = (e) => {
        chunks.push(e.data);
      };
    })
    .catch((err) => {
      console.error(`The following error occurred: ${err}`);
    });
}

Примечание: Данный пример кода вдохновлён демо Web Dictaphone. Некоторые строки опущены для краткости; обратитесь к исходному коду для полного примера.

Спецификации

Спецификация
Запись медиапотоков # mediarecorder-api

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

	Десктопные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android

`MediaRecorder`	47	79	25	36	14.1	47	25	36	14	5.0	47
`MediaRecorder`	47	79	25 До Firefox 58, использование `MediaStream.addTrack()` на потоке, полученном с помощью `getUserMedia()`, а затем попытка записи результирующего потока приводили к записи только исходного потока без добавленных треков (критическая ошибка).	36	14.1	47	25 До Firefox для Android 58, использование `MediaStream.addTrack()` на потоке, полученном с помощью `getUserMedia()`, а затем попытка записи результирующего потока приводили к записи только исходного потока без добавленных треков (критическая ошибка).	36	14	5.0	47
`audioBitrateMode`	89	89	Нет	75	Нет	89	Нет	63	Нет	15.0	89
`audioBitsPerSecond`	49	79	71	36	14.1	49	79	36	14.5	5.0	49
`dataavailable_event`	49	79	25	36	14.1	49	25	36	14	5.0	49
`error_event`	49 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.	79 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.	25	36 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.	14.1	49 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.	25	36 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.	14	5.0 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.	49 Интерфейс для этого события — это простое `Event`, а не `ErrorEvent`. Смотрите ошибка 40791876.
`isTypeSupported_static`	47	79	25	36	14.1	47	25	36	14	5.0	47
`mimeType`	49 47–49 До Chrome 49 поддерживалось только видео, а не аудио.	79	25 Начиная с Firefox 71, поведение `mimeType` стало более согласованным. Например, теперь он возвращает тип носителя даже после остановки записи.	36	14.1	49 47–49 До Chrome для Android 49 поддерживалось только видео, а не аудио.	25	36	14	5.0	49 47–49 До WebView для Android 49 поддерживалось только видео, а не аудио.
`pause`	49	79	25	36	14.1	49	25	36	14.5	5.0	49
`pause_event`	49	79	65	36	14.1	49	65	36	14.5	5.0	49
`requestData`	49	79	25	36	14.1	49	25	36	14	5.0	49
`resume`	49	79	25	36	14.1	49	25	36	14.5	5.0	49
`resume_event`	49	79	65	36	14.1	49	65	36	14.5	5.0	49
`start`	47	79	25	36	14.1	47	25	36	14	5.0	47
`start_event`	49	79	25	36	14.1	49	25	36	14	5.0	49
`state`	49 47–49 До Chrome 49 поддерживалось только видео, а не аудио.	79	25	36	14.1	49 47–49 До Chrome для Android 49 поддерживалось только видео, а не аудио.	25	36	14	5.0	49 47–49 До WebView для Android 49 поддерживалось только видео, а не аудио.
`stop`	49	79	25	36	14.1	49	25	36	14	5.0	49
`stop_event`	49	79	25	36	14.1	49	25	36	14	5.0	49

`stream`	49 47–49 До Chrome 49 поддерживалось только видео, а не аудио.	79	25	36	14.1	49 47–49 До Chrome Android 49 поддерживалось только видео, а не аудио.	25	36	14	5.0	49
`videoBitsPerSecond`	49	79	71	36	14.1	49	79	36	14.5	5.0	49

См. также

Использование API записи MediaStream
Web Dictaphone: Демонстрация MediaRecorder + getUserMedia + визуализация Web Audio API, разработанная Кристофером Миллсом (исходный код на GitHub).
Запись элемента media
Демонстрация записи MediaStream на simpl.info, разработанная Самом Даттоном.
MediaDevices.getUserMedia()
OpenLang: Веб-приложение языка HTML видео с использованием MediaDevices и API записи MediaStream для записи видео (исходный код на GitHub)

© 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