H5通过navigator.mediaDevices.getUserMedia调用手机摄像头 |
您所在的位置：网站首页 › uc浏览器没有扫一扫功能吗 › H5通过navigator.mediaDevices.getUserMedia调用手机摄像头 |
|
navigator.mediaDevices.getUserMedia 应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单，最终却写的怀疑人生。 API环境问题一：（为什么不管怎么配置都显示前置摄像头） 想正常使用API必须在https环境下进行，否则你会发现不管怎么写，都只能调用默认的摄像头（大部分都是前置，只有少部分是后置） 前端开发者可以将文件上传至"码云"仓库，获取https链接然后在手机上预览 链接：码云仓库入口 问题二：（API在安卓和ios效果一样吗？） 根据官方文档，目前navigator.mediaDevices.getUserMedia在ios上只支持11版本以上，且只能在safari正常运行。安卓目前没有发现版本限制，需要兼容的代码如下 if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } }问题三：（第一次启用成功调用前置摄像头，第二次需要调用后置却黑屏或者失败） 失败的原因很多，列举两个一开始我遇到的问题 1.前置摄像头调用后，摄像功能需要关闭后才能正常执行第二次调用，否则会报错：设备被占用。解决方法，在每次执行调用方法前，先关闭摄像设备。 if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); }亲测有用，别的找了很多停止的方法都没有效果。 2.调用后置API的方法还是无法唤醒后置摄像头，于是我找到另外一个方法，通过查看手机摄像头ID，来直接唤醒后置。 var deviceInfoId="", //摄像头ID num = 0, //摄像头数量 carema = []; //摄像头ID数组 //在页面加载完成后获得设备ID数组 window.onload = navigator.mediaDevices.enumerateDevices().then(gotDevices); function gotDevices(deviceInfos) { for (let i = 0; i 点击自拍一张头像 拍照 // 头像相机 moveToCameraAVG() { var self = this; if (navigator.mediaDevices === undefined) { navigator.mediaDevices = {}; } if (navigator.mediaDevices.getUserMedia === undefined) { navigator.mediaDevices.getUserMedia = function (constraints) { var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia; if (!getUserMedia) { return Promise.reject(new Error('getUserMedia is not implemented in this browser')); } return new Promise(function (resolve, reject) { getUserMedia.call(navigator, constraints, resolve, reject); }); } } if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } var constraints = window.constraints = { audio: false, video: { sourceId: 'default', facingMode: { exact: "user" } } }; navigator.mediaDevices.getUserMedia(constraints) .then(function (stream) { var video = document.getElementById('video'); try { window.stream = stream; video.srcObject = stream; } catch (error) { video.src = window.URL.createObjectURL(stream); } self.localMediaStream = stream; video.play(); }) .catch(function (err) { alert(err.name + ": " + err.message); }); }, //停止摄像机 stopCapture: function () { var video = document.getElementById('video'); if (!video.srcObject) return let stream = video.srcObject let tracks = stream.getTracks(); tracks.forEach(track => { track.stop() }) }, // 头像照片 captureAvg() { var vm = this; var video = document.getElementById('video'); var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), CHeight = video.clientHeight, //获取屏幕大小让canvas自适应 CWidth = video.clientWidth; canvas.width = CWidth; canvas.height = CHeight; if (vm.localMediaStream) { ctx.drawImage(video, 0, 0, CWidth, CHeight); var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA' vm.imginfo = dataURL; // 停止摄像机 video.pause(); this.stopCapture(); } },希望可以帮助到一些人~也希望大家有其他建议的相互帮助和学习。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |