H5 网页录制视频MediaRecorder(chrome浏览器录制黑屏，有声音)

最近做项目，遇到一个需求需要使用MediaReCorder api对直播流视频进行录制。
MediaRecorder使用语法new MediaRecorder(stream,options);
stream
MediaStream 将要录制的流. 它可以是来自于使用 navigator.mediaDevices.getUserMedia() 创建的流或者来自于 , 以及 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'，黑屏问题解决

参考:https://blog.csdn.net/qq_36958916/article/details/108529705