We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 API を利用してメディアデータを記録するために必要な機能を保持するオブジェクト。 MediaRecorder() コンストラクタによって作成される。
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() {
               console.log("recorder started");

           stop.onclick = function() {
               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.


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 47.0 25.0 (25.0) 1.3 未サポート 未サポート 未サポート

[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.


Specification Status Comment
MediaStream Recording 草案  



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