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

<p><strong><code>MediaRecorder</code></strong> 是 <a href="/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()")}}</dt>
 <dd>    创建一个新的<code>MediaRecorder</code>对象,对指定的{{domxref("MediaStream")}} 对象进行录制,支持的配置项包括设置容器的MIME 类型 (例如<code>"video/webm"</code> 或者 <code>"video/mp4"</code>)和音频及视频的码率或者二者同用一个码率</dd>
 <dd></dd>
</dl>

<h2 id="配置项">配置项</h2>

<dl>
 <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt>
 <dd>    返回 <code>MediaRecorder</code> 对象创建时选择器选择的录制容器的 MIME type</dd>
 <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt>
 <dd>    返回录制对象<code>MediaRecorder</code>  的当前状态(闲置中,录制中或者暂停 ) (<code>inactive</code>, <code>recording</code>, or <code>paused</code>.)</dd>
 <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt>
 <dd>    返回录制器对象 <code>MediaRecorder </code>创建时构造函数传入的stream对象</dd>
 <dd></dd>
 <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt>
 <dd></dd>
 <dd>    用以指定 <code>MediaRecorder</code>是否录制无声的输入源. 如果这个属性是false. 录制器对象<code>MediaRecorder</code>  会录制无声的音频或者黑屏的视频, 默认值是false</dd>
 <dd></dd>
 <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt>
 <dd>返回视频采用的编码比率. 它可能和构造函数的设置比率不同.  (if it was provided).</dd>
 <dt>{{domxref("MediaRecorder.audioBitsPerSecond")}} {{readonlyInline}}</dt>
 <dd>返回音频采用的编码比率,它可能和构造函数中设置的比率不同. (if it was provided).</dd>
 <dd></dd>
</dl>

<h2 id="方法">方法</h2>

<dl>
 <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt>
 <dd>返回一个{{domxref("Boolean")}} 值,来表示设置的MIME type 是否被当前用户的设备支持.</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>
 <dd></dd>
</dl>

<h2 id="静态方法">静态方法</h2>

<dl>
 <dt>{{domxref("MediaRecorder.isTypeSupported()")}}</dt>
 <dd>静态方法，判断给定的MIME类型是否支持。返回{{domxref("Boolean")}}类型的值。</dd>
 <dt></dt>
</dl>

<h2 id="事件处理">事件处理</h2>

<dl>
 <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt>
 <dd>调用它用来处理 {{event("dataavailable")}} 事件, 该事件可用于获取录制的媒体资源 (在事件的 <code>data</code> 属性中会提供一个可用的 {{domxref("Blob")}} 对象.)</dd>
 <dt>{{domxref("MediaRecorder.onerror")}}</dt>
 <dd>An {{event("Event_handlers", "event handler")}} called to handle the {{event("recordingerror")}} event, including reporting errors that arise with media recording. These are fatal errors that stop recording.</dd>
 <dt>{{domxref("MediaRecorder.onpause")}}</dt>
 <dd>用来处理 {{event("pause")}} 事件, 该事件在媒体暂停录制时触发（{{domxref("MediaRecorder.pause()")}}）.</dd>
 <dt>{{domxref("MediaRecorder.onresume")}}</dt>
 <dd>用来处理 {{event("resume")}} 事件, 该事件在暂停后回复录制视频时触发（{{domxref("MediaRecorder.resume()")}}）.</dd>
 <dt>{{domxref("MediaRecorder.onstart")}}</dt>
 <dd>用来处理 {{event("start")}} 事件, 该事件在媒体开始录制时触发（{{domxref("MediaRecorder.start()")}}）.</dd>
 <dt>{{domxref("MediaRecorder.onstop")}}</dt>
 <dd>用来处理 {{event("stop")}} 事件, 该事件会在媒体录制结束时、媒体流（{{domxref("MediaStream")}}）结束时、或者调用{{domxref("MediaRecorder.stop()")}} 方法后触发.</dd>
</dl>

<h2 id="事件">事件</h2>

<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>

<dl>
 <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/error_event">error</a></code></dt>
 <dd>Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.<br>
 Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onerror">onerror</a></code> property.</dd>
 <dt></dt>
</dl>

<h2 id="例子">例子</h2>

<pre>if (navigator.mediaDevices) {
  console.log('getUserMedia supported.');

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

  navigator.mediaDevices.getUserMedia(constraints)
  .then(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.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 = 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);
    }
  })
  .catch(function(err) {
    console.log('The following error occured: ' + err);
  })
}

</pre>

<div class="note">
<p>This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; <a href="https://github.com/mdn/web-dictaphone/">refer to the source</a> for the complete code.</p>
</div>

<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(47.0)}}</td>
   <td>{{CompatGeckoDesktop("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(47.0)}}</td>
   <td>{{CompatChrome(47.0)}}</td>
   <td>{{CompatGeckoDesktop("25.0")}}</td>
   <td>1.3<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<ul>
 <li>[1] The initial Firefox OS implementation only supported audio recording.</li>
</ul>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the 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="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</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.mediaDevices.getUserMedia")}}</li>
 <li><a href="https://www.fingerspell.org/">FingerSpell</a>: Sign Language Fingerspelling practice using MediaDevices and the MediaStream Recording API to create and download recordings, MediaRecorder API supported desktop browsers only (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source on GitHub</a>)</li>
</ul>