Nrthugu

I have Webcam class, that uses for capturing data from webcam. This class streames data to video tag and also draw it on canvas., Also I have QRScanner class, that uses for parsing QR code from imageData of canvas.

class Webcam {

    constructor(videoTag, canvasTag) {

        // using for real-time video capture

        this.videoTag = videoTag;

        // qr scanner parses imageData from this element

        this.canvasTag = canvasTag;

        // waiting for qr code here

        this.captureArea = {

            x: 100,

            y: 60,

            width: 120,

            height: 120

        }



        // getting access to webcam

        navigator.mediaDevices

            .getUserMedia({

                video: true

            })

            .then(stream => this.videoTag.srcObject = stream)

            .catch(console.log);

    }



    capture() {

        setInterval(() => {

            let ctx = this.canvasTag.getContext('2d');

            ctx.drawImage(this.videoTag, 0, 0, 320, 240);

            // drawing capture area

            ctx.strokeStyle = 'red';

            // this arguments also should be passed into qr scanner

            ctx.strokeRect(

                this.captureArea.x,

                this.captureArea.y,

                this.captureArea.width,

                this.captureArea.height

            );

        }, 100);

    }

}



class QRScanner {

    constructor(canvas, router, captureArea) {

        this.canvas = canvas;

        this.router = router;

        this.captureArea = captureArea;

        this.qrCode = null;

    }



    scan() {

        setInterval(() => {

            let imageData = this.canvas

                .getContext('2d')

                .getImageData(

                    this.captureArea.x,

                    this.captureArea.y,

                    this.captureArea.width,

                    this.captureArea.height

                ).data;



            // parsing qr code from canvas

            this.qrCode = jsQR(imageData, this.captureArea.width, this.captureArea.height);



            if (this.qrCode) {

                router.redirect(Router.pages.result, this.qrCode);

                let resultPage = document.querySelector('#result .qr-code-data');

                resultPage.innerHTML = this.qrCode.data;

            }

        }, 100);

    }

}



<div id="scan">

    <video id="video" width="320" height="240" autoplay title="Real-time video stream from webcam"></video>

    <canvas id="preview" width="320" height="240" title="Capture area for QR code"></canvas>

</div>

This works as expected, but when I removes canvas element from page and trying to use temporary canvas (using document.createElement('canvas') without appending to the page) - this solution do not work. Does it possible to using temporary canvas for getting video imageData without appending this canvas to the page?

P.S. I'm using https://github.com/cozmo/jsQR

Canvas elements have a default width height when they aren't explicitly set. Since you never set those for you created canvas it is going to default to 300 x 150, at least for Chrome might be different for other browsers implementations.

var canvas = document.createElement("canvas");

console.log(canvas.width,canvas.height)

And since this default size is different than the size that you are trying to draw the image/video to there is going to be some cropping going on and therefore effecting your QR library from properly reading the image.

Just set the width and height to what you need

var canvas = document.createElement('canvas')

canvas.width = 320;

canvas.height = 240;