h5端调用手机摄像头实现扫一扫功能

一、前言

最近有遇到一个需求,在h5浏览器中实现扫码功能,其本质便是打开手机摄像头定时拍照,特此做一个记录。主要技术栈采用的是vue2,使用的开发工具是hbuilderX。

经过测试发现部分浏览器并不支持打开摄像头,测试了果子,华子和米,发现夸克浏览器无法打开摄像头实现功能。

h5调用摄像头实现扫一扫只能在https环境下,亦或者是本地调试环境!!

二、技术方案

经过一番了解之后,找到了两个方案

1.使用html5-qrcode(对二维码的精度要求较高,胜在使用比较方便,公司用的是vue2,因此最终采用此方案)

2.使用vue-qrcode-reader(对vue版本和node有一定要求,推荐vue3使用,这里就不展开说了)

三、使用方式

当点击中间的扫码时,设置isScanning属性为true,即可打开扫码功能,代码复制粘贴即可放心'食用'。

使用之前做的准备

通过npm install html5-qrcode 下载包

引入 import { Html5Qrcode } from 'html5-qrcode';

ini 复制代码
html结构
<view class="reader-box" v-if="isScaning">
	<view class="reader" id="reader"></view>
</view>
javascript 复制代码
所用数据
data(){
    return{
        html5Qrcode: null,
        isScaning: false,
    }
}
javascript 复制代码
methods方法
openQrcode() {
    this.isScaning = true;
    Html5Qrcode.getCameras().then((devices) => {
    if (devices && devices.length) {
    this.html5Qrcode = new Html5Qrcode('reader');
    this.html5Qrcode.start(
        {
        facingMode: 'environment'
        },
        {
        focusMode: 'continuous', //设置连续聚焦模式
        fps: 5,       //设置扫码识别速度
        qrbox: 280   //设置二维码扫描框大小
        },
        (decodeText, decodeResult) => {
         if (decodeText) {	//这里decodeText就是通过扫描二维码得到的内容
            this.action(decodeText)  //对二维码逻辑处理
            this.stopScan(); //关闭扫码功能
        }
    },
        (err) => {
            // console.log(err);  //错误信息
         }
     );
    }
    });
},

stopScan() {
	console.log('停止扫码')
	this.isScaning = false;
	if(this.html5Qrcode){
    this.html5Qrcode.stop();
	}
}
css 复制代码
css样式
.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.reader {
		width:100%;
		// width: 540rpx;
		// height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

四、最终效果

如有问题,欢迎指正,若此文对您有帮助,不要忘记收藏+关注!

相关推荐
上优2 分钟前
Vue3纯前端同源跨窗口通信移动AGV小车
前端·vue.js·状态模式
h_k100863 分钟前
Chrome 插件开发入门技术文章大纲
前端·chrome
一只小阿乐3 分钟前
vue-router 的实现原理
前端·javascript·vue.js·路由·vue-router
绝无仅有3 分钟前
面试之MySQL 高级实战& 优化篇经验总结与分享
后端·面试·github
Zz_waiting.3 分钟前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
绝无仅有5 分钟前
某云大厂面试之Go 实际问题及答案
后端·面试·github
一只小风华~7 分钟前
Vue:事件处理机制详解
前端·javascript·vue.js·typescript·前端框架
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone