0

I'm working on a project in which I have to detect the qr code from live video stream and then capture it as an image. I'm scanning the qr code successfully but don't know how to detect it and capture that area as an Image?

Here's what I have tried:

<video id="preview"></video>

<script type="text/javascript">

    let scanner = new Instascan.Scanner({video: document.getElementById('preview')});
    scanner.addListener('scan', function (content) {
        alert(content);
    });
    Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
            scanner.start(cameras[0]);
        } else {
            console.error('No cameras found.');
        }
    }).catch(function (e) {
        console.error(e);
    });
</script>
Abdul Rehman
  • 5,326
  • 9
  • 77
  • 150
  • [bla](https://stackoverflow.com/users/14713334/bla) posted an [Answer](https://stackoverflow.com/a/65022310/12695027) asking you to "Please share the code using which you are able to detect the QR code. I may be able to help you out by editing it a little." – Scratte Nov 26 '20 at 12:47

2 Answers2

2

here is a demo that uses jsQR: https://cozmo.github.io/jsQR/ I don't know the Instascan.Scanner but I suggest that both work similar. So you could add a callback to you instascan listener which then reads out the dimensions of the captured qr code and capture this then (like in the example: here they use window.requestAnimationFrame() to draw a border around the captured QR Code).

jawa
  • 206
  • 2
  • 10
1

I can advise you on the process to do this:

  1. You are able to detect the QR code. So instead of cropping and flattening the photo, you scan it and save its value as a variable using an api like qrcode.js
  2. Then you make an empty canvas
  3. Declare a variable: var qrcode = new QRCode("qrcode");
  4. You use this code to convert the variable to another QR code: qrcode.makeCode(elText.value);
  5. Then run this command by putting it in a function: makeCode();
  6. This will display it as an image in the canvas.

    See this link for reference on how to scan the QR code: https://blog.minhazav.dev/qr-code-scanner-using-html-and-javascript/
    See this link for reference on how to display it in canvas: https://davidshimjs.github.io/qrcodejs/

    If you want a working code example then please share the code using which you are able to detect the QR code, I may be able to help you out by editing it a little and sharing the final code with you.
bla
  • 11
  • 1