AI Coder Makes QR Code Reader

In my journey to develop a retail point-of-sale advertising display for my wife's business (stay tuned for a future blog post!), I've found great support in my workflow from a combination of powerful tools. Primarily, I've been utilizing OpenAI's GPT-4 along with GitHub's dynamic duo of AI-powered solutions: Copilot and Copilot Chat VSCode extensions.

These Generative AI tools have become indispensable to me, significantly enhancing my productivity and efficiency throughout the development process. As a husband and dad with limited time for tinkering, their support has been invaluable. I find myself in a state of flow more often, allowing me to make the most of the precious time I have available.

Regardless of whether I'm asking questions to help gauge the complexity of an idea, double-checking my memory of a concept, asking for the code to a quick functional POC, or working with my code in the editor, these AI tools have been great additions to my toolbox. Most times the AI responses are nearly as accurate as I need, and occasionally spot-on.

Case in point, I was struck with the interest to try developing a simple app that would:

1. Access the local webcam every few seconds.
2. Scan the image for a valid QR code
3. Print the code to the console.

Not having an idea as to where I'd start, except for having an interest in using JavaScript for the challenge, I asked Chat GPT to get me started:

Random inspiration meets GPT-4, results in a tiny Node.js app that uses a webcam to continually read qr codes from the field of view, and prints them to the console. Complete with concise NPM project setup and run instructions, with a troubleshooting section covering expected common issues with discovery and resolution notes.

GPT-4 responded with:

Sure, I can help outline how such a project can be structured. We'll use the qrcode-reader package to read QR codes, node-webcam to access the webcam, and Jimp to process images.

Here is a simple guide to setting up and running this project:

1. Setup:

First, ensure that Node.js and NPM are installed on your machine. If not, visit the Node.js website to download and install the latest version.

Next, create a new directory for your project, navigate into it, and initialize a new NPM project by running:

mkdir qr-reader && cd qr-reader
npm init -y

Then, install the necessary dependencies:

npm install node-webcam qrcode-reader jimp

2. Writing the Application:

Create a new index.js file and open it in your favorite code editor. Here's a simple application that can capture images from your webcam and decode any QR codes found in them:

const NodeWebcam = require("node-webcam");
const QrCode = require("qrcode-reader");
const Jimp = require("jimp");

// Webcam options
const opts = {
  width: 1280,
  height: 720,
  quality: 100,
  delay: 0,
  saveShots: true,
  output: "jpeg",
  device: false,
  callbackReturn: "location",
  verbose: false
};

// Create the webcam instance
const Webcam = NodeWebcam.create(opts);

function captureAndDecode() {
  Webcam.capture('test_picture', function(err, data) {
    if(err) {
      console.log(err);
      return;
    }

    Jimp.read('test_picture.jpg', function(err, image) {
      if(err) {
        console.log(err);
        return;
      }

      let qr = new QrCode();
      qr.callback = function(err, value) {
        if(err) {
          console.log(err);
          return;
        }
        
        console.log(value.result);
        console.log('------------------------');
      };

      qr.decode(image.bitmap);
    });
  });
}

// Continually capture and decode
setInterval(captureAndDecode, 5000);

This application will take a picture every 5 seconds and attempt to decode any QR codes found in it.

3. Run the Application:

To start the application, use the node command:

node index.js

If everything is set up correctly, you should start seeing QR code data printed to your console.

4. Troubleshooting:

• If the QR codes are not being read properly, try adjusting the webcam resolution in the opts object.
• If there's an issue with the webcam not being found, ensure it's properly connected and try specifying the device in the opts object.
• If you're receiving file system errors, ensure your application has permission to read/write in its current directory.
• If you're getting a MODULE_NOT_FOUND error, ensure all required dependencies are properly installed. If necessary, delete the node_modules directory and the package-lock.json file and reinstall your dependencies with npm install.

Remember to always check the error logs for clues on what could be going wrong. And when in doubt, the Node.js and module documentation, along with search engines and relevant developer communities, can be invaluable resources for troubleshooting.

To my delight, the app ran without a hiccup, and did exactly what I asked.

Effectively starting and finishing the implementation before I'd even had a chance to search "webcam" on npmjs.com, I spent my time amused instead of challenged.

I'm not sure if I'll use this code for anything, but it was a fun anyway.

Source code for this project is available on GitHub