vue 实现扫条形码与二维码 H5 兼容苹果IOS

1、注意

vue-qrcode-reader采用摄像头解析，浏览器为了安全，只有https协议下或者本地localhost可访问摄像头，所以代码需要部署所在的服务器需要https

2、具体实现①

安装插件

npm install --save vue-qrcode-reader

创建组件

<template><div><qrcode-stream v-if="show" :camera="camera" :torch="torchActive" @decode="onDecode" @init="onInit"><div><div class="qr-scanner"><div class="box"><div class="line"></div><div class="angle"></div></div></div></div></qrcode-stream></div>
</template><script>
import { QrcodeStream } from 'vue-qrcode-reader';
export default {components: {QrcodeStream},data() {return {torchActive: false,camera: 'auto',};},props: {show: {type: Boolean,default: false}},methods: {async onDecode(scanResult) {// TODO 逻辑处理或直接返回扫码结果this.$emit('getScanResult', scanResult)},async onInit(promise) {const {capabilities} = await promise;const TORCH_IS_SUPPORTED = !!capabilities.torch;try {await promise;} catch (error) {if (error.name === 'NotAllowedError') {this.$toast.fail('ERROR');} else if (error.name === 'NotFoundError') {this.$toast.fail('这个设备上没有摄像头');} else if (error.name === 'NotSupportedError') {this.$toast.fail('所需的安全上下文(HTTPS、本地主机)');} else if (error.name === 'NotReadableError') {this.$toast.fail('相机被占用');} else if (error.name === 'OverconstrainedError') {this.$toast.fail('安装摄像头不合适');} else if (error.name === 'StreamApiNotSupportedError') {this.$toast.fail('此浏览器不支持流API');}}},},
};
</script><style scoped>
.qr-scanner {background-image: linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.1) 25%,rgba(32, 255, 77, 0.1) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.1) 75%,rgba(32, 255, 77, 0.1) 76%,transparent 77%,transparent);background-size: 3rem 3rem;background-position: -1rem -1rem;width: 100%;height: 29vh;position: relative;background-color: #1110;
}.qr-scanner .box {width: 213px;height: 213px;position: absolute;left: 50%;top: 100%;transform: translate(-50%, -50%);overflow: hidden;border: 0.1rem solid rgba(0, 255, 51, 0.2);
}.qr-scanner .txt {width: 100%;height: 35px;line-height: 35px;font-size: 14px;text-align: center;margin: 0 auto;position: absolute;top: 70%;left: 0;
}.qr-scanner .myQrcode {text-align: center;color: #00ae10;
}.qr-scanner .line {height: calc(100% - 2px);width: 100%;background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);border-bottom: 3px solid #00ff33;transform: translateY(-100%);animation: radar-beam 2s infinite alternate;animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);animation-delay: 1.4s;
}.qr-scanner .box:after,
.qr-scanner .box:before,
.qr-scanner .angle:after,
.qr-scanner .angle:before {content: '';display: block;position: absolute;width: 3vw;height: 3vw;border: 0.2rem solid transparent;
}.qr-scanner .box:after,
.qr-scanner .box:before {top: 0;border-top-color: #00ff33;
}.qr-scanner .angle:after,
.qr-scanner .angle:before {bottom: 0;border-bottom-color: #00ff33;
}.qr-scanner .box:before,
.qr-scanner .angle:before {left: 0;border-left-color: #00ff33;
}.qr-scanner .box:after,
.qr-scanner .angle:after {right: 0;border-right-color: #00ff33;
}@keyframes radar-beam {0% {transform: translateY(-100%);}100% {transform: translateY(0);}
}
</style>

3、组件使用

导入组件

import qrcode from '@/components/qrcode-scan/qrcode.vue'

注册组件

components: {'vue-qrcode': qrcode
},

原扫码弹窗样式不太美观和不好控制，使用vant弹窗控制样式。定义showScan默认false

<!-- 扫码弹窗 -->
<van-dialog class="dailog-sm" v-model="showScan" :showConfirmButton="false" :close-on-click-overlay="true"><vue-qrcode :show="showScan" @getScanResult="getScanResult"></vue-qrcode><div class="btns-sm"><van-button size="large" type="info" @click="showScan = false">取消</van-button></div>
</van-dialog>

getScanResult

