H5原生调用摄像头getUserMedia的使用与注意事项

最新推荐文章于 2024-08-07 17:43:28 发布

fan1347196386

最新推荐文章于 2024-08-07 17:43:28 发布

阅读量1.2w

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/fan1347196386/article/details/108682150

版权

H5原生调用摄像头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=false
				              return 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)
				  						};