PaddleHub 多进程 Markdown mongoose build ssis ionic3 Amaze UI jQuery Mobile Backbonejs vue树形菜单 前端项目实战 android项目开发 click事件 websocket库 oracle重命名表名 python爬虫包 python语言入门 python正则匹配空格 python自定义异常 java的接口 java介绍 java的运行环境 java学习流程 java安装 java多线程编程 linuxsleep gtx1030 神龙激活 php抓取网页数据 groupy 虚拟打印机安装 批处理if 疯狂java讲义 vs2003 中维高清监控系统安装 汽车配件查询软件 天正建筑2007 编程电子书 羽化快捷键
当前位置: 首页 > 学习教程  > 编程语言

getUserMedia的使用与注意事项

2020/9/19 16:03:38 文章标签:

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)
				  						};

MediaRecorder.ondataavailable 会在特定的条件下触发
在这里插入图片描述
3.注意事项
除了注意兼容性外,此api在一些浏览器里必须以https协议访问,不然可能会报错,在手机微信浏览器里就会直接undefind,当时我以为是微信浏览器不兼容此方法,费了半天时间


本文链接: http://www.dtmao.cc/news_show_200341.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?