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