mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
37 lines
3.7 KiB
Markdown
37 lines
3.7 KiB
Markdown
---
|
||
title: Scanning for QR Codes in a camera feed
|
||
hide_title: true
|
||
---
|
||
# Scanning for QR Codes in a camera feed
|
||
|
||
This example enables you to scan a camera feed for Quick Response (QR) Codes and fetch the resulting data in the QR Code. To scan for QR Codes via uploaded images, see the documentation on the [Image QR Scanner](/library/modules/qr-scanner/guides/image-upload).
|
||
|
||
The Camera QR Scanner Node works in conjunction with the **Video Node**, which displays the camera feed that will be scanned for QR Codes. In the image below you can see how such a node tree might look.
|
||
|
||
## A simple example setup
|
||
|
||
In the example below, we use a [Video](/nodes/basic-elements/video) node to display the camera feed of the Camera QR Scanner. We start this feed with the <span className="ndl-signal">Did Mount</span> signal on the top parent **Group**. If a QR Code has been successfully recognized in the camera feed the <span className="ndl-data">Scan Result</span> is returned to a [String](/nodes/data/string) node that then goes to a [Text Node](/nodes/basic-elements/text) where the data contained in the QR Code will be displayed.
|
||
|
||
import ImportButton from '/src/components/importbutton'
|
||
import useBaseUrl from '@docusaurus/useBaseUrl'
|
||
|
||
<div className="ndl-image-with-background l">
|
||
<img src={useBaseUrl("/library/modules/qr-scanner/guides/camera-feed/qr-camera-feed.png")} className="ndl-image large"></img>
|
||
<ImportButton zip="/library/modules/qr-scanner/guides/camera-feed/qr-camera-feed.zip" name="Camera QR Scanner" thumb="/library/modules/qr-scanner/qr_noodlnet.png"/>
|
||
</div>
|
||
|
||
It is also possible to connect the <span className="ndl-data">Scan Result</span> directly to a **Text** node, but by doing it the way above we ensure that the data in the **Text** node does not disappear after the QR Code is out of view again.
|
||
|
||
## Flipping the camera
|
||
|
||
Also displayed in the example above is the possibility to flip the camera via the <span className="ndl-data">Front Facing</span> boolean of the **Camera QR Scanner** node. On mobile devices that have both front- and back-facing cameras these are the cameras you can switch between — in this example this is achieved via a [Switch](/nodes/logic/switch) node that is toggled with a [Button Node](/nodes/ui-controls/button). If you are working on a desktop device via e.g. a webcam, this function might only flip the camera feed itself since there are rarely both front- and back-facing cameras on such devices.
|
||
|
||
## Displaying the camera feed
|
||
|
||
Since we are using a **Video** node to display the camera feed, you might want to make adjustments to how the feed is being displayed. Typically you would want to use the display option _Cover_ in the **Video** node’s properties. You can read more about the **Video** node and its different kinds of properties [here](/nodes/basic-elements/video). Likewise it might be a good idea to set a maximum width and height for the video feed itself, either directly in the node itself or via a parent **Group**.
|
||
|
||
## No camera stream in viewer? HTTP vs. HTTPS
|
||
|
||
For security reasons, the camera feed can generally only be accessed through a secure connection, i.e. an URL beginning with <code>https://</code>, and not <code>http://</code>. This means that on some platforms (depending on OS and browser) the camera feed of the **Camera QR Scanner** will not work inside of the Noodl viewer. Furthermore, connecting to http://localhost:8574/ might have the same issue. However, on some platforms localhost is exempted from the rule and the camera works without problems in the viewer.
|
||
If you run into this problem you will have to deploy to a secure server via <code>https://</code>. The easiest way to do that is to use the [Noodl Sandbox Deploy](/docs/guides/deploy/deploying-an-app-on-sandbox) which uses <code>https://</code> protocols.
|