移动端调用摄像头,扫描二维码(支持React和原生
h5-scan
JS
使用说明
移动端调用摄像头,扫描二维码(支持react和原生js) 封装jsQR,调用摄像头扫描获取二维码 (提升识别准确率/成功率可以尝试提高canvas的生成图片清晰度,例如引入hidpi-canvas,或者根据屏幕像素比修改canvas的宽高)
DemoDemo移动端打开
兼容性https://caniuse.com/#search=getUserMedia
使用说明 git clone https://github.com/zyzcss/h5-scan.git cd h5-scanyarn
& 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 | 是否连续扫描 |
没有过多封装 实现了基础扫码功能 见public/test.html
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。