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=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,当时我以为是微信浏览器不兼容此方法，费了半天时间

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

微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
浏览器调用摄像头getUserMedia
浏览器调用摄像头getUserMedia 2018年启动QQ浏览器会启动摄像头的新闻闹得沸沸扬扬. 前段时间公司让研究一下这个浏览器启用摄像头的功能,希望能够实现浏览器网页扫描二维码的功能.现在写下来 ...
java 百度账号注册界面_基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)...
人脸注册.人脸搜索使用百度AI接口.不支持H5活体检测(需要活体检测请参考百度AI-H5活体检测) 只是为了演示.所以是IP.最好用火狐浏览器访问.谷歌提示异常作者就不专门修改了.大家可以直接下载源码 ...
基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)
为什么80%的码农都做不了架构师?>>> 人脸注册.人脸搜索使用百度AI接口.不支持H5活体检测(需要活体检测请参考百度AI-H5活体检测) 体验地址(人脸注册) http://12 ...
实现移动端H5页面调用摄像头
<h3>image图片</h3> <input type="file" accept="image/*" capture=&quo ...
前端js调用摄像头进行录像并传到后端
js调用摄像头录像并传到后端参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg 项目要求前端h ...
H5通过navigator.mediaDevices.getUserMedia调用手机摄像头
navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能.打开getUserMedia文档,链接如下: https://d ...
h5 利用getUserMedia 实现只调用摄像头
h5开发中调用摄像头,通常会根据不同的手机显示不同的状态,往往会可以选择相册中的图片, 常规用法: -input type=file capture 为了让用户必须拍照上传利用 getUserMed ...
手机移动端-纯js浏览器h5调用摄像头扫描识别解析条形码+二维码
一.场景手机移动端-原生js 浏览器h5 解决识别二维码条形码功能: 不借助Hbuilder.需要自己打包成APP,比如用Hbuilder打包,浏览器端项目h5 无打包成app部署 X 不采用 ...

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

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

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

最新文章

热门文章