Quagga.js
Quagga.jsをつかってバーコードの読み取りできるようにしてみた。
コード
とりあえず、急いでるならこのコードでいったん実装できそう。
でも、そのコードを格納したりどうするかの記述は書いてないからそれは別で用意してね。
<!-- BEGIN: /c:/Users/laaaa/camera1/camera.html -->
<!DOCTYPE html>
<html>
<head>
<title>Camera Page</title>
<link rel="stylesheet" href="css/test.css" />
</head>
<body>
<h1>Welcome to the Camera Page</h1>
<div id="photo-area" class="viewport">
<img v-if="code.length" src="" alt="result" class="resultImg" />
</div>
<button id="startButton">Start Scan</button>
<button id="stopButton">Stop Scan</button>
<div id="scanResult"></div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/@ericblade/quagga2@1.7.4/dist/quagga.min.js"></script>
<script src="js/test.js" type="text/javascript"></script>
<script>
// $(function () {
// startScanner();
// });
// const startScanner = () => {
window.onload =function(){
console.log("Start!!");
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#photo-area'),
constraints: {
decodeBarCodeRate: 3,
successTimeout: 500,
codeRepetition: true,
tryVertical: true,
frameRate: 15,
width: 640,
height: 480,
facingMode: "environment"
},
},
decoder: {
readers: [
"ean_reader"
]
},
}, function (err) {
if (err) {
console.log(err);
return;
}
console.log("Initialization finished. Ready to start");
Quagga.start();
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
console.log("onProcessed() method is called.");
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {
x: 0,
y: 1
}, drawingCtx, {
color: "green",
lineWidth: 2
});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {
x: 0,
y: 1
}, drawingCtx, {
color: "#00F",
lineWidth: 2
});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {
x: 'x',
y: 'y'
}, drawingCtx, {
color: 'red',
lineWidth: 3
});
}
}
});
//barcode read call back
Quagga.onDetected(function (result) {
console.log("onDetected() method is called.");
console.log("Detected barcode:", result.codeResult.code);
// スキャン結果を取得
var scannedCode = result.codeResult.code;
// スキャン結果をHTML要素に表示
// $("#id_jancd").text(scannedCode);
document.getElementById("id_jancd").value = scannedCode;
// スキャン結果をHTML要素に表示
$("#scanResult").text("Detected barcode: " + scannedCode);
// バーコードが検出されたらスキャンを停止する
Quagga.stop();
});
};
$("#stopButton").click(()=>{
console.log("Stop!!");
Quagga.stop();
});
</script>
</body>
</html>
<!-- END: /c:/Users/laaaa/camera1/camera.htm
この実装本当にわかりやすかった。
https://www.pahoo.org/e-soul/webtech/js01/js01-16-01.shtm
↑このページは、メソッドが何をしているかを書いているのでわけもわからずコード拾ってるなら見ておくべきかも…..(私）
携帯でチェックしたい
PC : windows
携帯：iPhone
localhostでチェックしても、PCでチェックできないんだが？？？
となって結構困って、アイフォンでもチェックできるようにした
このQiitaみたらわかると思う
ま、私はわからなくてほかにも調べたけど
nginx と ngrok をインストール
ngrokのインストール
アカウント作って
nginx
これも展開してね。
ngrok
welcomeされたら、WindowsのDownloadおして、この通りにやるのがいいかも。（Chocolateyは急いでたからやらなかった。）
そして、圧縮されてるから、展開してね。
nginxを起動して、
コマンドプロンプトで、ngrokがあるディレクトリに移動。
例えば、私の場合
ｃ- ユーザー - 自分の名前 - ngrok の場所にすべて展開したから
コマンドプロンプトで、自分の名前まで移動そして、下記のコマンド実行
ngrok http ｛ポート番号｝
例 8080使ってるなら、「ngrok http 8080」
調べたら、よくngrok http 8080 何だけど
私はポート番号が違ったのでここでは開けない。
いや、開けはするんだけど なんかエラーがでてて携帯でも開けなかった。
ここに、port:5500 と書いてるので、この8080を5500に変えてコマンド実行
コマンドプロンプトの画面がこうなるはず。
web Interface のほうをクリック
なんか、forwardingのほうがおもってんのと違うのは今回は調べてない。
でも、こっちのほうがよさそうな気がする。
調べてもこっちのエラーが出てこなかったから今回は割愛。
もしかして、htmlとcssしかないから？Docker使ったときはあった。
ま、今回はいいや
このページになるから、リンクをクリック
そしたら、同じ画面が出てくるはずなのでそれでできてるはず
仕事でつかって忘れそうだったから作りました。
Mcfeeみたいなのいれてたら、ngrokインストールできないんだけど、その時は、リアルタイムスキャン停止してね。そしたら、できる。
リアルタイムスキャンの時間外になったら、また、展開すればいい。
一回、鍵見たいの登録してるから、展開するだけでＯＫＯＫだから。
自分用のメモになってる。
ngrokの終わり方は、コマンドプロンプトで
コントロール ＋ Ｃ 押せば戻るで。
超初心者なので、こういうのを載せていこうかなと思う。
忙しいからどこまでできるかわからんけど….
急いで作ったから雑。ごめん。
作っただけえらいと思いたい。
この記事が気に入ったらサポートをしてみませんか？