自宅の物の在庫管理アプリを作りたいなーと思っていた時、簡単にスマホのカメラ等を使ってバーコードリーダーを作れるとのことなので試して見ました。
HTML
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<p id="detected-code">-</p>
<div id="camera-view"></div>
</body>
</html>
JavaScript
const elemCameraView = document.getElementById('camera-view');
const elemDetectedCode = document.getElementById('detected-code');
const config = {
locate: false,
frequency: 2,
inputStream: {
type: 'LiveStream',
target: elemCameraView,
constraints: {
frameRate: 10,
facingMode: 'environment',
},
},
decoder: {
readers: ['ean_reader'],
multiple: false,
},
};
const OnDetected = async (result) => {
let code = result.codeResult.code;
elemDetectedCode.textContent = code;
if (confirm(code + 'コードを登録しますか？')) {
// 検出したコードに対する処理
}
};
Quagga.init(config, (error) => {
if (error) { console.error(error); return; }
Quagga.start();
});
Quagga.onDetected(OnDetected);
所感
GAS(Google Apps Script)用のコードなので通常のWebアプリとは違和感があります。JavaScriptの部分はBlazorとかにもそのまま使えそうなので未来の自分のために残しておきます。