ホーム>プログラミング関連>その他のソースコード
ダウンロード

HTML5-QRコード

重要 - このプロジェクトの新しい所有者を探しています。

ご興味がございましたら、 [email protected]までご連絡ください。

HTML5-QRコード

重要プロジェクトは追って通知があるまでメンテナンス モードです。作者は当面の間、バグ修正や改善を行うことができません。プルリクエストも当面はマージされません。保守できるフォークをお持ちの場合は、詳細を [email protected] に共有してください。ここで宣伝させていただけると嬉しいです！プロジェクトをそのまま使用しても問題ありません。例: scanapp.org。

軽量でクロスプラットフォームの Web 用 QR コードおよびバーコード スキャン ライブラリ

この軽量ライブラリを使用すると、QR コード、バーコード、その他の一般的なコード スキャン機能を Web アプリケーションに簡単かつ迅速に統合できます。

主なハイライト

  • ?さまざまな種類のバーコードと QR コードのスキャンをサポートします。

  • ? Android、IOS、MacO、Windows、Linuxなど、さまざまなプラットフォームをサポート

  • Chrome、Firefox、Safari、Edge、Opera などのさまざまなブラウザをサポートします。

  • ?カメラとローカルファイルによるスキャンをサポート

  • ➡️ UI を備えたエンドツーエンドのライブラリと、独自の UI を構築するための低レベルのライブラリが付属しています。

  • ?フラッシュ/トーチのサポート、ズームなどのカスタマイズをサポートします。

2種類のAPIをサポート

  • Html5QrcodeScanner — UI を備えたエンドツーエンドのスキャナー。10 行未満のコードで統合されます。

  • Html5Qrcode — カメラのセットアップ、権限の処理、コードの読み取りなどを気にせずに UI を構築するために使用できる強力な API セット。

デバイス上のローカル ファイルのスキャンのサポートは新たに追加されたもので、スマートフォンのインライン Web カメラ アクセスをサポートしていない Web ブラウザーにとって役立ちます。注:これはファイルをどのサーバーにもアップロードしません。すべてがローカルで行われます。

scanapp.org でのデモqrcode.minhazav.dev でのデモ -さまざまな種類のコードのスキャン

あなたの助けが必要です!

画像このプロジェクトのスポンサーシップ目標をサポートすることで、機能開発やバグ修正の奨励に協力してください。スポンサー付きの機能リクエストのリストはこちらをご覧ください。

ドキュメント

このプロジェクトのドキュメントは scanapp.org/html5-qrcode-docs に移動されました。

  • はじめる
  • サポートされているフレームワーク
  • サポートされている 1D および 2D コード形式
  • 詳細な API ドキュメント

サポートされているプラ​​ットフォーム

私たちは、より多くのプラットフォームのサポートを追加するために継続的に取り組んでいます。ライブラリが動作しないプラットフォームまたはブラウザを見つけた場合は、お気軽に問題を報告してください。デモリンクをチェックしてテストしてください。

伝説

  • 完全なサポートを意味します - インライン Web カメラとファイルベース
  • 部分的なサポートを意味します - ファイルベースのみ、Web カメラが進行中です

パソコン/マック


Firefox
クロム
サファリ
オペラ
角

アンドロイド


クロム
Firefox
角
オペラ
オペラミニ
カリフォルニア大学

IOS


サファリ
クロム
Firefox
角
* *

* IOS バージョン 15.1 以上でサポートされています

バージョン 15.1 より前では、Webkit for IOS は Chrome、Firefox、および IOS の他のブラウザーで使用されており、これらのブラウザーにはまだ Web カメラのアクセス許可がありません。 iOS のサポートの修正に関して進行中の問題があります - 問題/14

フレームワークのサポート

このライブラリは他のいくつかのフレームワークで簡単に使用できます。私はそのうちのいくつかのフレームワークに例を追加しており、今後もさらに追加していく予定です。

HTML5 VueJ電子Js反応する点灯

サポートされているコード形式

コード スキャンは Zxing-js ライブラリに依存します。私たちは、さらに多くの種類のコード スキャンのサポートを追加するために取り組んでいきます。特定のタイプのコードがあれば役立つと思われる場合は、機能リクエストを提出してください。

コード例
QRコード
アステカ
コード_39
コード_93
コード_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
データマトリックス
マキシコード*
RSS_14*
RSS_EXPANDED*

*形式は、ネイティブ BarcodeDetector API 統合との実験的な統合ではサポートされていません (詳細を読む)。

説明 - デモを見る

scanapp.org でエンドツーエンドのスキャナーのエクスペリエンスをご覧ください。

これは、QR コード、バーコード、およびその他のいくつかのタイプのコード スキャン機能を、HTML5 互換ブラウザで実行されているアプリケーションに統合するためのクロスプラットフォーム JavaScript ライブラリです。

サポート:

  • デバイス上のカメラのクエリ (ユーザー権限付き)
  • スキャン用の使いやすいユーザー インターフェイスを備えたライブ カメラ フィードのレンダリング
  • さまざまな種類の QR コード、バーコード、その他の形式のスキャンをサポート
  • コードをスキャンするためのデバイスからの画像ファイルの選択をサポート

