移动端调用摄像头,扫描二维码(支持React和原生

h5-scan

移动端调用摄像头,扫描二维码(支持react和原生js) 封装jsQR,调用摄像头扫描获取二维码 (提升识别准确率/成功率可以尝试提高canvas的生成图片清晰度,例如引入hidpi-canvas,或者根据屏幕像素比修改canvas的宽高)

Demo

Demo移动端打开

兼容性

https://caniuse.com/#search=getUserMedia

使用说明 git clone https://github.com/zyzcss/h5-scan.git cd h5-scan yarn & yarn start | npm install & npm run start 确保pc和手机再同一局域网下,使用ipconfig查看ipv4指向的ip 例:192.168.0.1 手机浏览器输入 react环境:https://192.168.0.1:3000/ 原生js环境:https://192.168.0.1:3000/test.html React 使用方式

支持组件形式和函数形式

组件

import ScanCode from './ScanCode/ScanCode' <ScanCode {...config}/>

函数

import { show } from './ScanCode/ScanCode' show({ ...config })

参数

详见ScanCode/ScanCode.tsx内的ScanFuncProps

参数名 参数类型 参数说明
visible boolean 显示隐藏(函数调用时不用传)
onCancel Function 关闭回调
onOk Function 成功回调
multiple boolean 是否连续扫描
JS 使用说明

没有过多封装 实现了基础扫码功能 见public/test.html

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。