MediaRecorder - Web API 接口参考 编辑

MediaRecorder 是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口, 他需要通过调用 MediaRecorder() 构造方法进行实例化.

构造函数

MediaRecorder.MediaRecorder()

    创建一个新的MediaRecorder对象,对指定的MediaStream 对象进行录制,支持的配置项包括设置容器的MIME 类型 (例如"video/webm" 或者 "video/mp4")和音频及视频的码率或者二者同用一个码率

配置项

MediaRecorder.mimeType 只读

    返回 MediaRecorder 对象创建时选择器选择的录制容器的 MIME type

MediaRecorder.state 只读

    返回录制对象MediaRecorder  的当前状态(闲置中,录制中或者暂停 ) (inactive, recording, or paused.)

MediaRecorder.stream 只读

    返回录制器对象 MediaRecorder创建时构造函数传入的stream对象

MediaRecorder.ignoreMutedMedia

    用以指定 MediaRecorder是否录制无声的输入源. 如果这个属性是false. 录制器对象MediaRecorder  会录制无声的音频或者黑屏的视频, 默认值是false

MediaRecorder.videoBitsPerSecond 只读

返回视频采用的编码比率. 它可能和构造函数的设置比率不同.  (if it was provided).

MediaRecorder.audioBitsPerSecond 只读

返回音频采用的编码比率,它可能和构造函数中设置的比率不同. (if it was provided).

方法

MediaRecorder.isTypeSupported()

返回一个Boolean 值,来表示设置的MIME type 是否被当前用户的设备支持.

MediaRecorder.pause()

暂停媒体录制

MediaRecorder.requestData()

请求一个从开始到当前接收到的,存储为Blob类型的录制内容. (或者是返回从上一次调用requestData() 方法之后到现在的内容).  调用这个方法后,录制将会继续进行,但是会创建一个新的Blob对象

MediaRecorder.resume()

继续录制之前被暂停的录制动作.

MediaRecorder.start()

开始录制媒体,这个方法调用时可以通过给timeslice参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.

MediaRecorder.stop()

停止录制. 同时触发dataavailable事件,返回一个存储Blob内容的录制数据.之后不再记录

静态方法

MediaRecorder.isTypeSupported()

静态方法，判断给定的MIME类型是否支持。返回Boolean类型的值。

事件处理

MediaRecorder.ondataavailable

调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象.)

MediaRecorder.onerror

An EventHandler called to handle the recordingerror event, including reporting errors that arise with media recording. These are fatal errors that stop recording.

MediaRecorder.onpause

用来处理 pause 事件, 该事件在媒体暂停录制时触发（MediaRecorder.pause()）.

MediaRecorder.onresume

用来处理 resume 事件, 该事件在暂停后回复录制视频时触发（MediaRecorder.resume()）.

MediaRecorder.onstart

用来处理 start 事件, 该事件在媒体开始录制时触发（MediaRecorder.start()）.

MediaRecorder.onstop

用来处理 stop 事件, 该事件会在媒体录制结束时、媒体流（MediaStream）结束时、或者调用MediaRecorder.stop() 方法后触发.

事件

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface.

error

Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.
Also available via the onerror property.

例子

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

This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; refer to the source for the complete code.

Specifications

Specification	Status	Comment
MediaStream Recording	Working Draft	Initial definition

Browser compatibility

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!

• Desktop
• Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	47.0	25.0 (25.0)	未实现	未实现	未实现

Feature	Android Webview	Chrome for Android	Firefox Mobile (Gecko)	Firefox OS	IE Phone	Opera Mobile	Safari Mobile
Basic support	47.0	47.0	25.0 (25.0)	1.3[1]	未实现	未实现	未实现

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

See also

• Using the MediaRecorder API
• Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
• Recording a media element
• simpl.info MediaStream Recording demo, by Sam Dutton.
• navigator.mediaDevices.getUserMedia
• FingerSpell: Sign Language Fingerspelling practice using MediaDevices and the MediaStream Recording API to create and download recordings, MediaRecorder API supported desktop browsers only (source on GitHub)