MediaRecorder API

MediaRecorder API (MediaStream Recording) はインプットデバイスからのメディアストリームを記録するための API です。記録したストリームは PCM データのエンコードと言った操作をせずに利用できます。 Navigator.getUserMedia() を単体で利用する際の利用が想定されています。

キーコンセプトと利用例

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

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

注意: MediaRecorder API の基本的な利用方法については MediaRecorder API の利用  をご覧ください。

MediaRecorder インタフェース

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

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!');
}

Note: This code sample comes from the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.

ブラウザ互換性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support

未サポート

25.0 (25.0) 未サポート 未サポート 未サポート
Feature Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support 未サポート 25.0 (25.0) 1.3 未サポート 未サポート 未サポート

Note: The current Gecko implementation currently only supports audio recording.

仕様

Specification Status Comment
MediaStream Recording 草案  

関連項目

ドキュメントのタグと貢献者

 このページの貢献者: chikoski
 最終更新者: chikoski,