web-dev-qa-db-ja.com

プログレッシブWebアプリ(PWA)QRコードスキャナー

Progressive Web Application(PWA)内でQR Code Scannerを使用したい。

使用法:その商品と製品用のQRコードがたくさんあるお店があると想像してください。ユーザーがQRコードをスキャンするたびに、買い物客のカートに商品を追加したいと思います。

質問:それを実装するコンポーネントはありますか?どうやって?

9
Mostafa Ghadimi

これらのプロジェクトはあなたを助けることができると思います:

  • qr-code-scanner

URL: https://github.com/code-kotis/qr-code-scanner

サポートされているブラウザ:Google Chrome、Firefox、Opera(デスクトップとモバイルの両方)、Microsoft Edge((Insider Preview build))、iOSもサポートするようになりました

  • pwa-qr-code-scanner

URL: https://github.com/Minishlink/pwa-qr-code-scanner

サポートされているブラウザ:Google Chrome、Firefox、Microsoft Edge

2

Dynamsoft JavaScriptバーコードSDKを使用して、簡単なPWAプロジェクトを作成しました。商用SDKを気にしない場合は、試してみてください: https://github.com/dynamsoft-dbr/javascript-barcode/tree/master/examples/pwa

これが私のスクリーンショットです。

モバイル

enter image description here

デスクトップ

enter image description here

または、オープンソースプロジェクトZXingを使用できます。 GitHubにいくつかの例を提出しました: https://github.com/yushulx/zxing-cpp-emscripten 。 QRコードをスキャンするために、zxing.jsをPWAプロジェクトに統合するのは非常に簡単です。

enter image description here

1
yushulx