Javascriptでカメラ映像からQRコードをスキャン
Javascriptでカメラ映像からjsQRを使用してQRコード読む(QRコードをスキャンする)
カメラ映像からQRコードスキャンの実行中
jsQRをダウンロードする
https://github.com/cozmo/jsQRから右上の「Code」ボタンを押し、「Download ZIP」ボタンを押して、jsQR-master.zipをダウンロードし解凍します。。
ファイルを解凍した「dist」フォルダのみが必要なので、WEBサーバー上に配置等します。
ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=4,user-scalable=yes"> <!-- jsQR.jsの読み込み --> <script src="./dist/jsQR.js"></script> <script> var camera_image,tmp_canvas,tmp_canvas_ctx,qr,cw=240,ch=180; window.addEventListener("load",function(){ camera_image = document.getElementById('camera_image'); qr = document.getElementById("qr"); //カメラ使用の許可ダイアログが表示される navigator.mediaDevices.getUserMedia( //マイクはオフ, カメラの設定 背面カメラを使用する {"audio":false,"video":{"facingMode":"environment","width":{"ideal":cw},"height":{"ideal":ch}}} ).then( //許可された場合 function(stream){ tmp_canvas = document.createElement('canvas'); tmp_canvas.setAttribute("width",cw); tmp_canvas.setAttribute("height",ch); tmp_canvas_ctx = tmp_canvas.getContext("2d"); camera_image.srcObject = stream; setInterval(IntervalScan,1000); } ).catch( //許可されなかった場合 function(err){qr.innerHTML=qr.innerHTML+err+'\n';} ); }); function IntervalScan(){ tmp_canvas_ctx.drawImage(camera_image, 0,0,cw,ch); const imageData = tmp_canvas_ctx.getImageData(0,0,cw,ch); const scanResult = jsQR(imageData.data,cw,ch); if(scanResult){ //QRコードをスキャンした結果を出力 qr.innerHTML=qr.innerHTML+scanResult.data+'\n'; } } </script> </head> <body> <video id="camera_image" autoplay muted playsinline></video><br> <textarea id="qr" rows="8" cols="40"></textarea> </body> </html>