getUserMedia的使用与注意事项

附上api文档
1.简单使用
MediaDevices 是一个单例对象。通常，您只需直接使用此对象的成员，例如通过调用navigator.mediaDevices.getUserMedia(),
可以调用设备的摄像头与麦克风，实现录制视频，此方法需要接受一个对象为参数,audio为麦克风，video为视频，

navigator.mediaDevices.getUserMedia({audio: true, video:true } }).then(this.getsuccess).catch(this.getMediaError)//以下是此方法的兼容性写法，
if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia||MediaDevices;if (!getUserMedia) {this.nav=falsereturn Promise.reject(new Error('getUserMedia is not implemented in this browser'));}return new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});}}

调用成功后会在回调函数里生成一个stream参数，可以将此对象以属性的方式赋给video的dom节点，此时你就会发现视频会实时播放摄像头里的内容

               video=document.querySelector('video')	try{video.srcObject = stream;}catch{//这里是兼容写法let compatibleURL = window.URL || window.webkitURL;video.src = compatibleURL.createObjectURL(stream);}

video标签的默认行为会影响体验，我们一般会配合canvas标签覆盖住video标签，

setInterval(()=>{context.drawImage(video,0,0,300,300)})

这时就完美了，我们还可以通过canvas截图的方式完成拍摄功能，

2.获得拍摄的视频
MediaRecorder对象通过接受stream对象可以接收到录制的视频，通过特定的方法得到视频blob对象 参考文档

mediaRecorder = new MediaRecorder(stream);mediaRecorder.start()//初始化mediaRecorder.ondataavailable = function(e) {//监听函数//回参里有截取的视频blob对象console.log(e)};

MediaRecorder.ondataavailable 会在特定的条件下触发

3.注意事项
除了注意兼容性外，此api在一些浏览器里必须以https协议访问，不然可能会报错，在手机微信浏览器里就会直接undefind,当时我以为是微信浏览器不兼容此方法，费了半天时间