2024年最新！WebブラウザでQRコードを読み取る方法

QRコードは、スマートフォンアプリで読み取ることが一般的です。
しかし、Webブラウザ上でもQRコードを読み取ることができます。

本記事では、WebブラウザでQRコードを読み取る技術について解説します。
使用する技術は、以下。

ZXingライブラリ
HTML
CSS
JavaScript

ZXingライブラリについて

ZXingは、バーコードやQRコードの読み取りを行うためのオープンソースのマルチフォーマットライブラリです。
Java、C++、Python、Goなど、さまざまなプログラミング言語で利用できます。

このライブラリは、WebブラウザでQRコードを読み取るために、JavaScriptポートも提供しています。
ZXingライブラリは、以下の特徴を持っています。

多様なバーコード及びQRコードフォーマットに対応
マルチプラットフォーム対応（デスクトップ、モバイル、Webブラウザ）
高速で accurate な読み取り性能
オープンソースで、商用利用も可能

本記事では、ZXingライブラリのJavaScriptポートを使用して、WebブラウザでQRコードを読み取る方法を説明します。

HTMLファイルの作成

まず、HTMLファイルを作成し、必要なライブラリとスタイルシートを読み込みます。
ZXingライブラリは、@latestを指定することで、常に最新のバージョンを読み込むようにします。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>QRコードリーダー</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>QRコードスキャナー</h1>
    <video id="video"></video>
    <button id="startButton">スキャン開始</button>
    <p id="result">結果: 未検出</p>
 
    <script src="script.js"></script>
</body>
</html>

CSSファイルの作成

次に、CSSファイル（styles.css）を作成し、ページのスタイルを定義します。

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}
 
#video {
    width: 100%;
    height: auto;
    max-width: 400px;
}
 
#startButton {
    padding: 15px 30px;
    font-size: 20px;
    margin-top: 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
#startButton:hover {
    background-color: #0056b3;
}
 
#result {
    margin-top: 20px;
    font-size: 18px;
    color: #333;
    word-break: break-all;
    max-width: 100%;
}

JavaScriptファイルの作成

最後に、JavaScriptファイル（script.js）を作成し、QRコードの読み取り機能を実装します。

const codeReader = new ZXing.BrowserQRCodeReader();
const audio = new Audio('beep.mp3');
const videoElement = document.getElementById('video');
const resultElement = document.getElementById('result');
const startButtonElement = document.getElementById('startButton');
 
const getBackCamera = (devices) => {
    return devices.find((device) => device.label.toLowerCase().includes('back'));
};
 
const startScan = () => {
    codeReader.listVideoInputDevices()
        .then((videoInputDevices) => {
            if (videoInputDevices.length === 0) {
                alert('カメラが見つかりませんでした。');
                return;
            }
 
            const backCamera = getBackCamera(videoInputDevices);
            const selectedDeviceId = backCamera ? backCamera.deviceId : videoInputDevices[videoInputDevices.length - 1].deviceId;
 
            codeReader.decodeFromVideoDevice(selectedDeviceId, videoElement, (result, err) => {
                if (result) {
                    resultElement.textContent = '結果: ' + result.text;
                    audio.play();
                    codeReader.reset();
                }
                if (err &amp;&amp; !(err instanceof ZXing.NotFoundException)) {
                    console.error('エラー:', err);
                    resultElement.textContent = 'エラー: ' + err;
                }
            });
        })
        .catch((err) => {
            console.error('エラー:', err);
            alert('カメラへのアクセス中にエラーが発生しました。');
        });
};
 
startButtonElement.addEventListener('click', startScan);