翻译正在进行中。

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

构造函数

MediaRecorder.MediaRecorder()
    创建一个新的MediaRecorder对象,返回一个MediaStream 对象用来进行录制操作,支持配置项配置容器的MIME type (例如"video/webm" or "video/mp4")或者 音频的码率 和视频的tracks or a single overall bit rate
 

配置项

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.ondataavailable
Called to handle the dataavailable event, which can be used to grab the recorded media (which is made available as a Blob object in the event's data attribute.)
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
An EventHandler called to handle the pause event, which occurs when media recording is paused.
MediaRecorder.onresume
An EventHandler called to handle the resume event, which occurs when media recording resumes after being paused.
MediaRecorder.onstart
An EventHandler called to handle the start event, which occurs when media recording starts.
MediaRecorder.onstop
An EventHandler called to handle the stop event, which occurs when media recording ends, either when the MediaStream ends — or after the MediaRecorder.stop() method is called.

Example

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

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

文档标签和贡献者

 此页面的贡献者: leonayx123, knimet
 最后编辑者: leonayx123,