quaggaJSを使用してスキャンしたコードを呼び出したhtmlのテキストに渡したい
Q&A
Closed
解決したいこと
プログラミング初心者です。
index.htmlからbarcode.html(quaggaJSにあったサンプル?)を呼び出してスキャンできたら
index.htmに戻りテキストに出力したいのですが、どのようにすればいいのかわかりません。
解決方法を教えて頂けると助かりますのでよろしくお願いします。
該当するソースコード
該当するソースコード
index.html
<p>スキャンコード:<input type="text" size="10" name="bcode" value="">
<input type="button" value="読取り" class="itemButton" onclick="location.href='barcode.html'">
barcode.html
<script src="./quagga.min.js"></script>
<script>
var DetectedCount=0,DetectedCode="";
var video,tmp,tmp_ctx,jan,prev,prev_ctx,w,h,mw,mh,x1,y1;
window.addEventListener('load',function(event){
video=document.createElement('video');
video.setAttribute("autoplay","");
video.setAttribute("muted","");
video.setAttribute("playsinline","");
video.onloadedmetadata = function(e){video.play();};
prev=document.getElementById("preview");
prev_ctx=prev.getContext("2d");
tmp = document.createElement('canvas');
tmp_ctx = tmp.getContext("2d");
jan=document.getElementById("jan");
navigator.mediaDevices.getUserMedia(
{"audio":false,"video":{"facingMode":"environment","width":{"ideal":640},"height":{"ideal":480}}}
).then(
function(stream){
video.srcObject = stream;
setTimeout(Scan,500,true);
}
).catch(
function(err){jan.value+=err+'\n';}
);
function Scan(first){
if(first){
w=video.videoWidth;
h=video.videoHeight;
prev.style.width=(w/2)+"px";
prev.style.height=(h/2)+"px";
prev.setAttribute("width",w);
prev.setAttribute("height",h);
mw=w*0.5;
mh=w*0.2;
x1=(w-mw)/2;
y1=(h-mh)/2;
}
prev_ctx.drawImage(video,0,0,w,h);
prev_ctx.beginPath();
prev_ctx.strokeStyle="rgb(255,0,0)";
prev_ctx.lineWidth=2;
prev_ctx.rect(x1,y1,mw,mh);
prev_ctx.stroke();
tmp.setAttribute("width",mw);
tmp.setAttribute("height",mh);
tmp_ctx.drawImage(prev,x1,y1,mw,mh,0,0,mw,mh);
tmp.toBlob(function(blob){
let reader = new FileReader();
reader.onload=function(){
let config={
decoder: {
readers: ["ean_reader","ean_8_reader"],
multiple: false,
},
locator:{patchSize:"large",halfSample:false},
locate:false,
src:reader.result,
};
Quagga.decodeSingle(config,function(){});
}
reader.readAsDataURL(blob);
});
setTimeout(Scan,50,false);
}
Quagga.onDetected(function (result) {
if(DetectedCode==result.codeResult.code){
DetectedCount++;
}else{
DetectedCount=0;
DetectedCode=result.codeResult.code;
}
if(DetectedCount>=3){
console.log(result.codeResult.code);
jan.value+=result.codeResult.code+'\n';
jan.scrollTop=jan.scrollHeight;
DetectedCode='';
DetectedCount=0;
}
});
});
</script>
0 likes