web-dev-qa-db-ja.com

カメラでウェブページからqrcodeを読み取ります。

ウェブページでQRコードを読むための解決策を探しています。

PHPといくつかのライブラリ（zxingまたは何か他のもの）QRCodeを使用して生成し、それを紙に印刷したとしましょう。

私が今やりたいのは、ウェブページを通してタブレット/スマートフォンでそれを読み返すことです。そのページを閲覧すると、カメラでQRCodeを狙うように求められ、スキャンされたコンテンツがデコードされたページに送り返されます。

Android/iOSアプリを使用せずにこれを処理するための何かがありますか？ QRCodeだけでなく、別のタイプの2Dバーコードでもかまいません。

TY

javascriptcameraqr-code
10
Sclerato

私はかつてLazarsoftのjsqrcodeで働いたことがあります

それはブラウザでうまく機能しました、そして私は彼がカメラ付きの電話でテストするためにデモを作ったことを知っています。

彼のリポジトリは次のとおりです： https://github.com/LazarSoft/jsqrcode

カメラサポートの場合：CamCanvas APIを使用します： http://www.taboca.com/p/camcanvas/

7
edi9999

instascan を使用してQRコードを読み取ることができます。

リリースページからinstascan.min.jsをコピーし、次のコマンドをロードします。

<script type="text/javascript" src="instascan.min.js"></script>

QRコードを読み取るためのサンプルコード。

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Reader using Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  </body>
</html>
3
Codemaker

私にとって、LazarSoftを使用したすべてのテストは、すべてのデバイスで失敗しました（正しくフォーカスできませんでした）。そのため、ここで別の解決策を提案します。アプリが必要ですが、既存のアプリなので、デバイスごとに特定のアプリを作成する必要はありません。

ZXingのバーコードスキャナーアプリを使用してください！はい、ネット上のほとんどすべてのソースがあなたに言っていることとは反対に、サーバーへのラウンドトリップなしで可能です。このアプリは、他のスキャナーが故障したさまざまな条件下（Volume +でライトをオンにする）で非常に信頼できることが証明されました。 https://play.google.com/store/apps/details?id=com.google.zxing.client.Android&hl=en

制限：

  1. バーコードスキャナーアプリとそのコールバックメカニズムは現在、Androidとios（その他が計画されています）でのみ機能します。

  2. 明らかに、このソリューションは、カメラとアプリがインストールされているデバイスでのみ機能します。

解決策：

  1. トリガーメカニズム：次のURIが開かれると、バーコードスキャナーが開かれます：http://zxing.appspot.com/scan?...

  2. コールバック：ret=...を使用すると、コールバックURIを指定できます。これはスキャンを処理するコードのあるサイトです。スキャナーをトリガーしたのと同じサイトを使用できますが、少し複雑になり、ここでは説明しません（サーバーへのラウンドトリップは必要ありません）。 {CODE}で、スキャンしたデータを挿入する場所を指定します。コールバックURIはエスケープする必要があることに注意してください。

    例えば：

    http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fscan.htm%23%7BCODE%7D（エスケープなし：...ret=http://foo.com/scan.htm#{CODE}）

    重要：コードを取得するにはアンカー#を使用する必要があります。そうしないと、ソリューションが機能しません（キャッシュのため、を参照してください）。未満）。

  3. キャッシュマニフェスト：キャッシュマニフェストを作成し、キャッシュされたエントリにscan.htmを追加し、スキャナーを開くサイト（<html cache="foo.appcache">）にマニフェストを追加します。ファイルの内容：

    CACHE MANIFEST

CACHE:
scan.htm

NETWORK:
*

  4. スキャンを処理します：scan.htmの例を次に示します。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script>
      var code = window.location.hash.substr(1);
      ...
    </script>
  </body>
</html>

説明

サイトはキャッシュされているため、サーバーへのラウンドトリップは必要ありません。 #を使用すると、常に同じサイトにいるため、これは機能します。?code=...のようなコードを渡す場合は、可能なすべてのコードをキャッシュする必要があります。

1
maraca

Instascan（ https://github.com/schmich/instascan ）が最近公開され、Lazarsoftと@maracaによるコールバックソリューションの多くの欠点を解決しました。カメラにHTML5を使用し、オフラインで展開できます。

0
Oren Pinsky