使用方法

このライブラリの使用方法に関する詳細なガイドラインは、scanapp.org/html5-qrcode-docs でご覧ください。

デモ


この画像をスキャンするか、blog.minhazav.dev/research/html5-qrcode.html にアクセスしてください。

詳細については

このライブラリの使用方法については、次の記事を確認してください。

  • HTML と JavaScript を使用した QR およびバーコード スキャナー
  • HTML5 QR コード スキャン — jQuery 依存関係なしで v1.0.1 をリリースし、Promise ベースの API をリファクタリングしました。
  • JavaScript を使用した HTML5 QR コード スキャン — ローカル ファイルのスキャンとデフォルトのカメラの使用のサポートが追加されました (v1.0.5)

スクリーンショット


図: MacBook Pro で実行されている Google Chrome のスクリーンショット

ドキュメント

完全な API ドキュメントは、scanapp.org/html5-qrcode-docs/docs/apis でご覧ください。

start()メソッドでの追加のオプションconfiguration

スキャン動作とユーザー インターフェイス (UI) の両方を構成するために使用できる構成オブジェクト。ほとんどのフィールドには、別の値が指定されない限り使用されるデフォルトのプロパティがあります。何もオーバーライドしたくない場合は、空のオブジェクト{}を渡すだけです。

fps — 整数、例 = 10

別名 1 秒あたりのフレーム。このデフォルト値は 2 ですが、スキャンを高速化するために増やすことができます。値を大きくしすぎると、パフォーマンスに影響を及ぼす可能性があります。値が>1000と、単純に失敗します。

qrbox — QrDimensionsまたはQrDimensionFunction (オプション)、例 = { width: 250, height: 250 }

このプロパティを使用して、スキャンに使用するビューファインダーの領域を制限します。ビューファインダーの残りの部分は影になります。たとえば、 config { qrbox : { width: 250, height: 250 } }を渡すと、画面は次のようになります。

これを使用して、次のような構成で長方形のスキャン領域を設定できます。 

 let config = { qrbox : { width : 400 , height : 150 } }

