Zenn
🔰

QuaggaJS+αであっさりバーコードリーダ&メーカ

2022/12/22に公開
JavaScript
初心者
初心者向け
#
webカメラ
#
バーコード
tech

QuaggaJS、BarcodeCoderとは!?

QuaggaJSとBarcodeCoderを利用する事で、簡単にバーコードを扱う事ができます。

QuaggaJS

Barcode Coder

これらのライブラリを利用し、バーコードリーダ&メーカを作ってみます。

ライブラリ 用途
QuaggaJS バーコードを検出します
jQuery、Barcode Coder バーコードを生成します

プロジェクトを用意する

次の様にプロジェクトを作ります。

MyProject01/
　├ index.html (プログラムを起動するファイルです)
　├ custom.css (CSSを記述するファイルです)
　├ main.js (メインのプログラムを記述するファイルです)

HTMLファイルを用意する

では、作っていきましょう。
用意したHTMLファイルには次のコードを記述します。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="./images/favicon.ico">
	<title>QuaggaJS</title>
	<!-- CSS -->
	<link rel="stylesheet" href="./custom.css">
</head>
<body>
	<div id="my_container">
		<div id="my_inner">
			<div>= QuaggaJS =</div>
			<div>
				<button id="my_start">Start</button>
				<button id="my_stop">Stop</button>
			</div>
			<div id="my_quagga"></div>
			<div id="my_result">***</div>
			<div id="my_barcode">
				<div>***</div>
			</div>
		</div>
	</div>
	<!-- JavaScript -->
	<script src="//code.jquery.com/jquery-3.6.1.min.js"></script>
	<script src="//unpkg.com/@ericblade/quagga2@1.7.4/dist/quagga.min.js"></script>
	<script src="//cdn.jsdelivr.net/gh/mtaketani113/jquery-barcode@master/jquery-barcode.js"></script>
	<script src="./main.js"></script>
</body>
</html>

HTMLでは、3つのライブラリを読み込んでいます。
(Barcode Coderは、jQueryのプラグインとして動作します)

CSSファイルを用意する

次はCSSファイルです。
こちらは特に説明することはありませんね。

custom.css
/* CSS */

html, body{
	width: 100%; height: 100%;
	margin: 0px; padding: 0px;
}

#my_container{
	width: 100%; height: 100%;
	display: flex; flex-flow: wrap;
	justify-content: space-around;
	align-items: center;
}

#my_inner{
	margin: 0px; padding: 10px 10px;
	border-radius: 20px;
	background-color: gray; color: white;
	font-size: 2rem; text-align: center;
}

#my_quagga{
	width: 320px; height: 240px; 
	margin: 5px; padding: 0px;
	position: relative;
	background-color: silver;
}

#my_quagga video{
	width: 100%; height: 100%; 
	position: absolute;
	top: 0px; left: 0px;
}

#my_quagga canvas{
	width: 100%; height: 100%; 
	position: absolute;
	top: 0px; left: 0px;
}

#my_result{
	width: 100%; height: 100%; 
	font-size: 1rem; text-align: center;
}

#my_barcode{
	width: 100%; height: 100%;
	display: flex; flex-flow: wrap;
	justify-content: space-around;
	align-items: center;
}

JavaScriptファイルを用意する

いよいよメインの処理です。
JavaScriptファイルには次のコードを記述します。(今回の完成コードです)

main.js
console.log("main.js!!");

$(document).ready(()=>{
	console.log("Ready!!");
});

$("#my_start").click(()=>{
	console.log("Start!!");

	// Quagga
	Quagga.init({
		inputStream: {
			name : "Live",
			type : "LiveStream",
			target: document.getElementById("my_quagga")
		},
		decoder: {
			readers: ["ean_reader"]
		}
	}, err=>{
		if(err){
			console.log(err);
			return;
		}
		console.log("Initialization finished!!");
		Quagga.start();
	});

	Quagga.onProcessed(result=>{
		if(result == null) return;
		if(typeof(result) != "object") return;
		if(result.boxes == undefined) return;
		const ctx = Quagga.canvas.ctx.overlay;
		const canvas = Quagga.canvas.dom.overlay;
		ctx.clearRect(0, 0, parseInt(canvas.width), parseInt(canvas.height));
		Quagga.ImageDebug.drawPath(result.box, 
			{x: 0, y: 1}, ctx, {color: "blue", lineWidth: 5});
	});

	Quagga.onDetected(result=>{
		console.log(result.codeResult.code);
		$("#my_result").text(result.codeResult.code);
		$("#my_barcode div").barcode(result.codeResult.code, "ean13");
	});
});

$("#my_stop").click(()=>{
	console.log("Stop!!");
	Quagga.stop();
});

コードの解説

上記のコードについて、次の順番で解説を進めます。

  1. QuaggaJSの初期化
  2. バーコード検出処理
  3. 検出結果の取得とバーコード表示

1,QuaggaJSの初期化

"QuaggaJS.init()"でライブラリを初期化します。
第一引数にはコンフィグとして、主に次の設定を指定します。

ライブラリ 用途
target キャプチャ映像を表示するID
decoder バーコードの種類

次に第二引数のコールバックが実行されます。
エラーメッセージが無い場合、"Quagga.start()"を実行します。

main.js(抜粋)
// Quagga
Quagga.init({
	inputStream: {
		name : "Live",
		type : "LiveStream",
		target: document.getElementById("my_quagga")// キャプチャ画像
	},
	decoder: {
		readers: ["ean_reader"]// バーコードの種類
	}
}, err=>{
	if(err){
		console.log(err);
		return;
	}
	console.log("Initialization finished!!");
	Quagga.start();// バーコード検知を開始する
});

2,バーコード検出処理

"QuaggaJS.onProcessed()"では、バーコードの検出結果を取得します。
"result"には解析結果が格納されますが、未検出の場合は"null"です。
"result.box"にはバーコードの矩形情報が格納されるので、
この情報を利用し、"Quagga.ImageDebug.drawPath()"で描画するだけです。

main.js(抜粋)
Quagga.onProcessed(result=>{
	if(result == null) return;// 未検出の場合
	if(typeof(result) != "object") return;
	if(result.boxes == undefined) return;
	const ctx = Quagga.canvas.ctx.overlay;
	const canvas = Quagga.canvas.dom.overlay;
	ctx.clearRect(0, 0, parseInt(canvas.width), parseInt(canvas.height));
	Quagga.ImageDebug.drawPath(result.box, 
		{x: 0, y: 1}, ctx, {color: "blue", lineWidth: 5});// 結果を描画
});

3,検出結果の取得とバーコード表示

"Quagga.onDetected()"では具体的な検出結果を取得する事ができます。
検出結果は、"result.codeResult.code"に格納されています。
最後にこの結果を元に、"barcode()"を実行して表示します。(表示はあっさりですね)

main.js(抜粋)
Quagga.onDetected(result=>{
	console.log(result.codeResult.code);
	$("#my_result").text(result.codeResult.code);
	$("#my_barcode div").barcode(result.codeResult.code, "ean13");// バーコードを表示
});

いとも簡単にバーコードメーカ&リーダが完成しました。(やりました!!)

最後に

以前、QRコードリーダ&メーカを調べていたので、「バーコードもあるのでは?」と思い立って調べてみました。(あっさり見つかりましたw)
QRコードよりもバーコードの方がより身近にあるので、応用次第でちょっとしたゲームも作れるかもしれませんね!!
ここまで読んでいただき有難うございました。

Discussion