---
title: MediaRecorder API
slug: Web/API/MediaRecorder_API
translation_of: Web/API/MediaStream_Recording_API
translation_of_original: Web/API/MediaRecorder_API
---
<div class="summary">
<p><span class="seoSummary">MediaRecorder API (MediaStream Recording) はインプットデバイスからのメディアストリームを記録するための API です。記録したストリームは PCM データのエンコードと言った操作をせずに利用できます。 {{ domxref("Navigator.getUserMedia()") }} を単体で利用する際の利用が想定されています。</span></p>
</div>

<h2 id="キーコンセプトと利用例">キーコンセプトと利用例</h2>

<p>MediaRecorder を {{ domxref("Navigator.getUserMedia()") }} とともに利用することで、メディアデータを記録できます。単純には、 {{ domxref("MediaRecorder.start()") }} メソッドを呼ぶことで記録を開始できます。MediaStream の終了、もしくは {{ domxref("MediaRecorder.stop()") }} や{{ domxref("MediaRecorder.requestData()") }}<code> の呼び出しによって記録用のデータが準備できた際には、dataavailable</code> イベントが発生します。現在のところ、データはプラットホームの標準でエンコードされ、 <code>dataavailable</code>の data 属性に {{ domxref("Blob") }} として配置されます。</p>

<p>アプリは利用可能なエンコード方式を問い合わせ、その中から利用するものを選択することも可能です。またデータをより小さなバッファとして一定間隔で受け取ることもできます。間隔は {{ domxref("MediaRecorder.start()") }} を呼ぶ際に指定できます。</p>

<div class="note">
<p><strong>注意</strong>: MediaRecorder API の基本的な利用方法については <a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用</a>  をご覧ください。</p>
</div>

<h2 id="MediaRecorder_インタフェース">MediaRecorder インタフェース</h2>

<dl>
 <dt>{{ domxref("MediaRecorder") }}</dt>
 <dd>MediaRecorder API を利用してメディアデータを記録するために必要な機能を保持するオブジェクト。 <code>MediaRecorder()</code> コンストラクタによって作成される。</dd>
 <dt>{{ domxref("BlobEvent") }}</dt>
 <dd>{{ domxref("MediaRecorder") }} によって記録されたメディアデータを保持する {{ domxref("Blob") }} オブジェクトへのアクセス手段を提供する。</dd>
</dl>

<h2 id="Example" name="Example">例</h2>

<pre class="brush: js; highlight:[11,14,19,23] notranslate">if (navigator.getUserMedia) {
   console.log('getUserMedia supported.');
   navigator.getUserMedia (
      // constraints - only audio needed for this app
      {
         audio: true
      },

      // Success callback
      function(stream) {
           var mediaRecorder = new MediaRecorder(stream);

           record.onclick = function() {
               mediaRecorder.start();
               console.log("recorder started");
           }

           stop.onclick = function() {
               mediaRecorder.stop();
               console.log("recorder stopped");
           }

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

             var audio = document.createElement('audio');
             audio.setAttribute('controls', '');
             var audioURL = window.URL.createObjectURL(e.data);
             audio.src = audioURL;
           }
      },

      // Error callback
      function(err) {
         console.log('The following gUM error occured: ' + err);
      }
   );
} else {
   console.log('getUserMedia not supported on your browser!');
}</pre>

<div class="note">
<p><strong>注意</strong>: このサンプルコードはWeb Dictaphoneのデモを参考にしています。コードを簡単にする為にいくつかの行は省略されています。完全なコードは <a href="https://github.com/mdn/web-dictaphone/">元ソース</a> を参照して下さい。</p>
</div>

<h2 id="Browser_compatibility" name="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>
    <p>{{ CompatChrome(47.0) }}</p>
   </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</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>{{ CompatGeckoDesktop("25.0") }}</td>
   <td>1.3</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
 </tbody>
</table>
</div>

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

<p>[2] To use {{domxref("MediaRecorder")}} in Chrome 47 and 48, enable <strong>experimental Web Platform features</strong> from the <code>chrome://flags</code> page.</p>

<p>[3] Audio recording works in Chrome 49 and above; Chrome 47 and 48 only support video recording.</p>

<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></td>
  </tr>
 </tbody>
</table>

<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="http://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="http://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>

<section id="Quick_Links">
<h3 id="クイックリンク">クイックリンク</h3>

<ol>
 <li data-default-state="open"><strong><a href="#">ガイド</a></strong>

  <ol>
   <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">MediaRecorder API の利用</a></li>
   <li><a href="/en-US/docs/WebRTC/Taking_webcam_photos">getUserMedia を利用して webcam から写真を撮影する</a></li>
  </ol>
 </li>
 <li data-default-state="open"><strong><a href="#">インタフェース</a></strong>
  <ol>
   <li>{{ domxref("MediaRecorder") }}</li>
   <li>{{ domxref("BlobEvent") }}</li>
  </ol>
 </li>
 <li data-default-state="open"><strong><a href="#">例</a></strong>
  <ol>
   <li><a href="http://mdn.github.io/web-dictaphone">Web Dictaphone</a></li>
   <li><a href="http://simpl.info/mediarecorder/">MediaStream の記録例</a></li>
  </ol>
 </li>
</ol>
</section>