ネィティブアプリではなく、スマホ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 top: 0;
39 right: 0;
40 min-width: 100%;
41 min-height: 100%;
42 font-size: 100px;
43 text-align: right;
44 filter: alpha(opacity=0);
45 opacity: 0;
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>
