MediaRecorder API

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

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

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

[1] The initial Firefox OS implementation only supported audio recording.

[2] To use MediaRecorder in Chrome 47 and 48, enable experimental Web Platform features from the chrome://flags page.

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

• MediaRecorder API の利用
• Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
• simpl.info MediaStream Recording demo, by Sam Dutton.
• Navigator.getUserMedia