前端调用手机摄像头权限进行扫码解析（demo含Vue及原生js写法）

项目必须基于HTTPS协议！！！

引子

本人马上毕业了，现在在新单位实习前端，有个需求需要在移动Web端调用摄像头进行扫码，这方面之前没有接触过，但时间有限，只能走一步看一步，首先收集资料：

调用设备扫码功能在安卓app上有api可以调用，Hbulider 5+app中也有现成的api，但我这个项目已经开发了很久了，只能新加模块，显然不符合上面的情况。
原生Web有个api叫 Navigator.mediaDevices。
mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。
扫码解析则可以使用 qrcode.js 这一个js库。

实践

// 调用摄像头方法，原生Navigator.mediaDevices api
function setwebcam(){var options = true;
if(navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
{try{navigator.mediaDevices.enumerateDevices().then(function(devices) {devices.forEach(function(device) {if (device.kind === 'videoinput') {options={'deviceId': {'exact':device.deviceId}, 'facingMode':'environment'} ;console.log(device);}console.log(device.kind + ": " + device.label +" id = " + device.deviceId);});console.log(options)setwebcam2(options);});}catch(e){console.log(e);}
}
else{console.log("无设备信息。" );
}
}

其中 ‘facingMode’:‘environment’ 则可以稳定调用后置摄像头，不会再出现网上大家所说的调用前置的情况。
此时需要与前端元素配合

// html 样式自调
<div class="container"><div id="scan"><video id="vcode" autoplay></video><canvas id="code-canvas"></canvas></div></div>
start()
//  function
function start(){createCanvas(800,600);setwebcam();
}
// 此处借鉴了导师给的方法，构建canvas
function createCanvas(w,h){n = navigator;v = document.getElementById("vcode");var gCanvas = document.getElementById("code-canvas");gCanvas.style.width = w + "px";gCanvas.style.height = h + "px";gCanvas.width = w;gCanvas.height = h;gCtx = gCanvas.getContext("2d");gCtx.clearRect(0, 0, w, h);console.log("canvas complete！");
}
function setwebcamres(options){var setvideo = n.mediaDevices.getUserMedia({video: options, audio: false});setvideo.then(success, error);}

此时已经可以成功调用摄像头，接下来集成进Vue工程中

安装zxing.js依赖

npm i @zxing/library --save
npm install --save webrtc-adapter

<template><div class="container"><videoid="video"ref="video"width="421"height="400"class="video-container"></video><div>{{ textContent }}</div></div>
</template><script>import adapter from 'webrtc-adapter';// WebRTC适配器 只需要引入import { BrowserMultiFormatReader } from '@zxing/library';export default {data() {return {codeReader: new BrowserMultiFormatReader(),textContent: undefined,};},async created() {this.codeReader.getVideoInputDevices().then((videoInputDevices) => {const selectedDeviceId = videoInputDevices[1].deviceId; //第二个摄像头this.codeReader.decodeFromInputVideoDeviceContinuously(selectedDeviceId, 'video', (result, err) => {if (result) {console.log(result);this.textContent = result.text;this.scanRoomResult(this.textContent);}if (err && !(err)) {console.error(err);}});console.log(`Started continous decode from camera with id ${selectedDeviceId}`);}).catch((err) => {console.error(err);});},methods: {scanRoomResult(roomName) {this.scanRoomInfo = roomName;this.scanRoomInfo = JSON.parse(this.scanRoomInfo);// 将字符串转换成json对象if (!this.scanRoomInfo.locationId) {this.textContent = 'QrCode Error!';} else {this.textContent = this.scanRoomInfo.locationId;const selector = this.$refs['inspectionRuleSelector'];selector && (selector.showRulePicker = true);}}}};
</script><style scoped lang="less">
.container{position: relative;
}.video-container{margin-top: 5vh;}
</style>

最后

以上，在Vue中使用zxing有一点不好就是摄像头可控性不强，他的源码构造函数中没有把facingMode放出来，这也就不太好控制摄像头顺序，因为每个手机摄像头顺序都不一定是相同的。

前端调用手机摄像头权限进行扫码解析相关推荐

利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...
前端实践之调用手机摄像头
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题这篇文章主要介绍了HTML5通过navigator.mediaDevices.getUserMe ...
JS调用安卓手机摄像头扫描二维码并用JS解析二维码
项目要求: 使用H5模仿微信扫一扫付款功能经过一系列的查找最后发现可以使用 JS调用手机摄像头然后用画布把当前摄像头的数据转成Base64的png图片,经过QrCode直接再本地识别. 优点: 兼容 ...
使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
uniapp调用手机摄像头_HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题...
navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能.打开getUserMedia文档,链接如下: https://d ...
MediaDevices html5,HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头
HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头发布时间:2021-05-23 15:03:11 来源:亿速云阅读:76 作者:小新这篇文章 ...
python+opencv用电脑调用手机摄像头或其他网路摄像头
python+opencv用电脑调用手机摄像头或其他网路摄像头文章目录: 1 获取手机摄像头或网络摄像头的ip 1.1 获取手机摄像头的ip 1.2 获取网络摄像头的IP 1.3 关于RTSP协议 ...
html5调用手机摄像头，实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...

前端调用手机摄像头权限进行扫码解析

前端调用手机摄像头权限进行扫码解析（demo含Vue及原生）

前端调用手机摄像头权限进行扫码解析（demo含Vue及原生js写法）

引子

实践

此时已经可以成功调用摄像头，接下来集成进Vue工程中

最后

前端调用手机摄像头权限进行扫码解析相关推荐

最新文章

热门文章