我的发！地表最强扫一扫

在很久很久以前，我亲爱的同事们在对接二维码扫描业务的时候，都是使用的微信官方自带的扫一扫，比如这样

wx.scanQRCode({
needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});

所以我扫码就一定得依赖微信，在普通的浏览器中打开就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组件

使用方法也简单

function App() {
const scanCodeRef = useRef();
const [scanResult, setScanResult] = useState('');
  
function startScan() {
scanCodeRef.current?.initScan();
}
  
return (
<div>
<button onClick={startScan}>扫一扫</button>
<p>扫描结果: {scanResult}</p>
<ScanQrCodeH5
ref={scanCodeRef}
scanTips="请一定要对准二维码哦～"
onScanSuccess={(text) => {
setScanResult(text);
}}
// onScanError={(err) => {
// console.log(err);
// }}
/>
</div>
);
}

三二一，上链接，rc-qrcode-scan：https://www.npmjs.com/package/rc-qrcode-scan

这次的版本没有加入从相册选择图片进行解码，下个版本将会加入，希望能帮到掘友们。

作者：AliPaPa链接：https://juejin.cn/post/7283080455852359734