HTML5通过navigator.mediaDevices.getUserMedia挪用手机摄像头题目
副问题[/!--empirenews.page--]
navigator.mediaDevices.getUserMedia 应项目要求,必要实现移动端app嵌入H5页面完成实人认证的成果。打开getUserMedia文档,链接如下: API情形 题目一:(为什么不管怎么设置都表现前置摄像头) 想正常行使API必需在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); }); } } 题目三:(第一次启用乐成挪用前置摄像头,第二次必要挪用后置却黑屏可能失败) 失败的缘故起因许多,罗列两个一开始我碰着的题目 if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } 亲测有效,此外找了许多遏制的要领都没有结果。 var deviceInfoId="", //摄像头ID num = 0, //摄像头数目 carema = []; //摄像头ID数组 //在页面加载完成后得到装备ID数组 window.onload = navigator.mediaDevices.enumerateDevices().then(gotDevices); function gotDevices(deviceInfos) { for (let i = 0; i < deviceInfos.length; ++i) { if (deviceInfos[i].kind === 'videoinput') { carema.push(deviceInfos[i].deviceId) } } deviceInfoId = carema[后置位置]; } var constraints = { audio: false, video: { deviceId: deviceInfoId, //放在app内里必要下面设置一下 "permissions": { "audio-capture": { "description": "Required to capture audio using getUserMedia()" }, "video-capture": { "description": "Required to capture video using getUserMedia()" } } } }; 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); } this.localMediaStream = stream; // video.play(); 这个加不加仿佛没有影响 }) .catch(function (err) { console.log(err.name + ": " + err.message); }); 假如只是一部手机可以这样,可是测试了多部手机发明摄像头数组毫无纪律可循,这个要领慎用。 <input class="card_input" v-on:change="appCapture($event)" type="file" accept="image/*" capture="camera" /> 乐成挪用后用canvas实现成像并顺应屏幕巨细 我这里的代码是取video的宽高然后复制给canvas,这样可以让canvas和video保持同等,只用给video配置宽度100%,高度调理成吻合的值,就实现了顺应手机屏幕。 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; //localMediaStream 在data里界说一个{} if (localMediaStream) { ctx.drawImage(video, 0, 0, CWidth, CHeight); var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA' img.src = dataURL; video成像镜像题目 API叫醒的前置摄像头是相反的,很不惬意很不惬意。 var constraints = window.constraints = { audio: false, video: { sourceId: 'default', facingMode: { exact: "user" } } }; 美满挪用本技艺机的前置摄像头!!! 完备代码如下: (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |