MediaRecorder
MediaRecorder
是 MediaStream Recording API 提供的用来进行媒体轻松录制的接口,他需要通过调用 MediaRecorder()
构造方法进行实例化。
构造函数
MediaRecorder.MediaRecorder()
-
创建一个新的
MediaRecorder
对象,对指定的MediaStream
对象进行录制,支持的配置项包括设置容器的 MIME 类型 (例如"video/webm"
或者"video/mp4"
) 和音频及视频的码率或者二者同用一个码率
配置项
MediaRecorder.mimeType
(en-US) 只读-
返回
MediaRecorder
对象创建时选择器选择的录制容器的 MIME type MediaRecorder.state
(en-US) 只读-
返回录制对象
MediaRecorder
的当前状态 (闲置中,录制中或者暂停 ) (inactive
,recording
, orpaused
.) MediaRecorder.stream
(en-US) 只读-
返回录制器对象
MediaRecorder
创建时构造函数传入的 stream 对象 MediaRecorder.ignoreMutedMedia
-
用以指定
MediaRecorder
是否录制无声的输入源。如果这个属性是 false. 录制器对象MediaRecorder
会录制无声的音频或者黑屏的视频,默认值是 false MediaRecorder.videoBitsPerSecond
(en-US) 只读-
返回视频采用的编码比率。它可能和构造函数的设置比率不同。(if it was provided).
MediaRecorder.audioBitsPerSecond
只读-
返回音频采用的编码比率,它可能和构造函数中设置的比率不同。(if it was provided).
方法
MediaRecorder.isTypeSupported()
(en-US)-
返回一个
Boolean
(en-US) 值,来表示设置的 MIME type 是否被当前用户的设备支持。 MediaRecorder.pause()
-
暂停媒体录制
MediaRecorder.requestData()
(en-US)-
请求一个从开始到当前接收到的,存储为
Blob
类型的录制内容。(或者是返回从上一次调用requestData()
方法之后到现在的内容). 调用这个方法后,录制将会继续进行,但是会创建一个新的Blob
对象 MediaRecorder.resume()
(en-US)-
继续录制之前被暂停的录制动作。
MediaRecorder.start()
(en-US)-
开始录制媒体,这个方法调用时可以通过给
timeslice
参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块,而不是以默认的方式录制一个非常大的整块内容。 MediaRecorder.stop()
(en-US)-
停止录制。同时触发
dataavailable
事件,返回一个存储Blob
内容的录制数据。之后不再记录
静态方法
MediaRecorder.isTypeSupported()
-
静态方法,判断给定的 MIME 类型是否支持。返回
Boolean
(en-US)类型的值。
事件处理
MediaRecorder.ondataavailable
-
调用它用来处理
dataavailable
事件,该事件可用于获取录制的媒体资源 (在事件的data
属性中会提供一个可用的Blob
对象.) MediaRecorder.onerror
(en-US)-
An event handler called to handle the
recordingerror
event, including reporting errors that arise with media recording. These are fatal errors that stop recording. MediaRecorder.onpause
(en-US)-
用来处理
pause
事件,该事件在媒体暂停录制时触发(MediaRecorder.pause()
). MediaRecorder.onresume
(en-US)-
用来处理
resume
事件,该事件在暂停后回复录制视频时触发(MediaRecorder.resume()
(en-US)). MediaRecorder.onstart
(en-US)-
用来处理
start
事件,该事件在媒体开始录制时触发(MediaRecorder.start()
(en-US)). MediaRecorder.onstop
(en-US)-
用来处理
stop
事件,该事件会在媒体录制结束时、媒体流(MediaStream
)结束时、或者调用MediaRecorder.stop()
(en-US) 方法后触发。
事件
Listen to these events using addEventListener()
or by assigning an event listener to the oneventname
property of this interface.
error
(en-US)-
Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec. Also available via the
onerror
(en-US) 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 |
---|
MediaStream Recording # mediarecorder-api |
Browser compatibility
BCD tables only load in the browser
See also
- Using the MediaRecorder API (en-US)
- Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
- Recording a media element (en-US)
- simpl.info MediaStream Recording demo, by Sam Dutton.
navigator.mediaDevices.getUserMedia
(en-US)- 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)