@gshiruhiru

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

quaggaJSを使用してスキャンしたコードを呼び出したhtmlのテキストに渡したい

解決したいこと

プログラミング初心者です。
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

No Answers yet.

Your answer might help someone💌