Google の ZXing ライブラリの Cosmo Wolfe の JavaScript ポートに基づく Javascript QR コード スキャナ。
このライブラリでは、元のポートにいくつかの改善が適用されています。
BarcodeDetectorが使用可能な場合、~15.3 KB (gzip 圧縮された~5.6 KB) のみがロードされます。私たちのベンチマークによると、このプロジェクトのスキャナ エンジンの検出率は、最も人気のある JavaScript QR スキャナ ライブラリ LazarSoft/jsqrcode の約 2 ～ 3 倍 (最大 8 倍) です。また、他のライブラリでは QR コードの内容を誤って読み取ることがよくありましたが、このプロジェクトではベンチマークでは誤読は発生しませんでした。
このライブラリは、単一画像のスキャンだけでなく、Web カメラからの連続ビデオ ストリームのスキャンもサポートしています。
このライブラリの開発は、世界初のブラウザベースのブロックチェーンである nimiq によって後援されています。
https://nimiq.github.io/qr-scanner/demo/ を参照してください。
npm 経由でインストールするには:
npm install --save qr-scanner糸経由でインストールするには:
yarn add qr-scannerまたは、単にqr-scanner.min.jsとqr-scanner-worker.min.jsプロジェクトにコピーします。
QR スキャナーは 2 つのメイン ファイルで構成されます。 qr-scanner.min.js 、必要な場合にのみ、動的インポートを介してワーカー スクリプトqr-scanner-worker.min.jsをロードするメイン API ファイルです。動的インポートを自動的に処理する Rollup や Webpack などのバンドラーを使用していない場合は、 qr-scanner-worker.min.js dist のqr-scanner.min.jsの隣またはスクリプトの隣にコピーする必要がある場合があります。これにqr-scanner.min.jsをバンドルします。
qr-scanner.min.jsは es6 モジュールであり、次のようにインポートできます。
import QrScanner from 'path/to/qr-scanner.min.js' ; // if using plain es6 import
import QrScanner from 'qr-scanner' ; // if installed via package and bundling with a module bundler like webpack or rollupこれには、インポートするスクリプトも es6 モジュールまたはモジュール スクリプト タグである必要があります。例:
< script type =" module " >
import QrScanner from 'path/to/qr-scanner.min.js' ;
// do something with QrScanner
</ script >プロジェクトが es6 モジュールに基づいていない場合は、次のことができます。
import ( 'path/to/qr-scanner.min.js' ) . then ( ( module ) => {
const QrScanner = module . default ;
// do something with QrScanner
} ) ;qr-scanner.umd.min.jsを使用します。 < script src =" path/to/qr-scanner.umd.min.js " > </ script >
< script >
// do something with QrScanner
</ script >qr-scanner.umd.min.js非モジュール コードに直接バンドルします。requireベースのバンドラーでバンドルします。 const QrScanner = require ( 'qr-scanner' ) ; // if installed via package
const QrScanner = require ( 'path/to/qr-scanner.umd.min.js' ) ; // if not installed via package
// do something with QrScannerこのライブラリは、 async関数などの ECMAScript 2017 機能を使用します。古いブラウザをサポートする必要がある場合は、ECMAScript 2015 (ES6) と互換性のあるqr-scanner.legacy.min.jsを使用できます。これは UMD ビルドであり、 qr-scanner.umd.min.jsの代わりとして使用できます (上記を参照)。レガシー ビルドにはいくつかのポリフィルが含まれており、動的インポートをサポートしていないブラウザをサポートするためにワーカー スクリプトがインライン化されていますが、いずれにせよレガシー ブラウザに読み込む必要があるため、レガシー ビルドはサイズが大きいことに注意してください。ただし、通常のビルドでは一般的なブラウザのサポートがすでに非常に優れているため、レガシー ビルドを使用する必要はおそらくありません。特にデバイスのカメラからスキャンする場合は、ブラウザによるカメラのサポートがより厳しい制限となります。
Web カメラのビデオ ストリームをレンダリングする<video>要素を作成します。
< video > </ video > // To enforce the use of the new api with detailed scan results, call the constructor with an options object, see below.
const qrScanner = new QrScanner (
videoElem ,
result => console . log ( 'decoded qr code:' , result ) ,
{ /* your options or returnDetailedScanResult: true if you're not specifying any other options */ } ,
) ;
// For backwards compatibility, omitting the options object will currently use the old api, returning scan results as
// simple strings. This old api will be removed in the next major release, by which point the options object is then
// also not required anymore to enable the new api.
const qrScanner = new QrScanner (
videoElem ,
result => console . log ( 'decoded qr code:' , result ) ,
// No options provided. This will use the old api and is deprecated in the current version until next major version.
) ;オプションの 3 番目のパラメーターとして、オプション オブジェクトを指定できます。サポートされているオプションは次のとおりです。
| オプション | 説明 |
|---|---|
onDecodeError | デコードエラー時に呼び出されるハンドラー。デフォルトはQrScanner._onDecodeErrorです。 |
preferredCamera | 使用するカメラの優先順位。設定には、 listCamerasによって返されるデバイス ID、または'environment'または'user'として指定される対面モードのいずれかを指定できます。デフォルトは'environment'です。希望が実際に満たされるという保証はないことに注意してください。 |
maxScansPerSecond | このオプションを使用すると、スキャンを抑制してバッテリーの消費を抑えることができます。デフォルトは 25 です。ブラウザでサポートされている場合、同じフレームでの不要な重複スキャンを避けるために、スキャン レートがカメラのフレーム レートよりも高くなることはありません。 |
calculateScanRegion | パフォーマンス向上のためにスキャンを制限する領域を決定する方法。追加のパフォーマンス向上として、スキャンを実行する前にこの領域をオプションでスケールダウンすることもできます。領域はx 、 y 、 width 、 heightとして指定されます。ダウンスケール領域の寸法は、 downScaledWidthおよびdownScaledHeightとして指定されます。 widthとheightのアスペクト比、およびdownScaledWidthとdownScaledHeight同じままである必要があることに注意してください。デフォルトでは、スキャン領域はビデオの幅または高さの小さい方の 3 分の 2 の中央の正方形に制限され、400x400 の正方形に縮小されます。 |
highlightScanRegion | ビデオ ストリーム上のスキャン領域の周囲のアウトラインをレンダリングするには、このオプションをtrueに設定します。これは、スキャン領域をカバーする絶対位置のdiv使用します。このdiv 、以下を参照してオプションoverlayとして指定することも、自動的に作成されてqrScanner.$overlay経由でアクセスすることもできます。 CSS を使用して、アウトライン、境界線、背景色などを設定することで自由にスタイルを設定できます。例については、デモを参照してください。 |
highlightCodeOutline | 検出された QR コードの周囲にアウトラインをレンダリングするには、このオプションをtrueに設定します。これは、アウトラインをレンダリングするための SVG が配置される絶対位置のdivを使用します。このdiv 、以下を参照してオプションoverlayとして指定するか、 qrScanner.$overlay経由でアクセスできます。 SVG は、塗りつぶしの色、ストロークの色、ストロークの幅などを設定するなど、CSS を介して自由にスタイル設定できます。例については、デモを参照してください。さらに特殊なニーズがある場合は、 cornerPoints直接使用して、アウトラインまたはポイントを自分でレンダリングすることもできます (以下を参照)。 |
overlay | カスタムdivは、 highlightScanRegionおよびhighlightCodeOutlineに使用するために提供できます。 div 、DOM 内のvideoElemの兄弟である必要があります。このオプションを指定すると、要素にはすでにカスタム スタイルが適用されていることが想定されるため、 highlightCodeOutlineのデフォルト スタイルは適用されません。 |
returnDetailedScanResult | 詳細なスキャン結果のレポートを強制します。以下を参照してください。 |
オプションのデフォルト値を使用するには、それを省略するか、 undefinedを指定します。
コールバックに渡される結果は、オプション オブジェクトが提供されたかどうかによって異なります。
dataと、カメラ ストリーム上で読み取られた QR コードのアウトラインのコーナー ポイントであるcornerPoints含むオブジェクトになります。他のオプションを指定していない場合に非推奨の API の使用を回避するには、 { returnDetailedScanResult: true }を指定して新しい API を有効にし、詳細なスキャン結果を取得します。
qrScanner . start ( ) ;スキャンの準備ができたときに、たとえばボタンのクリック時やページの読み込み時に直接呼び出します。ユーザーにカメラの使用許可を求めるメッセージが表示されます。注: Web カメラ ストリームから読み取るには、ページが HTTPS 経由で提供される必要があります。
qrScanner . stop ( ) ;必要に応じていつでもスキャンを停止し、 start()再度呼び出すことでスキャンを再開できます。
QrScanner . scanImage ( image )
. then ( result => console . log ( result ) )
. catch ( error => console . log ( error || 'No QR code found.' ) ) ;サポートされている画像ソースは次のとおりです: HTMLImageElement、SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas、ファイル/Blob、データ URI、画像を指す URL (同じオリジンにある場合、または CORS が有効な場合)
オプションの 2 番目のパラメータとして、オプション オブジェクトを指定できます。サポートされているオプションは次のとおりです。
| オプション | 説明 |
|---|---|
scanRegion | QR コードの検索を制限するx 、 y 、 width 、およびheightで定義される領域。パフォーマンスの向上として、 downScaledWidthとdownScaledHeight指定することで、スキャンを実行する前にこの領域を縮小できます。 widthとheightのアスペクト比、およびdownScaledWidthとdownScaledHeight同じままである必要があることに注意してください。デフォルトでは、領域は画像全体に広がり、縮小されません。 |
qrEngine | 再利用される手動で作成された QR スキャナ エンジン インスタンス。これにより、大量の画像をスキャンする場合のパフォーマンスが向上します。エンジンはQrScanner.createQrEngine(QrScanner.WORKER_PATH)を介して手動で作成できます。デフォルトでは、単一イメージのスキャンに再利用されるエンジンはありません。 |
canvas | 手動で作成された再利用可能なキャンバス。これにより、大量の画像をスキャンする場合のパフォーマンスが向上します。キャンバスは、マークアップ内の<canvas>タグまたはdocument.createElement('canvas')を使用して手動で作成できます。デフォルトでは、単一イメージのスキャンにキャンバスは再利用されません。 |
disallowCanvasResizing | ソース画像やソース領域の寸法に関係なく、提供された再利用用のキャンバスのサイズを変更しないようにリクエストします。スキャンする画像が歪んで QR コードの検出が不可能になることを避けるために、キャンバスとソース領域は同じアスペクト比である必要があることに注意してください。デフォルトでは、キャンバス サイズはスキャン領域の寸法、または単一画像スキャンの場合は縮小されたスキャン領域に適合します。 |
alsoTryWithoutScanRegion | scanRegionが指定されていて、その領域内で QR コードが見つからなかった場合は、画像全体の 2 回目のスキャンを要求します。デフォルトでは、2 回目のスキャンは試行されません。 |
returnDetailedScanResult | 詳細なスキャン結果のレポートを強制します。以下を参照してください。 |
オプションのデフォルト値を使用するには、それを省略するか、 undefinedを指定します。
返される結果は、オプション オブジェクトが提供されたかどうかによって異なります。
dataと、カメラ ストリーム上で読み取られた QR コードのアウトラインのコーナー ポイントであるcornerPoints含むオブジェクトになります。他のオプションを指定していない場合に非推奨の API の使用を回避するには、 { returnDetailedScanResult: true }を指定して新しい API を有効にし、詳細なスキャン結果を取得します。
QR コードを読み取れなかった場合、 scanImageスローされます。
このライブラリは、デバイスにカメラが搭載されているかどうかを確認するためのユーティリティ メソッドを提供します。これは、QR Web カメラ スキャン機能をユーザーに提供するかどうかを決定するのに役立ちます。
QrScanner . hasCamera ( ) ; // asyncこのライブラリは、 idとlabelによって定義されたデバイスのカメラのリストを取得するためのユーティリティ メソッドを提供します。これは、ユーザーが使用する特定のカメラを選択できるようにする場合に便利です。
必要に応じて、カメラのラベルをリクエストできます。ただし、これにはカメラにアクセスするためのユーザーの許可が必要であり、まだ許可されていない場合は許可が求められることに注意してください。特に要求されない場合、デバイス ラベルはベスト エフォート ベースで決定されます。つまり、アクセス許可がすでに付与されている場合は実際のラベルが返され、そうでない場合はフォールバック ラベルが返されます。カメラ ラベルをリクエストする場合は、QrScanner インスタンスが正常に開始された後でlistCamerasを呼び出すことをお勧めします。その時点までにユーザーはすでに許可を与えているためです。
QrScanner . listCameras ( ) ; // async; without requesting camera labels
QrScanner . listCameras ( true ) ; // async; requesting camera labels, potentially asking the user for permission使用する優先カメラを変更できます。設定には、 listCamerasによって返されるデバイス ID、または'environment'または'user'として指定される対面モードのいずれかを指定できます。希望が実際に満たされるという保証はないことに注意してください。
qrScanner . setCamera ( facingModeOrDeviceId ) ; // asyncスキャナーはデフォルトで、明るい背景上の暗い QR コードをスキャンします。この動作を変更して、暗い背景で明るい QR コードをスキャンしたり、その両方を同時にスキャンしたりできます。
qrScanner . setInversionMode ( inversionMode ) ; inversionModeは、 original 、 invert 、またはbothになります。 Web カメラのスキャンのデフォルトはoriginalであり、単一画像のスキャンのデフォルトはboth 。
グレースケール計算で赤、緑、青の重みを変更して、特定の色の QR コードのコントラストを改善します。
qrScanner . setGrayscaleWeights ( red , green , blue , useIntegerApproximation = true ) ; useIntegerApproximation === trueの場合、 red 、 green 、 blue合計は 256 になり、それ以外の場合は1なります。デフォルトでは、これらの値が使用されます。
サポートされているブラウザでは、現在使用しているカメラにフラッシュがあるかどうかを確認し、オンまたはオフにすることができます。 hasFlash は、フラッシュ サポートがあるかどうかを問い合わせるためだけに一時的なカメラ ストリームを開いて、ユーザーにカメラ アクセスを要求する可能性を避けるために、スキャナが正常に開始された後に呼び出す必要があることに注意してください。
qrScanner . hasFlash ( ) ; // check whether the browser and used camera support turning the flash on; async.
qrScanner . isFlashOn ( ) ; // check whether the flash is on
qrScanner . turnFlashOn ( ) ; // turn the flash on if supported; async
qrScanner . turnFlashOff ( ) ; // turn the flash off if supported; async
qrScanner . toggleFlash ( ) ; // toggle the flash if supported; async.QR スキャナーが不要になった場合は、破棄できます。
qrScanner . destroy ( ) ;
qrScanner = null ;これにより、カメラ ストリームと Web ワーカーが停止し、イベント リスナーがクリーンアップされます。 QR スキャナは破壊されると機能しなくなります。
プロジェクトは、qr-scanner-worker.min.js と組み合わせて qr-scanner.min.js で事前にビルドされます。自分でビルドする必要があるのは、/src フォルダー内のコードを変更する場合のみです。ビルドにはNodeJsが必要です。
必要なビルド パッケージをインストールします。
yarn建物：
yarn build
