QR Code Readerの比較
hbsnow
雑に調べた前提知識
QR Code Reader は内部で ZXing-based なライブラリを使用しているものと ZXing を参考にした独自実装（というよりもfork）のライブラリが存在しているようです。
QRコードをブラウザから読み混むためには、カメラからの読み込み、その画像を解析する必要がりますが、これをメインスレッドでやるとパフォーマンスがよくなさそうということは容易に想像がつきます。
基本的にライブラリではこのあたりをWorkerで実装してくれているようなので、使う側はこのへんを意識することなく使えるということになります。
逆にいうと、jsQR のような低レベルのライブラリを使用してしまうと、Workerの実装の他にも場合によってはパフォーマンス向上のためのスキャン領域制御といった処理も必要になります。
高密度のQRコードを読み込ませようとするのは結構大変そうな印象で、Workerを使ったりWasm対応していたりといったことが必要そうで、いくつかのライブラリではそういった内容の Issue も見かけることがちょくちょくありました。
結論
qr-scanner が圧倒的によさそう。Web Workerの対応、BarcodeDetectorが利用できそうであればそっちを使うといったやってほしいことをやってくれるのがこれくらいしかない。
React であれば react-qr-scanner も試してみてもいいかもしれません。ただこれは qr-scannerのReact用のラッパーというわけではなくて、ZXingがWASMの実装になっているので、場合によってはパフォーマンスがいいこともあるのかなというくらい（実際に調べたわけではないのでわかりません）。
また、Reactでとなると react-qr-reader も Workerの実装があるっぽいので試してみてもいいかもしれません。
いずれも公式にデモがあるので、使う予定のQRコードで実際に使うデバイスでスキャンを試してみるというのがいいのではないかと思います。
hbsnowqr-scanner
バンドルサイズ
デモ
特徴
- jsQR (jsqr-es) を内部で利用
- とても簡単に Worker 処理可能
- Native で BarcodeDetector が利用できる場合には最小限の読み込みのみを行う
hbsnow@zxing/browser
バンドルサイズ
デモ
特徴
- @zxing/library を内部で利用
- 複数のバーコードフォーマットに対応
- 常にメインスレッドで処理する
hbsnowHtml5-QRCode
バンドルサイズ
デモ
特徴
- @zxing/library を fork したものを利用
- 複数のバーコードフォーマットに対応
- UIが同梱しているので、とにかく実装したいなら便利なのかもしれない。逆に言うとそうでないならあえて選択する理由もなさそう
hbsnowzxing-wasm
Zxing の wasm 実装なので、実装しないといけないものが多そうなので今回は選定外。
barcode-detector もWasmで実装されていて、react-qr-scanner はこれを使って実装されていたりします。
hbsnowqrcode-reader
バンドルサイズ
特徴
- あえて選ぶ理由がちょっとわからなかった。7年前からメンテナンスがされていない
- GitHubのAboutにも[deprecated]と書かれている（逆に言うとここにしか書かれていなそうで、若干気づきにくい）
- 結構使われているのは名前がいいからだろうか