QR code scanner (and decoder) in the browser

Dashboard
1

I would like to create a QR code scanner in the browser.

A more precise description of my use case:

  1. On my smartphone I am opening my node-red dashboard in a (chrome) browser.
  2. On that dashboard I have a button "QR-code scan".
  3. When I click on that button it should activate the camera of my smartphone
  4. The browser should then continuously scan and decode the camera video for QR codes.
  5. When the browser decodes a QR code it sends the decoded QR code (= string) to my node-red host machine so it can be handled as input for a node in my node-red flows.

It is important that the scanning and decoding happens in the browser on my smartphone as I don't want to send the camera videostream (or images) from my smartphone to the node-red host machine.

Most likely it will be used in a chrome browser, but a solution that supports most browsers is of course preferred.

Any advice would be appreciated.

2

Never done something like that myself, but this is the first that comes to my mind (and search button)

Have a look at the node-red-contrib-browser-utils (node) - Node-RED node and let the camera save the picture.
Then feed the picture in the node-red-contrib-qrdecode (node) - Node-RED node and voila there's you code string.

just my 2 cents.

I don't see why, the node red dashboard is generated by the same node-red host machine.

3

There's a couple of js libraries out there like


and

that may help. Both do look quite old though...
You may be able to get them going in a template - but if serving the page from remote you will no doubt have to use https with certificates in order to enable the camera.
1 Like
4

Thanks, I was also thinking about using the template node.

indeed the 2 repositories are quite old.
I found one that is more recently updated. I think I will give that a shot:

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.