# QR code scanner (and decoder) in the browser

**URL:** <https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988>\
**Category:** Dashboard\
**Created:** [16 November 2020 07:27 UTC](https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988 "2020-11-16T07:27:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [16 November 2020 07:27 UTC](https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988/1 "2020-11-16T07:27:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [16 November 2020 20:46 UTC](https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988/2 "2020-11-16T20:46:35Z")

</div>

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](https://flows.nodered.org/node/node-red-contrib-browser-utils) node and let the camera save the picture.  
Then feed the picture in the [node-red-contrib-qrdecode (node) - Node-RED](https://flows.nodered.org/node/node-red-contrib-qrdecode) node and voila there's you code string.

just my 2 cents.

> [@janvda](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [16 November 2020 21:54 UTC](https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988/3 "2020-11-16T21:54:08Z")

</div>

There's a couple of js libraries out there like

> **[QCodeDecoder](http://cirocosta.github.io/qcode-decoder/)**
>
> Browser-ready QR Code decoder in Javascript

  
and  

> **[schmich/instascan](https://github.com/schmich/instascan)**
>
> HTML5 QR code scanner using your webcam. Contribute to schmich/instascan development by creating an account on GitHub.

  
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.

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [17 November 2020 07:03 UTC](https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988/4 "2020-11-17T07:03:02Z")

</div>

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

> [@dceejay](#):
>
> Both do look quite old though...

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

> **[GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end...](https://github.com/mebjas/html5-qrcode)**
>
> A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org - GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at:...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 December 2020 07:03 UTC](https://discourse.nodered.org/t/qr-code-scanner-and-decoder-in-the-browser/35988/5 "2020-12-17T07:03:18Z")

</div>

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