QR Scanner using HTML5 and WordPress


QR Codes have always been an important part of eManager. Every item within the program is able to be tracked using a QR Code. Today, someone handed me a paper copy of a record within the system and said to me: “This does not exist.”

My curiosity immediately engaged and I replied “Let me take a look, I’d love to help you find it.” After a few minutes of searching, I could not for the life of me find it. I searched every way I could think of.  Then, I saw the QR code at the bottom of the printed page. Lightbulb! I whipped out my phone, scanned the code and BAM! The URL popped up! What a great and easy way to find something.  The user thanked me for the help and I sat there thinking to myself that eManager does not have a QR Scanner built in to it?!

So, I went to Le Google and obviously typed in: “WP QR Scanner Plugin” to see if something already existed.  Found nothing.  I continued my research searching the words: “HTML5 QR Scanner,” discovering several libraries which handle QR scanning in the browser with minimal code and libraries!  I decided to use one created by Daniel Ward located here:

http://dwa012.github.io/html5-qrcode/

I download his code off of github and created a handy WordPress plugin which uses HTML5 techniques to read a QR Code.  The plugin is available on Github here:

https://github.com/eManagerNYC/QR-Code-Scanner

It uses a shortcode with the parameters width and height to be embedded in any WordPress page or post.  Feel free to use, fork, hack it for your own project.  Happy coding!

13 thoughts on “QR Scanner using HTML5 and WordPress

  1. hi, thanks for the informations, was actually looking for a qrcode reader or scanner to integrate as a punch in/out system in a erp plugin, do you happen to know is it possible or easy to implant thanks a lot

    Like

  2. Hi Matt,
    I added the plugin to a WordPress site and tried the shortcode but I’m not getting any functionality. Does this still work? Also, will this work on any platform (Windows, iOS, Android)? Thanks!
    Amy

    Liked by 2 people

  3. Hey man. Installed your plugin and thought this was the solution to my problem but i only get a blank screen when trying to run it? Doesn’t seem to “initiate” my devices camera? Can you help?

    Like

  4. I’ll update this code soon to add your comments and requests. Some advances have been made with the canvas camera readers. Unfortunately, the original code now requires node to be running on your server:
    https://github.com/dwa012/html5-qrcode

    I’m exploring other options to to run with HTML5 and JS. Looks like this library could be an option:
    https://github.com/jbialobr/JsQRScanner

    If you want to generate QR codes in PHP, there is this:
    https://github.com/Ifah/Generate-Scannable-QR-Codes-With-PHP

    Like

    1. Hi Iphoenix
      any idea when we can expect an update?

      installed your plugin and unfortunately it comes up blank

      Like

  5. would this work to list front camera? From stack exchange

    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
    console.log(“enumerateDevices() not supported.”);
    return;
    }

    // List cameras and microphones.

    navigator.mediaDevices.enumerateDevices()
    .then(function(devices) {
    devices.forEach(function(device) {
    console.log(device.kind + “: ” + device.label +
    ” id = ” + device.deviceId);
    });
    })
    .catch(function(err) {
    console.log(err.name + “: ” + error.message);
    });

    Like

  6. Hi – was wondering if there may be any development on this still – really struggling to find a QR scanner for WordPress! Am trying to allow customers to scan a product from my shop site and automatically add it to the cart…

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.