1. vue-qrcode-reader

在浏览器端html中有一款依赖可以直接调用摄像头扫码，vue-qrcode-reader。
分别提供QrcodeStream、QrcodeDropZone、QrcodeCapture用来识别二维码。

QrcodeStream：调用摄像头扫码
QrcodeDropZone：将图片移到识别区域内识别二维码
QrcodeCapture：选择原生拍照或者图片到浏览器识别二维码。

2. 安装

npm install vue-qrcode-reader

3. QrcodeStream直接调用摄像头扫码

init方法是初始化调用摄像头，此时如果摄像头报错会有很多提示，请酌情处理
decode方法，当识别到二维码会把识别信息触发出来

<template><div><p class="error">{{ error }}</p><p class="decode-result">Last result: <b>{{ result }}</b></p><qrcode-stream @decode="onDecode" @init="onInit" /></div>
</template><script>
import { QrcodeStream } from 'vue-qrcode-reader'export default {components: { QrcodeStream },data () {return {result: '',error: ''}},methods: {onDecode (result) {this.result = result},async onInit (promise) {try {await promise} catch (error) {if (error.name === 'NotAllowedError') {this.error = "ERROR: you need to grant camera access permission"} else if (error.name === 'NotFoundError') {this.error = "ERROR: no camera on this device"} else if (error.name === 'NotSupportedError') {this.error = "ERROR: secure context required (HTTPS, localhost)"} else if (error.name === 'NotReadableError') {this.error = "ERROR: is the camera already in use?"} else if (error.name === 'OverconstrainedError') {this.error = "ERROR: installed cameras are not suitable"} else if (error.name === 'StreamApiNotSupportedError') {this.error = "ERROR: Stream API is not supported in this browser"} else if (error.name === 'InsecureContextError') {this.error = `ERROR: Camera access is only permitted in secure context. Use HTTPS or localhost rather than HTTP.`;} else {this.error = `ERROR: Camera error (${error.name})`;}}}}
}
</script><style scoped>
.error {font-weight: bold;color: red;
}
</style>

4. 针对部分IOS【Vue warn】错误

TypeError： Reflect.construct requires the first argument to be a constructor

我目前没有更好的解决办法，只能充分利用vue生命周期中的捕获错误处理 errorCaptured。

有个开发说新版本不支持的

5. QrcodeCapture用原生拍照或者直接选择图片识别

decode方法和QrcodeStream一致，如果识别到了二维码将触发该事件。

<template><div><p>Capture:<select v-model="selected"><option v-for="option in options" :key="option.text" :value="option">{{ option.text }}</option></select></p><hr/><p class="decode-result">Last result: <b>{{ result }}</b></p><qrcode-capture @decode="onDecode" :capture="selected.value" /></div>
</template><script>
import { QrcodeCapture } from 'vue-qrcode-reader'export default {components: { QrcodeCapture },data () {const options = [{ text: "rear camera (default)", value: "environment" },{ text: "front camera", value: "user" },{ text: "force file dialog", value: false },]return {result: '',options,selected: options[0]}},methods: {onDecode (result) {this.result = result}}
}
</script>

注意：选择图片识别的识别率不是很高，但是已经是planB了，可以试试更好的planB或者让作者再努力一下。

完整demo

vue在调用摄像头扫码(vue-qrcode-reader)相关推荐

vue实现点击按钮调用摄像头扫码
vue在APP端点击[扫码签到]按钮实现调取摄像头扫码: 1.按钮页面: <template><div><button @click="scanCode&quo ...
Vue h5 调用微信扫码接口
需求调用微信扫码接口,然后获取扫码返回结果的url中的参数,携参跳转到其他页面 1. 安装微信js-sdk 通过yarn安装 yarn add weixin-js-sdk 通过npm安装 npm i ...
VUE项目移动端H5调用摄像头扫码
<template><div><div @click="moveToCameraAVG()" v-cloak><div class=&qu ...
WinForm调用摄像头扫码识别二维码
前言因公司业务需求,需要在Windows系统下调用摄像头识别二维码需求,就有了这个功能.根据网上网友提供的一些资料,自己整合应用到项目中,效果还不错(就是感觉像素不是太好).现在将调用摄像头+识别二 ...
【Vue 调用微信扫码 IOS报错解决办法】
遇到一个问题,H5调用摄像头扫码,安卓环境下基本所有机型都可以调起摄像头,但是IOS 只有少部分机型才能调用,参考了网上很多例子比如以下两位老大哥的例子 Vue 移动端实现调用相机扫描二维码或条形码 ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
vue实现pc端扫码登录
vue pc端微信扫码登录文章目录 vue pc端微信扫码登录效果图方式一:npm 安装并引入插件参数说明使用自定义样式方式二:通过js 引用js文件 vue 使用注意效果图方式一 ...
Vue 实现企业微信扫码登录
前端 Vue 实现企业微信扫码登录需求:公司用的企业微信,PC 端的管理后台,想通过企业微信扫码登录.相比传统的账号密码方便很多. 企业微信扫码登录流程文档:(链接) 对于前端来说,重要的是如何构造 ...
【javascript】浏览器调用摄像头扫二维码踩坑记录
前言最近做一个项目需要用浏览器调用摄像头扫二维码,然后就踩了几个坑记录下. 踩坑记录我一开始发现了zxing这个库,他分为https://www.npmjs.com/package/@zxing/ ...
vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...

vue在调用摄像头扫码(vue-qrcode-reader)