ネィティブアプリではなく、スマホWEBページに純粋なJavaScriptでQRコードReader実装

キャッシュレス決済の普及に伴って、QRコードも流行っています。商品、SNS、URLなどいろんな場面で使われています。PCではあまり使わないですが、スマホにQRコードスキャンアプリがほとんど入れていますね。大体ネィティブアプリですが、スマホ用WEBページには実現可能でしょうか。写真をサーバーにアップロードして、Decode処理をサーバー上行うやり方もありますが、やはり写真の保存処理が面倒くさいですので、サーバー経由しなくても純粋なJavaScriptで実装できるのか調べてみました。結論はOKです。

サンプルの動作を確認しましょう。スマホで任意のブラウザでテストページ(https://www.microstone.info/qrtest)を開いて、「Open Camera」を押下して、写真を撮ったら、認識結果が下のテキストボックスに表示されます。

それでは、ソースを見てみましょう!下記「test.html」1ファイルしかないです。
簡単にソースを説明します。デモはBootStrap4を使っています、別に使わなくても簡単にできますが、単純に手間かからずレイアウトを作りたいです。

4-6行:メタ情報設定

8-10行:Bootstrap4 CSS/JS設定

11行:qr_packedというQRコード認識ライブラリCDN

13-29行:写真ファイルを読み込んでQRコード認識処理。
  実際はファイルアップロード(input[type=file])タグを使います。
  スマホで撮った写真を直接読み込んで、ライブラリに渡したらOKです。
  注意:認識できない場合、メッセージダイアログを表示します。

31-50行:ファイルアップロード(input[type=file])タグをボタンの形で表現するCSS

62-65行:ここは注目すべきところです。
  accept=”image/*” は画像のみアップロードできます。
  capture=”environment” を設定しますと、スマホのカメラを起動できます。
   値を「user」に設定する場合、フロントカメラを起動します。
   値を「environment」に設定する場合、リアカメラを起動します。

それ以外のコードは基本的に説明ですので、割愛します。

 1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
9    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
10    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
11    <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
12
13    <script>
14      function openCamera(node{
15        var reader = new FileReader();
16        reader.onload = function({
17          node.value = "";
18          qrcode.callback = function(res{
19            if(res instanceof Error) {
20              alert("No QR code found. Please try again.");
21            } else {
22              $("#result").val(res);
23            }
24          };
25          qrcode.decode(reader.result);
26        };
27        reader.readAsDataURL(node.files[0]);
28      }
29    
</script>
30
31    <style>
32      .btn-file {
33          position: relative;
34          overflow: hidden;
35      }
36      .btn-file input[type=file] {
37          position: absolute;
38          top0;
39          right0;
40          min-width100%;
41          min-height100%;
42          font-size100px;
43          text-align: right;
44          filteralpha(opacity=0);
45          opacity0;
46          outline: none;   
47          cursor: inherit;
48          display: block;
49      }
50    
</style>
51
52    <title>JavaScript QR Code Reader</title>
53  </head>
54  <body>
55    <div class="jumbotron">
56      <h1 class="display-3">QR Reader</h1>
57      <p class="lead">This is a QR reader for smartphone web page with pure JavaScript. Please refer to <a href="http://microstone.info/qrreader">MicroStone.info</a> in detail.</p>
58      <p class="lead"><small>これは純粋なJavaScriptで実現したスマホWEBページ用QRコードリーダーです。実現についての説明は<a href="http://microstone.info/qrreader">MicroStone.info</a>をご参考ください。</small></p>
59      <hr class="mt-2">
60      <div class="container text-center">
61        <p class="lead mt-3"></p>
62          <span class="btn btn-primary btn-file">
63              Open Camera 
64              <input type="file" accept="image/*" capture="environment" onchange="openCamera(this);" tabindex=-1>
65          </span>
66        </p>
67        <input type="text" id="result" class="form-control" placeholder="QR Code ">
68      </div>
69    </div>
70  </body>
71</html>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


次の記事

Docker入門