最近做项目，遇到一个需求需要使用MediaReCorder api对直播流视频进行录制。
MediaRecorder使用语法new MediaRecorder(stream,options);
stream
MediaStream 将要录制的流. 它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 <audio>, <video> 以及 <canvas> DOM元素.
options 可选
-
mimeType: 为新构建的MediaRecorder指定录制容器的MIME类型. 在应用中通过调用MediaRecorder.isTypeSupported()来检查浏览器是否支持此种mimeType. -
audioBitsPerSecond: 指定音频的比特率. -
videoBitsPerSecond: 指定视频的比特率. -
bitsPerSecond: 指定音频和视频的比特率. 此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定, 则此属性可以用于设定另外一个属性.
示例一：通过摄像头录制（navigator.mediaDevices.getUserMedia目前支持的url:localhost、file、https，http下navigator.mediaDevices.getUserMedia为undefined）
启动录制或停止:
recorder.start();//开始录制
recorder.stop();//录制结束
navigator.mediaDevices.getUserMedia({audio: true, video: {width: 400, height: 600}})
.then((stream) => {
const options = {mimeType:'video/webm;codecs=vp8,opus'};//mimeType设置很重要，我在开发遇到录制视频完成后播放黑屏和mineType设置有关系
recorder = new MediaRecorder(stream，options);
videoTarget.srcObject = stream;
videoTarget = (...arg) => {
console.log(arg);
}
recorder.ondataavailable = (event) => {
let url = URL.createObjectURL(event.data);
let link = document.createElement("a");
link.href = url;
link.click();
}
recorder.start();//开始录制
});
recorder.stop();//录制结束
示例二：video录制
//captureStream该方法用于获取媒体流，有两个对象实现了这个API，分别是HTMLMediaElement和HTMLCanvasElement
const stream = video.captureStream?video.captureStream():video.mozCaptureStream();//浏览器兼容处理
const options = {mimeType:'video/webm;codecs=vp8,opus'};
recorder = new MediaRecorder(stream);
recorder.ondataavailable =function(e){
allchunks.push(e.data);
}
示例三：canvas录制
video//视频播放video
video.oncanplay = function(){
width=this.videoWidth;
height=this.videoHeight;
}
const canvas=document.createElement('canvas');
canvas.width = width;
canvas.height= height;
const ctx = canvas.getContext('2d');
const options = {mimeType:'video/webm;codecs=vp8,opus'};
const stream = canvas.captureStream?canvas.captureStream():canvas.mozCaptureStream();//浏览器兼容处理
recorder = new MediaRecorder(stream);
recorder.ondataavailable =function(e){
allchunks.push(e.data);
}
function dramImage(){
ctx.drawImage(video,0,0,width,height);
requestAnimationFrame(dramImage);//
}
最后，录制完成通过recorder.ondataavailable事件的e.data就是接受到的媒体
//通过a标签下载到本地
const tmpBlob = new Blob(allchunks);
videoUrl = window.URL.createObjectURL(tmpBlob);
const a=document.createElement('a');
a.href = videoUrl;
a.download = 'media'+new Date().getTime();
a.click();
chrome浏览器录制黑屏，但是有声音；现在发现主要是mimeType的设置造成的。将mimeType设置成'video/webm;codecs=vp8,opus'，黑屏问题解决
