1770 views
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=4,user-scalable=yes">
<!-- quaggaJSの読み込み -->
<script type="text/javascript" src="https://serratus.github.io/quaggaJS/examples/js/quagga.min.js"></script>


</head>
<body>
    <!--ここがプレビュー-->
    <div><canvas id="preview"></canvas></div>
    <!--これは読み取り画面-->
    <!--<video id="video"></video>-->
</body>

<script>
    class BarCodeSubscriber {
        constructor() {

        }

        onStart() {
            //開始一回だけ呼ばれる
        }

        onStop() {
            //停止時に呼ばれる
        }

        subscribe(ctx, barcode, pos) {
            console.log("サブスク");
        }
    }

    class MyBarCodeReader {
        #video; //コメントではなく、プライベート変数という意味
        #preview;
        #ctx;
        #isMulti;
        #readers;
        #timer;

        constructor(previewId, isMulti, subscriber) {
            this.timer = null;
            this.isMulti = isMulti;
            this.subscriber = subscriber;
            this.readers = ["code_128_reader","code_39_reader", "code_39_vin_reader", "code_93_reader"];
           // this.video = document.getElementById(videoId);
            this.video=document.createElement('video');
            this.video.setAttribute("autoplay","");
            this.video.setAttribute("muted","");
            this.video.setAttribute("playsinline","");
            this.video.onloadedmetadata = this.play.bind(this);
            //カメラ使用の許可ダイアログが表示される
            navigator.mediaDevices.getUserMedia(
                //マイクはオフ, カメラの設定   背面カメラを希望する 640×480を希望する
                {"audio":false,"video":{"facingMode":"environment","width":{"ideal":1280},"height":{"ideal":960}}}
            ).then(stream => {
                //許可された場合
                    this.video.srcObject = stream;
                    //0.5秒毎にスキャンする
                    this.timer = setTimeout(this.mainLoop.bind(this), 500, true);
                }
            ).catch( //許可されなかった場合
                err => {
                    console.log(err);
                    alert("カメラが許可されていません");
                    //ここでthrowする。
                }
            );

            //画面描画用のハンドルを取得する
            this.prev = document.getElementById(previewId);
            this.prev_ctx = this.prev.getContext("2d");

            this.tmp = document.createElement('canvas');
            this.tmp_ctx = this.tmp.getContext("2d");
        }

        setReader(readers) {
            this.readers = readers;
        }

        play(e) {
            this.video.play();
        }

        /**
         * falseを指定したら、シングルでバーコードを読む。
         * trueを指定したら、マルチでバーコードを読む。
         */ 
        setMulti(isMulti) {
            this.isMulti = isMulti;
        }


        start() {          
            this.timer = setTimeout(this.mainLoop.bind(this), 500, true);
        }


        stop() {
            subscriber.onStop();
            if(!this.timer) {
                clearTimeout(this.timer);
            }
        }

        drawBarCodeLine(left, top, width, height) {
            var c_y = top + height/2;
            var s_x = (left + width) * 0.2;
            var e_x = (left + width) * 0.8;
            var c = this.prev_ctx;

            c.drawImage(this.video,left,top,width,height);
            c.beginPath();
            c.strokeStyle="rgb(255,0,0)";
            c.lineWidth=2;
            c.moveTo(s_x, c_y);
            c.lineTo(e_x, c_y);
            //this.prev_ctx.rect(x1,y1,mw,mh);

            this.prev_ctx.stroke();     
        }

        drawMessage(type, text) {
            var c = this.prev_ctx;

        }

        mainLoop(first) {

            //選択された幅高さ
            var w=this.video.videoWidth;
            var h=this.video.videoHeight;
            //画面上の表示サイズ
            this.prev.style.width=(w/2)+"px";
            this.prev.style.height=(h/2)+"px";

            //内部のサイズ
            this.prev.setAttribute("width",w);
            this.prev.setAttribute("height",h);
            var mw=w*0.5;
            var mh=w*0.2;
            var x1=(w-mw)/2;
            var y1=(h-mh)/2;

            //赤枠矩形が書かれている
            this.prev_ctx.drawImage(this.video,0,0,w,h);
            /*
            this.prev_ctx.beginPath();
            this.prev_ctx.strokeStyle="rgb(255,0,0)";
            this.prev_ctx.lineWidth=2;
            this.prev_ctx.rect(x1,y1,mw,mh);
            this.prev_ctx.stroke();*/

            this.drawBarCodeLine(0, 0, w, h);

            //Quaggaが読み取る画像を作成する
            this.tmp.setAttribute("width",mw);
            this.tmp.setAttribute("height",mh);
            this.tmp_ctx.drawImage(this.prev,x1,y1,mw,mh,0,0,mw,mh);

            this.tmp.toBlob(function(blob){
                let reader = new FileReader();
                reader.onload=function(){
                    let config={
                    decoder: {
                        readers: this.readers,
                        multiple: this.isMulti, //同時に複数のバーコードを解析しない
                    },
                    locator:{patchSize:"large", halfSample:false},
                    locate:false,
                    src:reader.result,
                    };

                    Quagga.decodeSingle(config, result => {
                        if(result.codeResult) {
                            console.log("result", result.codeResult.code);
                        }
                    });
                }
                reader.readAsDataURL(blob);
            });

            this.timer = setTimeout(this.mainLoop.bind(this), 50, false);
        }
    }

    window.onload = function() {
        let barCodeSubscriber = new BarCodeSubscriber();
        let myBarCodeReader = new MyBarCodeReader("preview", false, barCodeSubscriber);
    }        

</script>

</html>
Page 1 of 16.
[添付ファイル]
1.plugin.zip