QRコードリーダーを作成するTweet今回はHTML5の機能を利用した「QRコードリーダー」を作成します。以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。参考ページHTML5でQRコードリーダーサンプル以下のページから実際にサンプルを実行できます。Readerhttps://miku3.net/html5/qrreader/miku3.net初回のアクセス時にWebブラウザから、このサイトにカメラの操作を許可して良いか聞かれますので「許可」ボタンをクリックしてください。「ブロック」ボタンを押すと設定を変更するのにメニューの少し深いところに潜る必要がありますのでご注意を。今回はこちらのjsQRライブラリを使います。cozmo/jsQRGitHub適当なディレクトリを作成し、webpackから出力されたファイルがdistディレクトリの下にいるので直接取ってきます。'https://raw.githubusercontent.com/cozmo/jsQR/master/dist/jsQR.js'このままだと若干ファイルサイズが大きいのでminifyします。大体半分くらいになりましたね。jsQR.min.jsminifyについて詳しくは過去の記事を参照ください。JavaScript/CSSをコマンドラインでminifyするhttps://blog.katsubemakito.net/articles/minify-js-css-cliJavaScriptやCSSには人間が読みやすいよう、改行やスペースを設けたり、パット見て何に利用するかわかりやすい変数名をつけるわけですが、これは対人間用であってそれを実行する機械にとっては邪魔でしかありません。大雑把なロジックvideoタグにカメラをつなぎ、0.3秒置きに静止画をcanvasタグにコピーしたあとに画像データとして取り出します。この画像データをjsQRライブラリに渡しチェック。画像内にQRコードが存在している場合はその内容を表示するサンプルになります。QRコード周りの面倒な処理はすべてライブラリが面倒を見てくれますので、それ以外の部分を書いた感じですね。jsQRの使い方jsQRは非常にシンプルで、canvasの内容を画像として取り出したあとに、jsQR()に渡し戻り値をチェックするだけです。存在しなければfalseになります。code);}</script>戻り値はハッシュ(連想配列)として返ってきます。今回はcode.dataの内容を表示し、code.locationを元に画像に線を引いたというわけです。自宅警備がてらゲームのお仕事や講師などしてご飯を食べてます。PMこのサンプルはフロントカメラが起動するよう指定してますので、スマホで自撮り側のカメラが起動するのは正常な動作です。リアカメラが利用したい場合は以下の記事を参考になさってください。https://blog.katsubemakito.net/html5/camera-toggle読み込み中...返信ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。コメントデータの処理方法の詳細はこちらをご覧ください。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。reserved.%d人のブロガーが「いいね」をつけました。