在很久很久以前，我亲爱的同事们在对接二维码扫描业务的时候，都是使用的微信官方自带的扫一扫，比如这样
1wx.scanQRCode({
2 needResult: 0,
3 scanType: ["qrCode","barCode"],
4 success: function (res) {
5 var result = res.resultStr;
6 }
7});
所以我扫码就一定得依赖微信，在普通的浏览器中打开就GG，并且还要绑定公众号，烦的一批。
然后我就在想，扫码不就是靠摄像头捕捉图像进行解码出内容嘛，那肯定会有原生的解决方案。
Google Google Google Google ......
果然是有的，Web API中也提供了一个实验性的功能，Barcode Detection API
它提供了一个detect方法，可以接收图片元素、图片二进制数据或者是ImageData，最终返回一个包含码信息的Promise对象。
但是呢，这个功能的浏览器兼容性比较差，看了caniuse，心凉了一半。
但我相信大神们肯定有自己的解决方案，继续Google呗。
Google Google Google Google ......
还真有这么一个库，html5-qrcode，它在zxing-js的基础之上，又增加了对多种码制的解码支持，站在巨人的肩膀上又跟高了一层。
html5-qrcode支持的码有：
我个人觉得非常够用了，平时用的最多的还是二维码、条形码，其他的码也都少见。
关键是人家还支持了各种浏览器，可以说已经是很良心了（什么UC浏览器的，其实我都瞧不上，不支持就不支持，无所吊谓）
来看看官方提供的demo效果
好好好，很棒。但是他们没有提供框架支持，那么我又可以站在巨人的肩膀上的巨人的肩膀上造轮子了。
先来看看我自己封装的React组件
使用方法也简单
1function App() {
2 const scanCodeRef = useRef();
3 const [scanResult, setScanResult] = useState('');
4
5 function startScan() {
6 scanCodeRef.current?.initScan();
7 }
8
9 return (
10 <div>
11 <button onClick={startScan}>扫一扫</button>
12 <p>扫描结果: {scanResult}</p>
13 <ScanQrCodeH5
14 ref={scanCodeRef}
15 scanTips="请一定要对准二维码哦～"
16 onScanSuccess={(text) => {
17 setScanResult(text);
18 }}
19 // onScanError={(err) => {
20 // console.log(err);
21 // }}
22 />
23 </div>
24 );
25}
三二一，上链接，rc-qrcode-scan
这次的版本没有加入从相册选择图片进行解码，下个版本将会加入，希望能帮到掘友们。
2023-09-28更新，掘友们我把从相册选择加进去了。
个人笔记记录 2021 ~ 2025