就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. Web API
  3. MediaRecorder

在此页

MediaRecorder 接口在 MediaStream 录制 API provides functionality to easily record media. It is created using the MediaRecorder() 构造函数。

构造函数

MediaRecorder()
创建新的 MediaRecorder object, given a MediaStream to record. Options are available to do things like set the container's MIME type (such as "video/webm" or "video/mp4" ) and the bit rates of the audio and video tracks or a single overall bit rate.

特性

MediaRecorder.mimeType 只读
Returns the MIME type that was selected as the recording container for the MediaRecorder object when it was created.
MediaRecorder.state 只读
Returns the current state of the MediaRecorder 对象 ( inactive , recording ，或 paused )。
MediaRecorder.stream 只读
Returns the stream that was passed into the constructor when the MediaRecorder was created.
MediaRecorder.ignoreMutedMedia
Indicates whether the MediaRecorder instance will record input when the input MediaStreamTrack is muted. If this attribute is false , MediaRecorder will record silence for audio and black frames for video. The default is false .
MediaRecorder.videoBitsPerSecond 只读

Returns the video encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).

MediaRecorder.audioBitsPerSecond 只读

Returns the audio encoding bit rate in use. This may differ from the bit rate specified in the constructor (if it was provided).

方法

MediaRecorder.pause()

Pauses the recording of media.

MediaRecorder.requestData()
请求 Blob containing the saved data received thus far (or since the last time requestData() was called. After calling this method, recording continues, but in a new Blob .
MediaRecorder.resume()

Resumes recording of media after having been paused.

MediaRecorder.start()
Begins recording media; this method can optionally be passed a timeslice argument with a value in milliseconds. If this is specified, the media will be captured in separate chunks of that duration, rather than the default behavior of recording the media in a single large chunk.
MediaRecorder.stop()
Stops recording, at which point a dataavailable event containing the final Blob of saved data is fired. No more recording occurs.

静态方法

MediaRecorder.isTypeSupported()
A static method which returns a 布尔 value indicating if the given MIME media type is supported by the current user agent.

事件处理程序

MediaRecorder.ondataavailable
Called to handle the dataavailable event, which is periodically triggered each time timeslice milliseconds of media have been recorded (or when the entire media has been recorded, if timeslice wasn't specified). The event, of type BlobEvent , contains the recorded media in its data property. You can then collect and act upon that recorded media data using this event handler.
MediaRecorder.onerror
EventHandler called to handle the error event, including reporting errors that arise with media recording. These are fatal errors that stop recording. The received event is based on the MediaRecorderErrorEvent interface, whose error property contains a DOMException that describes the actual error that occurred.
MediaRecorder.onpause
EventHandler called to handle the pause event, which occurs when media recording is paused.
MediaRecorder.onresume
EventHandler called to handle the resume event, which occurs when media recording resumes after being paused.
MediaRecorder.onstart
EventHandler called to handle the start event, which occurs when media recording starts.
MediaRecorder.onstop
EventHandler called to handle the stop event, which occurs when media recording ends, either when the MediaStream ends — or after the MediaRecorder.stop() 方法被调用。

事件

监听这些事件使用 addEventListener() 或通过把事件监听器赋值给 on eventname 特性为此接口。

error
Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.
也可用凭借 onerror 特性。

范例 

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 occurred: ' + 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.

规范

规范 状态 注释
MediaStream 录制 工作草案 初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据
桌面 移动
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
MediaRecorder Chrome 47 Edge 79 Firefox 25
25
Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia() , then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25
25
Prior to Firefox 58, using MediaStream.addTrack() on a stream obtained using getUserMedia() , then attempting to record the resulting stream would result in only recording the original stream without the added tracks (severe bug).
Opera Android 36 Safari iOS No Samsung Internet Android 5.0
MediaRecorder() 构造函数 Chrome 47 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
audioBitsPerSecond Chrome 49 Edge 79 Firefox 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android ? Opera Android 36 Safari iOS No Samsung Internet Android 5.0
error event Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
ignoreMutedMedia 弃用 非标 Chrome 49 — 57 Edge No Firefox ? IE No Opera 36 — 44 Safari No WebView Android 49 — 57 Chrome Android 49 — 57 Firefox Android ? Opera Android 36 — 44 Safari iOS No Samsung Internet Android 5.0 — 7.0
isTypeSupported Chrome 47 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
mimeType Chrome 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Edge 79 Firefox 25
25
Starting with Firefox 71, the behavior of mimeType is more consistent. For example, it now returns the media type even after recording has stopped.
IE No Opera 36 Safari No WebView Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Chrome Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
ondataavailable Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onerror Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onpause Chrome 49 Edge 79 Firefox 65 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 65 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onresume Chrome 49 Edge 79 Firefox 65 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 65 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onstart Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onstop Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
onwarning 弃用 Chrome 49 Edge 79 Firefox 25 — 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
pause Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
requestData Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
resume Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
start Chrome 47 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 47 Chrome Android 47 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
state Chrome 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Chrome Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
stop Chrome 49 Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
stream Chrome 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Edge 79 Firefox 25 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49
49
不支持 47 — 49
Prior to Chrome 49, only video is supported, not audio.
Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0
videoBitsPerSecond Chrome 49 Edge 79 Firefox 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android ? Opera Android 36 Safari iOS No Samsung Internet Android 5.0
warning event 弃用 Chrome 49 Edge 79 Firefox 25 — 71 IE No Opera 36 Safari No WebView Android 49 Chrome Android 49 Firefox Android 25 Opera Android 36 Safari iOS No Samsung Internet Android 5.0

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

弃用。不要用于新网站。

弃用。不要用于新网站。

见实现注意事项。

另请参阅

元数据

  • 最后修改：
  1. MediaRecorder
  2. 构造函数
    1. MediaRecorder()
  3. 特性
    1. audioBitsPerSecond
    2. ignoreMutedMedia
    3. mimeType
    4. ondataavailable
    5. onerror
    6. onpause
    7. onresume
    8. onstart
    9. onstop
    10. onwarning
    11. state
    12. stream
  4. 方法
    1. isTypeSupported
    2. pause()
    3. requestData()
    4. resume()
    5. start()
    6. stop()
  5. 事件
    1. error
  6. 继承：
    1. EventTarget

版权所有  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1