js实现web页面扫描二维码（html5-qrcode）(html 调用扫码)

js实现web页面扫描二维码（html5-qrcode）

推荐整理分享js实现web页面扫描二维码（html5-qrcode）(html 调用扫码)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js调用扫一扫,js调用扫码,web前端实现扫一扫功能,js调用扫码,js调用微信扫一扫,js调用扫码,js调用扫码,web前端实现扫一扫功能,内容如对您有帮助，希望把文章链接给更多的朋友！

js实现web页面扫描二维码（html5-qrcode）

以vue3项目使用为例 这种还是推荐IOS和安卓原生实现，做桥接文件调用 这种实现方式只支持localhost和https的浏览器网页版 而且经过测试兼容性也不是很好，具体参见官网 下面附了官网链接

1.下载依赖

npm install html5-qrcode

2.二次封装

<template> <div> <div class="readerDialog" v-show="dialogShow"> <div id="reader" width="600px"></div> </div> </div></template><script>// 调起摄像头扫描二维码import { ref, reactive, toRefs, watch, getCurrentInstance } from 'vue';import { Html5Qrcode } from 'html5-qrcode';export default { name: 'Qrcode', props: [], emits: ['success'], setup (props, { emit }) { const params = reactive({ dialogShow: false, codeUrl: '', cameraId: '', showText: '', devices: [], getCamerasText: '', html5QrCode: null }); // 外部调用此方法打开 const open = () => { params.dialogShow = true; console.log('params.dialogShow', params.dialogShow); getCameras(); }; const getCameras = () => { params.getCamerasText = JSON.stringify(Html5Qrcode.getCameras()); Html5Qrcode.getCameras() .then((devices) => { params.showText = JSON.stringify(devices); /** * devices would be an array of objects of type: * { id: "id", label: "label" } */ if (devices && devices.length) { // 如果有2个摄像头，1为前置的 if (devices.length > 1) { params.cameraId = devices[1].id; } else { params.cameraId = devices[0].id; } params.devices = devices; start(); // .. use this to start scanning. } }) .catch((err) => { params.showText = err; console.log('getCameras err:', err); // 获取设备信息失败 }); }; const start = () => { params.html5QrCode = new Html5Qrcode('reader'); params.html5QrCode.start( params.cameraId, // retreived in the previous step. { fps: 10, // sets the framerate to 10 frame per second qrbox: { width: 250, height: 250 }, // sets only 250 X 250 region of viewfinder to // scannable, rest shaded. }, (decodedText, decodedResult) => { // do something when code is read. For example: // if (qrCodeMessage) { // this.getCode(qrCodeMessage); // this.stop(); // } console.log('===成功日志：', decodedText); console.log(typeof decodedResult, decodedResult); emit('success', decodedText); stop(); params.dialogShow = false; }, (errorMessage) => { // parse error, ideally ignore it. For example: // console.log(`QR Code no longer in front of camera.`); console.log('非扫描成功日志：', errorMessage); } ) .catch((err) => { // Start failed, handle it. For example, console.log(`Unable to start scanning, error: ${err}`); }); }; const stop = () => { params.html5QrCode .stop() .then((ignore) => { // QR Code scanning is stopped. console.log('QR Code scanning stopped.'); }) .catch((err) => { // Stop failed, handle it. console.log('Unable to stop scanning.'); }); }; return { ...toRefs(params), getCameras, open }; },};</script><style lang="scss" scoped>.readerDialog { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: #333; #reader { top: 25%; }}</style>

3.使用（以下只演示部分核心代码）

html部分

<van-button type="success" @click="cameraClick">开始扫描</van-button><Qrcode ref="QrcodeRef" @success="qrcodeSuccess" />

js部分

import Qrcode from '@/components/Qrcode/index.vue';const QrcodeRef = ref();const qrcodeText = ref('');// 扫描调起const cameraClick = () => { QrcodeRef.value.open();};// 扫描成功回调const qrcodeSuccess = (txt) => { qrcodeText.value = txt;};

官网：https://github.com/mebjas/html5-qrcode