vue qrcode reader
v5.5.11
QRコードやその他のさまざまなバーコード形式を検出するためのVue.jsコンポーネントのセット：
QrcodeStreamカメラストリームからフレームを継続的にスキャンします。
QrcodeDropZoneは、画像をドラッグアンドドロップすることができる空の領域です。
QrcodeCaptureは、選択したすべてのファイルを即座にスキャンするクラシックファイルアップロードフィールドです。
すべてのコンポーネントが応答します。それを超えて、ゼロスタイリングに近い。レイアウトをフィットさせます。使用法はシンプルで簡単です：
<qrcode-stream @detect = "ondetect"> </qrcode-stream>
方法：{
ondetect（検出コード）{// ...
}}走る
npm vue-qrcode-readerをインストールします
コンポーネントを独立してインポートできます
'vue-qrcode-reader'const mycomponent = {vue-qrcode-reader'const from {qrcodeStream、qrcodedropzone、qrcodecapture}
//
コンポーネント：{qrcodeStream、qrcodedropzone、qrcodecapture}
// ...}または、それらすべてをグローバルにすぐに登録します
'vue-qrcode-reader'vue.use（vueqrcodereader）の' vue'import vueqrcodereaderからのインポート
次のJSファイルを含めます。
https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js
Vueの後にそれを含めるようにしてください：
<script src = "./ vue.js"> </script> <script src = "./ vue-qrcode-reader.umd.js"> </script>
すべてのコンポーネントはグローバルに自動的に登録されます。ケバブケースを使用して、テンプレートでそれらを参照してください。
<qrcode-stream> </qrcode-stream> <qrcode-drop-zone> </qrcode-drop-zone> <qrcode-capture> </qrcode-capture>
QrcodeStream使用するとき、カメラは表示されません。デモページで動作するかどうかを確認してください。特に、エラーメッセージをレンダリングするため、ハンドルエラーがデモです。
デモは機能しますが、私のプロジェクトでは機能しません。 errorイベントを聞いてエラーを調査します。
デモが機能しません。上記のブラウザサポートセクションを注意深く確認します。たぶんあなたのデバイスはただサポートされていません。
セットアップがデスクトップChrome + Android Chromeの場合は、Androidデバイスがローカルホストとしてローカルサーバーにアクセスできるようにするリモートデバッグを使用します。
それ以外の場合は、ngrokやservoなどの逆プロキシを使用して、HTTPSでローカルサーバーを一時的に公開します。
また、デフォルトでHTTPSを有効にし、Webアプリを無料で展開できるサーバーレス/静的ホスティングサービスもたくさんあります（ Githubページ、 Gitlabページ、 Google Firebase 、 Netlify 、 Heroku 、 Zeit Nowなど）
QRコードの周りに白い境界線があることを確認してください。
上流パッケージでQRコードをテストします： barcode-detector > zxing-wasm > zxing-cpp 、および問題が最初に発生した最高レベルのリポジトリのファイル検出の問題。
formats Propのデフォルト値は"['qr_code']"です。これは、 formats Propが利用可能になる前の設定を反映しています。これらのタイプのバーコードを検出するには、この小道具に他のバーコード形式を追加する必要があります。このデモをご覧ください。
サポートはドロップされますが、Vue-Qrcode-Reader V3。*またはlowerにダウングレードできます。
WASMファイルはQRコード検出器を実装します。残念ながら、このファイルをパッケージにバンドルするのはあまり便利ではありません。したがって、デフォルトでは、実行時にCDNからフェッチします。これは、厳密なCSPポリシーを備えたネットワークで実行されるオフラインアプリケーションまたはアプリケーションの問題です。回避策については、＃354を参照してください
torch私のデバイスではサポートされていません。 torchのサポートは、デバイス、カメラ、ブラウザ、オペレーティングシステム間で一貫性がありません。一部のデバイスでは、背面カメラはtorchをサポートしますが、フロントカメラに実際に懐中電灯がある場合でも、フロントカメラはサポートしていません。
さらに、 torch iOSではまったくサポートされていません（最後にIOS 17.1をチェックしました）。
デバイスを使用してこのページにアクセスしてください。リンクのリストは、デバイスにインストールされているすべてのカメラを表します。クリックすると、カメラをロードする必要があります。カメラの下では、「機能」のJSONオブジェクトが印刷されています。キー/値のペア"torch": trueそのカメラの懐中電灯はサポートされていません。
このJSONオブジェクトは、 camera-onイベントのペイロードとして提供されました。