// 扫码结果逻辑处理
async getScanResult (scanResult) {console.log(scanResult);
}

弹窗占满H5页面样式调整

.dailog-sm{left: 0;top: 0;bottom: 0;right: 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);border-radius: 0;width: auto;.qrcode-stream-wrapper{height: 92vh;video{height: 92vh;}}.van-dialog__content{height: 92%;.dialog{height: 100%;}.qr-scanner{height: 100vh;.box{top: 40%;width: 60vw;height: 60vw;}}}.btns-sm{position: fixed;bottom: 0;left: 0;right: 0;padding: 0;background: #000;height: 8vh;text-align: center;.van-button{display: inline-block;height: 8vh;background: none;color: #fff;border: none;font-size: 0.4rem;}}
}

4、效果展示

https下，不加弹窗，不加样式调整

https下，加弹窗，不加样式调整
http，加弹窗，加样式调整

5、最后

可以看到，样式调整后占满了屏幕，在非https下摄像头无法启用，展示的是白屏

应需求，添加条形码扫描支持和苹果手机IOS支持

注意：除了localhost测试，其他环境同样需要https环境，另外对IOS的支持如下，点击前往官网

具体实现②

安装插件

npm install @zxing/library --save

创建组件

<template><div class="page-scan" id="app" v-if="show"><div class="scan-box"><video ref="video" id="video" class="scan-video" autoplay></video><div class="scan-img"><div class="scan-frame"><span class="left-t" style="left: 20%; top: 10%;"></span><span class="right-t" style="right: 20%; top: 10%;"></span><span class="left-b" style="left: 20%; bottom: 10%;"></span><span class="right-b" style="right: 20%; bottom: 10%;"></span><span class="cross-line" style="margin-top: 8%;"></span></div></div><div class="scan-tip"> {{scanTextData.tipMsg}} </div></div></div>
</template><script>
import {BrowserMultiFormatReader
} from '@zxing/library'
let scanTextData = {codeReader: null,tipMsg: '识别条形码/二维码'
}
export default {name: 'scanCodePage',data () {return {scanTextData: {codeReader: null,tipMsg: '识别条形码/二维码'},hasBind: false}},props: {show: {type: Boolean,default: false}},mounted () {scanTextData.codeReader = new BrowserMultiFormatReader()this.openScan()},watch: {'show' (val) {if (!val) {// 关闭摄像头let thisVideo = document.getElementById('video')thisVideo.srcObject.getTracks()[0].stop()scanTextData.codeReader.reset()} else {if (scanTextData.codeReader === null) {scanTextData.codeReader = new BrowserMultiFormatReader()}this.openScan()}}},methods: {async openScan () {scanTextData.codeReader.getVideoInputDevices().then((videoInputDevices) => {// 默认获取第一个摄像头设备idlet firstDeviceId = videoInputDevices[0].deviceId// 获取第一个摄像头设备的名称const videoInputDeviceslablestr = JSON.stringify(videoInputDevices[0].label)if (videoInputDevices.length > 1) {// 判断是否后置摄像头if (videoInputDeviceslablestr.indexOf('back') > -1) {firstDeviceId = videoInputDevices[0].deviceId} else {firstDeviceId = videoInputDevices[1].deviceId}}this.decodeFromInputVideoFunc(firstDeviceId)}).catch(err => {console.error(err)})},decodeFromInputVideoFunc (firstDeviceId) {scanTextData.codeReader.reset()scanTextData.codeReader.decodeFromInputVideoDeviceContinuously(firstDeviceId, 'video', (result, err) => {if (result && result.text) {this.handleResult(result.text)}if (err && !(err)) {this.$toast.fail(err)}})},async handleResult (scanResult) {// TODO 逻辑处理或直接返回扫码结果this.$emit('getScanResult', scanResult)}}
}
</script><style lang="less" scoped>
.scan-box {position: fixed;top: 0;left: 0;height: 100%;width: 100vw;
}.scan-video {height: 100vh;width: 100vw;object-fit: cover;
}.scan-img {width: 500px;height: 500px;position: fixed;top: 40%;left: 50%;margin-top: -200px;margin-left: -250px;z-index: 6;.scan-frame {width: 100%;height: 100%;position: relative;.left-t,.right-t,.left-b,.right-b {position: absolute;width: 80px;height: 80px;}.left-t {top: 0;left: 0;border-top: 2px solid #17B1B7;border-left: 2px solid #17B1B7;}.right-t {top: 0;right: 0;border-top: 2px solid #17B1B7;border-right: 2px solid #17B1B7;}.left-b {bottom: 0;left: 0;border-bottom: 2px solid #17B1B7;border-left: 2px solid #17B1B7;}.right-b {bottom: 0;right: 0;border-bottom: 2px solid #17B1B7;border-right: 2px solid #17B1B7;}.cross-line {width: 300px;height: 10px;background: linear-gradient(to right, rgba(255, 255, 255, 0), #5DDDD3, rgba(255, 255, 255, 0));position: absolute;top: 0;left: 20%;animation: identifier_p 5s infinite;}@keyframes identifier_p {0% {top: 0%;}50% {top: 82%;}100% {top: 0;}}}
}.scan-tip {width: 100vw;text-align: center;margin-bottom: 5vh;color: white;font-size: 5vw;position: absolute;bottom: 50px;left: 0;color: #fff;
}.page-scan {overflow-y: hidden;
}
</style>

vue 实现扫条形码与二维码 H5 兼容苹果IOS相关推荐

钉钉开发平台 —H5微应用-- 扫条形码、二维码 api 示例
扫条形码.二维码使用说明客户端 Android iOS PC 支持说明支持支持不支持 dd.biz.util.scan({type: String , // type 为 all.qrCod ...
vue app扫PC端二维码登录
通过接口获取二维码唯一标识,例如:qrcodeId 通过 qrcodejs2插件生成二维码(二维码内容就是 qrcodeId,具体根据APP 需要) 循环调用接口,查看扫码状态(app是否扫码确认登 ...
SpringBoot+zxing+Vue实现前端请求后台二维码图片
场景 ZXing是一个开源的,用Java实现的多种格式的1D/2D条码图像处理库. github地址: https://github.com/zxing/zxing 若依微服务版手把手教你本地搭建环境 ...
asp.net 生成、解析条形码和二维码
asp.net 生成.解析条形码和二维码原文 asp.net 生成.解析条形码和二维码一.条形码一维码,俗称条形码,广泛的用于电子工业等行业.比如我们常见的书籍背面就会有条形码,通过扫描枪等设备 ...
【MAUI】条形码，二维码扫描功能
前言本系列文章面向移动开发小白,从零开始进行平台相关功能开发,演示如何参考平台的官方文档使用MAUI技术来开发相应功能. 介绍移动端的扫描条形码.二维码的功能已经随处可见,已经很难找到一个不支持扫 ...
python摄像头识别条形码、二维码并打印信息
提前安装好pyzbar 和 opencv-python库 //安装方法:打开cmd, 输入 pip install ...(pyzbar / opencv-python) 注意!!! 打开摄像头的瞬间 ...
winform中实现打开摄像头+识别条形码和二维码
我们去菜鸟驿站拿快递的时候,需要我们把自己的快递拿到扫描台上扫下,表示包裹已出库.今天我们就来实现这个功能,基于winform程序开发快递单的扫描和识别,顺便也识别下二维码.用到的组件有2个,分别是A ...
【Android】扫描条形码和二维码
[Android]扫描条形码和二维码原文链接:https://blog.csdn.net/xu_weijie/article/details/80763848 步骤一: 在gradle集成Zxing ...
条形码和二维码的优缺点
条形码与二维码的优缺点 (1) 条形码优缺点: 条形码技术具有以下几个方面的优点: A.输入速度快:与键盘输入相比,条形码输入的速度是键盘输入的5倍,并且能实现"即时数据输入" ...

vue 实现扫条形码与二维码 H5 兼容苹果IOS

1、注意

2、具体实现①

3、组件使用

4、效果展示

5、最后

具体实现②

vue 实现扫条形码与二维码 H5 兼容苹果IOS相关推荐

最新文章

热门文章

vue 实现扫条形码与二维码 H5 兼容 苹果IOS

1、注意

2、具体实现①

3、组件使用

4、效果展示

5、最后

具体实现②

vue 实现扫条形码与二维码 H5 兼容 苹果IOS相关推荐

最新文章

热门文章

vue 实现扫条形码与二维码 H5 兼容苹果IOS

vue 实现扫条形码与二维码 H5 兼容苹果IOS相关推荐