ZXingを使ってマイクロQRコードとrMQRコードをWeb上で読み込んでみる
2024.12.09こんにちは、製造ビジネステクノロジー部の夏目です。
製造業アドベントカレンダーの12/08 (日)を予定していたのですが、遅刻しました。
今回はZxingを使ってWebでマイクロQRコードなどを読み込ませようと思います。
発端
マイクロQRコードやrMQRコードを読み取るWebアプリを実装していた記事がありました。
これに対して老舗のQRコード読み取りライブラリのZXingを使って似たようなことできないか試してみました。
結論
大元のZXing-C++をwasmで実装したzxing-wasmならマイクロQRコードやrMQRコードを読み込めた。
(ZXingのJS, ブラウザー向け実装である @zxing/library, @zxing/browserでは動かなかった)
今回作成したコードはこちら。
実装の手間を減らすため、カメラから読み取るのではなく画像ファイルを渡す形式にした。
読み込んだ結果
コードの説明 (1) Fileを読み込む
import {readBarcodesFromImageFile } from "zxing-wasm/reader";
import "./App.css";
type QRInfo = {
format: string;
text: string;
xTopLeft: number;
yTopLeft: number;
xBottomRight: number;
yBottomRight: number;
};
async function readQRCode(file: File): Promise<QRInfo[]> {
const resp = await readBarcodesFromImageFile(file);
return resp.map((item) => {
return {
format: item.format,
text: item.text,
xTopLeft: item.position.topLeft.x,
yTopLeft: item.position.topLeft.y,
xBottomRight: item.position.bottomRight.x,
yBottomRight: item.position.bottomRight.y,
};
});
}
<input type="file" />で取得したFileオブジェクトをawait readBarcodesFromImageFile()に渡すと結果が得られる。
読み込んだ結果の画像は1ファイル1コードにしていたが、複数のコードが含まれる画像の場合は複数のコードの結果が返る。
コードの説明 (2) wasmファイルの設置場所を指定する
特に指定しない場合、コードを読み取る際にJSDELIVRからwasmファイルをダウンロードする。
import { getZXingModule } from "zxing-wasm/reader";
function setWasmUrl() {
const [isFetch, setIsFetch] = useState(true);
useEffect(() => {
if (!isFetch) {
return;
}
getZXingModule({
locateFile: () => {
return "./wasm/reader/zxing_reader.wasm";
},
}).then(() => setIsFetch(false));
}, [isFetch]);
}
getZXingModule()でlocalFileにファイルの場所を渡すことで、自身のWebアプリにwasmも配置することができる。
まとめ
以上ZXingを使ったWebアプリでマイクロQRコードを読み込んでみるでした。
製造ビジネステクノロジー部では引き続きアドベントカレンダーをしているのでお楽しみください。