この構成は次のタイプの関数も受け入れます

 /**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    ( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;

これにより、ビデオのサイズに基づいて動的な QR ボックスのサイズを設定できます。例として、このブログ記事を参照してください: Html5-qrcode で動的 QR ボックス サイズを設定する - ScanApp ブログ

これはバーコードのスキャンに適している可能性があります。

この値が設定されていない場合、シェーディングされた QR ボックスはレンダリングされず、スキャナはビデオ ストリームの領域全体をスキャンします。

aspectRatio — 浮動小数点、アスペクト比 16:9 の場合の例 1.777778

このプロパティを使用して、ビデオ フィードを特定のアスペクト比でレンダリングします。 100000:1などの非標準のアスペクト比を渡すと、ビデオ フィードが表示されなくなる可能性があります。理想的な値は次のとおりです。

価値アスペクト比使用事例
1.333334 4:3標準カメラのアスペクト比
1.777778 16:9フルスクリーン、映画のような
1.0 1:1スクエアビュー

値を渡さない場合、ビューファインダー全体がスキャンに使用されます。注: この値はQR code HTML elementの幅と高さより小さくなければなりません。

disableFlip — ブール値 (オプション)、デフォルト = false

デフォルトでは、スキャナーは水平方向に反転した QR コードをスキャンできます。これにより、ミラーリングされることがあるモバイル デバイスのフロント カメラを使用して QR コードをスキャンすることもできます。これはデフォルトではfalseであり、次の場合にのみこれを変更することをお勧めします。

  • カメラフィードをミラーリング（水平反転）できないことは確かです
  • これを有効にするとパフォーマンスの問題が発生します。

通常の QR コードとミラー化された QR コードの例を次に示します。

通常のQRコードミラーリングされた QR コード

rememberLastUsedCamera — ブール値 (オプション)、デフォルト = true

trueの場合、ユーザーが最後に使用したカメラと天候、または許可が与えられなかったことがローカル ストレージに記憶されます。ユーザーが以前にアクセス許可を付与している場合、UI のアクセス許可の要求オプションはスキップされ、最後に選択したカメラがスキャンのために自動的に起動されます。

trueの場合、ライブラリはカメラのアクセス許可が以前に付与されているかどうか、および最後に使用されたカメラを記憶します。すでに「カメラ」に権限が付与されている場合は、以前に使用したカメラに対して * QR コードのスキャンが自動的に開始されます。

supportedScanTypes - Array<Html5QrcodeScanType> | []

これはHtml5QrcodeScannerでのみサポートされます。

デフォルト = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

このフィールドは次の目的で使用できます。

  • サポートをCameraまたはFileベースのスキャンのいずれかに限定します。
  • デフォルトのスキャンタイプを変更します。

使用方法: 

 function onScanSuccess ( decodedText , decodedResult ) {
  // handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

let config = {
  fps : 10 ,
  qrbox : { width : 100 , height : 100 } ,
  rememberLastUsedCamera : true ,
  // Only support camera scan type.
  supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;

let html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

ファイルベースのスキャンの場合のみ、次を選択します。 

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

現在のように両方をサポートするには、このフィールドを無視するか、次のように設定できます。 

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

ファイルベースのスキャンをデフォルトとして設定するには、順序を変更します。 

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ]

showTorchButtonIfSupported - boolean | undefined

これはHtml5QrcodeScannerでのみサポートされます。

trueの場合、レンダリングされた UI には、デバイスとブラウザーのサポートに基づいてフラッシュをオンまたはオフにするボタンが表示されます。デフォルトでは、値はfalseです。

特定の形式のみをスキャンする

デフォルトでは、カメラ ストリームと画像ファイルの両方が、サポートされているすべてのコード形式に対してスキャンされます。 Html5QrcodeScannerとHtml5Qrcodeクラスは両方とも、サポートされている形式のサブセットのみをサポートするように構成できます。サポートされている形式は、列挙型 Html5QrcodeSupportedFormats で定義されています。 

 enum Html5QrcodeSupportedFormats {
  QR_CODE = 0 ,
  AZTEC ,
  CODABAR ,
  CODE_39 ,
  CODE_93 ,
  CODE_128 ,
  DATA_MATRIX ,
  MAXICODE ,
  ITF ,
  EAN_13 ,
  EAN_8 ,
  PDF_417 ,
  RSS_14 ,
  RSS_EXPANDED ,
  UPC_A ,
  UPC_E ,
  UPC_EAN_EXTENSION ,
}

特定の形式のサポートを明示的に省略する必要がある場合、またはパフォーマンス上の理由から 1 秒あたりに実行されるスキャンの数を減らしたい場合にのみ、これを使用することをお勧めします。

Html5QrcodeでQRコードのみをスキャンする

 const html5QrCode = new Html5Qrcode (
  "reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
    /* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;

// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ;

Html5QrcodeScannerで QR コードと UPC コードのみをスキャンする

 function onScanSuccess ( decodedText , decodedResult ) {
  // Handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

const formatsToSupport = [
  Html5QrcodeSupportedFormats . QR_CODE ,
  Html5QrcodeSupportedFormats . UPC_A ,
  Html5QrcodeSupportedFormats . UPC_E ,
  Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" ,
  {
    fps : 10 ,
    qrbox : { width : 250 , height : 250 } ,
    formatsToSupport : formatsToSupport
  } ,
  /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

実験的な機能

ライブラリでは、ライブラリ内でサポートされているが、実施されたテストが限られているか、使用されている基盤となる API の互換性が限られているため、運用環境での使用は推奨されないいくつかの実験的な機能がサポートされるようになりました。詳細については、こちらをご覧ください。実験的な機能には次のようなものがあります。

  • BarcodeDetector JavaScript API のサポート

改造と構築の方法

  1. コード変更は /src に対してのみ行う必要があります。

  2. npm install実行して、すべての依存関係をインストールします。

  3. npm run-script build実行して JavaScript 出力をビルドします。出力される JavaScript ディストリビューションは /dist/html5-qrcode.min.js にビルドされます。 Windows OS で開発している場合は、 npm run-script build-windowsを実行します。

  4. テスト

    • npm test実行する
    • プル リクエストを送信する前にテストを実行します。すべてのテストが実行される必要があります。
    • PR で送信された新しい動作のテストを追加してください。

  5. プルリクエストを送信する

    • コードの変更は./srcにのみ含めます。 ./dist手動で変更しないでください。
    • プルリクエストに次のようなコメントを追加します
     @all-contributors please add @mebjas for this new feature or tests
    • あなたの貢献を呼び出すために、ボットは貢献ファイルを更新します。
    • コードは作成者によってバッチでビルドおよび公開されます。

貢献方法

いくつかの方法でプロジェクトに貢献できます。

  • 観察されたバグやプロジェクトの互換性の問題については、発行チケットをファイルします。
  • 不足している機能については機能リクエストをファイルします。
  • 未解決のバグや機能リクエストを取得して作業し、プル リクエストを送信します。
  • 既存のコードベースの単体テストを作成します (これは今日のテストではカバーされていません)。これに関して助けが必要です- 続きを読む。

サポート ？

このプロジェクトは、素晴らしい貢献者とスポンサーの皆様なしでは不可能でした。このプロジェクトのメンテナンスと維持をサポートしたい場合は、GitHub スポンサーを通じて寄付できます。

自分に関連する機能リクエストやバグに優先順位を付けるために、プロジェクトを後援してください。 (依頼の範囲と寄稿者の帯域幅によって異なります)。

ウェブ著者@ベンジーブジヴァドゥ

このプロジェクトのスポンサーシップ目標をサポートすることで、機能開発やバグ修正の奨励に協力してください。スポンサー付きの機能リクエストのリストはこちらをご覧ください。

また、監視以外のスポンサーシップをしていただいた以下の団体にも多大な感謝を申し上げます。

クレジット

QRコードの読み取りに使用されるデコーダーはZxing-js https://github.com/zxing-js/library からのものです。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて