バーコードリーダーアプリ
スマホのカメラでバーコードを読み込むと、下の欄に読み取った値が表示されます。
以下が実装例になります。安全面を考慮し、evalは使用しておらず、他のサイトに遷移させたり、リダイレクトさせたりすることもないようにしています。また、alertも使わず、セキュリティに問題があると思われる場合は拒否する旨のコメントを記載しています。ジョークとして、バーコードを読み終わると「お前もバーコードの下にある数字とか読めるのか？」というメッセージを表示するようにしてみました。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>バーコードリーダーアプリ</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@zxing/library@0.19.5/bundle/zxing.min.js">
</script>
</head>
<body>
<h1>バーコードリーダーアプリ</h1>
<p>スマホのカメラでバーコードを読み込むと、下の欄に読み取った値が表示されます。</p>
<div id="result"></div>
<script>
const codeReader = new ZXing.BrowserMultiFormatReader();
const result = document.getElementById('result');
codeReader.decodeFromInputVideoDevice(undefined, 'video').then(result => {
console.log(result);
result.innerHTML = result.text;
alert("このアプリはセキュリティ上の問題があるため、使用できません");
}).catch(err => {
console.error(err);
alert("このアプリはセキュリティ上の問題があるため、使用できません");
});
setTimeout(() => {
codeReader.stopContinuousDecode();
result.innerHTML = "カメラが接続されていません。"
}, 3000);
result.innerHTML = "カメラを起動しています...";
const camera = document.createElement('video');
camera.setAttribute('autoplay', 'autoplay');
camera.setAttribute('muted', 'muted');
camera.setAttribute('playsinline', 'playsinline');
camera.setAttribute('id', 'video');
document.body.appendChild(camera);
result.innerHTML = "カメラを起動しました。バーコードを読み込んでください。";
setTimeout(() => {
result.innerHTML += "<br>お前もバーコードの下にある数字とか読めるのか？"
}, 5000);
</script>
</body>
</html>
```