1

I am creating a node.js QR code reader. From experience, I have found that the most reliable and efficient reader is the built-in Chrome barcode detector API. Thus, I decided to build this application with a Puppeteer instance running Chrome. I successfully made the app pass in an image with a QR code to a Puppeteer browser instance, scan the QR code, and then return the result. It works as intended on my Mac. I packaged this functionality in an express app to make a scanning API. Currently, I am trying to deploy it on the web using a service that requires a docker container. However, I am struggling to make a Docker file that can runs the application.

I have tried installing Chrome in these three ways: 1, 2, 3. All of them have failed. Upon further searching, I discovered that Chrome supports the Barcode Detection API only on OS devices. Therefore, I need a way to ensure the docker container runs an OS version of Chrome.

If it is helpful, here is the function I am running with Puppeteer that works locally:

const puppeteer = require('puppeteer');

function scanQR = async (src) => {
  try {
    const browser = await puppeteer.launch({
      args: ['--no-sandbox', '--disable-setuid-sandbox'],
    });
    const page = await browser.newPage();
    await page.setJavaScriptEnabled(true);
    await page.setCacheEnabled(true);
    await page.goto('https://nimiq.github.io/qr-scanner/demo/');
    const barcodeDetectorPromise = page.evaluate(
      async (src) =>
        new Promise(async (resolve, reject) => {
          const image = new Image();

          image.src = src;

          // eslint-disable-next-line no-undef
          const barcodeReader = new BarcodeDetector({ formats: ['qr_code'] });

          await new Promise((resolve, reject) => (image.onload = resolve));

          resolve(await barcodeReader.detect(image));
        }),
      src
    );

    const timeoutPromise = new Promise((resolve, reject) => {
      setTimeout(() => resolve([]), 2000);
    });

    const result = await Promise.race([barcodeDetectorPromise, timeoutPromise]);

    await browser.close();

    return result;
  } catch {
    return [];
  }
};

The src is a link to an image with a QR code such as a base64URL whose image data includes a QR.

Snakeryan
  • 11
  • 3
  • I can't success with your code. Can you share full code with scanQR() caller ,URL and screen capture of result? – Bench Vue Dec 22 '22 at 12:19
  • Here is the code with an example: https://textsaver.flap.tv/lists/5b3z. It is scanning the base64 URL version of this QR code: http://store-images.s-microsoft.com/image/apps.25118.13579019105970375.40f5ffe7-a482-4585-8cec-5daf0a2520cc.9e279169-0778-420b-ac32-9b7834f89c3c. – Snakeryan Dec 22 '22 at 18:39
  • thank you your full code. I tested it but it can't success to Scan QR code with your code. It makes me an error "timeout Error activating auto attach, please report to https://aka.ms/js-dbg-issue []", I try it that web site manually it work. Do you an idea? I will try URL image method but still no solution. I am interest it. – Bench Vue Dec 23 '22 at 19:30

0 Answers0