html5 mediarecorder,webrtc之MediaRecorder接口

MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象

语法var mediaRecorder = new MediaRecorder(stream[, options]);

参数stream

options可选

一个字典对象,它可以包含下列属性:mimeType: 为新构建的 MediaRecorder 指定录制容器的MIME类型. 在应用中通过调用 MediaRecorder.isTypeSupported() 来检查浏览器是否支持此种mimeType .

audioBitsPerSecond: 指定音频的比特率.

videoBitsPerSecond: 指定视频的比特率.

bitsPerSecond: 指定音频和视频的比特率. 此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定, 则此属性可以用于设定另外一个属性.

如果视频和/或音频的比特率没有指定, 视频默认采用的比特率是2.5Mbps, 但音频的默认比特率并不固定, 音频的默认比特率根据采样率和轨道数自适应.

例子

此例展示了如果对指定的流创建一个音频比特率为128kbps,视频比特率为2.5Mbps的媒体录制器. 被录制的媒体数据会以MP4格式封装(因此你若获取这些媒体数据片段,并存放到磁盘上去,你就会得到一个mp4文件)....

if (navigator.mediaDevices.getUserMedia) {

var constraints = { audio: true, video: true };

var chunks = [];  var onSuccess = function(stream) {

var options = {

audioBitsPerSecond : 128000,

videoBitsPerSecond : 2500000,

mimeType : 'video/mp4'

}

var mediaRecorder = new MediaRecorder(stream,options);

m = mediaRecorder;

...

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

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

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

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

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

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

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

暂停媒体录制

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

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

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

停止录制. 同时触发Blob内容的录制数据.之后不再记录

事件调用它用来处理 data 属性中会提供一个可用的 Blob 对象.)

An EventHandler called to handle the

用来处理 MediaStream)结束时、或者调用MediaRecorder.stop() 方法后触发.

Exampleif (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);

})

}