---
title: MediaRecorder
slug: Web/API/MediaRecorder
translation_of: Web/API/MediaRecorder
---
<p>{{APIRef("Media Recorder API")}}</p>

<p>The <strong><code>MediaRecorder</code></strong> это интерфейс <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> представляющий функциональность для простой записи медиа. Создаётся с использованием {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} конструктора.</p>

<h2 id="Конструктор">Конструктор</h2>

<dl>
 <dt>{{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}}</dt>
 <dd>Создаёт новый объект <code>MediaRecorder</code>, получающий {{domxref("MediaStream")}} для записи. Доступны такие параметры, как установка типа MIME контейнера (<code>"video/webm","video/mp4"</code> и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.</dd>
</dl>

<h2 id="Свойства">Свойства</h2>

<dl>
 <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt>
 <dd>Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании. </dd>
 <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt>
 <dd>Возвращает текущее состояние объекта <code>MediaRecorder </code>(<code>inactive</code>, <code>recording</code>, или <code>paused</code>.)</dd>
 <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt>
 <dd>Возвращает поток который был передан конструктору при создании объекта <code>MediaRecorder</code></dd>
 <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt>
 <dd>Показывает записывает ли <code>MediaRecorder </code>дорожку {{domxref("MediaStreamTrack")}} если она отключена. Если атрибут равен<code> false, </code><code>MediaRecorder</code> будет записывать тишину для аудио и чёрные кадры для видео. По умолчанию равно <code>false</code></dd>
 <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt>
 <dd>Возвращает скорость кодирования видео. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).</dd>
 <dt>{{domxref("MediaRecorder.audioBitsPerSecond;")}} {{readonlyInline}}</dt>
 <dd>Возвращает скорость кодирования аудио. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).</dd>
</dl>

<h2 id="Методы">Методы</h2>

<dl>
 <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt>
 <dd>Возвращает {{domxref("Boolean")}} значение показывающее поддерживается ли MIME тип текущим user agent.</dd>
 <dt>{{domxref("MediaRecorder.pause()")}}</dt>
 <dd>Приостанавливает запись медиа.</dd>
 <dt>{{domxref("MediaRecorder.requestData()")}}</dt>
 <dd>Запрашивает {{domxref("Blob")}} содержащий сохранённые данные полученные  с начала записи (или с последнего вызова <code>requestData()</code>). После вызова этого метода, запись продолжается, но в новый <code>Blob.</code></dd>
 <dt>{{domxref("MediaRecorder.resume()")}}</dt>
 <dd>Возобновляет запись медиа после паузы.</dd>
 <dt>{{domxref("MediaRecorder.start()")}}</dt>
 <dd>Начинает запись медиа. В этот метод можно передать аргумент <code>timeslice </code>со значением в миллисекундах. Если он определён, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.</dd>
 <dt>{{domxref("MediaRecorder.stop()")}}</dt>
 <dd>Останавливает запись, после чего запускается событие {{event("dataavailable")}}, содержащее последний <code>Blob</code> сохранённых данных.</dd>
</dl>

<h2 id="Обработчики_событий">Обработчики событий</h2>

<dl>
 <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt>
 <dd>Вызывает обработчик {{event("dataavailable")}} события, которое запускается раз в <code>timeslice</code> миллисекунд (или, если <code>timeslice</code> не был задан - по окончанию записи). Событие типа {{domxref("BlobEvent")}}, сдержит записанное медиа в {{domxref("BlobEvent.data", "data")}}.  Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.</dd>
 <dt>{{domxref("MediaRecorder.onerror")}}</dt>
 <dd>{{event("Event_handlers", "event handler")}} вызывается для обработки события {{event("recordingerror")}}, включающего отчёт об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе {{domxref("MediaRecorderErrorEvent")}}, свойство которого {{domxref("MediaRecorderErrorEvent.error", "error")}} содержит {{domxref("DOMException")}} описывающие произошедшие ошибки.</dd>
 <dt>{{domxref("MediaRecorder.onpause")}}</dt>
 <dd>{{event("Event_handlers", "event handler")}} вызывается для обработки события {{event("pause")}}, случившегося во время приостановки медиа.</dd>
 <dt>{{domxref("MediaRecorder.onresume")}}</dt>
 <dd>{{event("Event_handlers", "event handler")}} вызывается для обработки события {{event("resume")}}, случившегося во время возобновления записи.</dd>
 <dt>{{domxref("MediaRecorder.onstart")}}</dt>
 <dd>{{event("Event_handlers", "event handler")}}вызывается для обработки события {{event("start")}}, случившегося во время начала записи.</dd>
 <dt>{{domxref("MediaRecorder.onstop")}}</dt>
 <dd>{{event("Event_handlers", "event handler")}} вызывается для обработки события {{event("stop")}}, случившегося во время завершения записи, а так же при окончании {{domxref("MediaStream")}} — или после вызова {{domxref("MediaRecorder.stop()")}}</dd>
</dl>

<h2 id="Пример">Пример</h2>

<pre>navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia ||
                          navigator.webkitGetUserMedia);


if (navigator.getUserMedia) {
  console.log('getUserMedia supported.');

  var constraints = { audio: true };
  var chunks = [];

  var onSuccess = function(stream) {
    var mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

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

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

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

      var clipName = prompt('Enter a name for your sound clip');

      var clipContainer = document.createElement('article');
      var clipLabel = document.createElement('p');
      var audio = document.createElement('audio');
      var deleteButton = document.createElement('button');

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

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

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

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

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  }

  var onError = function(err) {
    console.log('The following error occured: ' + err);
  }

  navigator.getUserMedia(constraints, onSuccess, onError);
} else {
   console.log('getUserMedia not supported on your browser!');
}</pre>

<div class="note">
<p>Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите <a href="https://github.com/mdn/web-dictaphone/">здесь</a></p>
</div>

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
   <td>{{Spec2("MediaStream Recording")}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>



<p>{{Compat("api.MediaRecorder")}}</p>

<h2 id="Ещё_по_теме">Ещё по теме</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Использование MediaRecorder API</a></li>
 <li><a href="https://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
 <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
 <li>{{domxref("Navigator.getUserMedia")}}</li>
</ul>