---
title: "Scan barcodes and QR codes with a device camera"
slug: "scan-barcodes-and-qr-codes-with-a-device-camera"
tags: ["App Editor (Route)", "Triggers"]
updated: 2022-09-20T19:09:00Z
published: 2022-09-20T19:09:00Z
canonical: "support.tulip.co/scan-barcodes-and-qr-codes-with-a-device-camera"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Scan barcodes and QR codes with a device camera

*Here's how to use Trigger logic to store a barcode value that has been scanned on a camera*

## Overview

You can use Tulip's "Barcode Scanner" camera under the Camera Widget to allow an operator to scan a barcode with the webcam on their phone, tablet or desktop computer.

Here's where to find it:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Scan%20Barcodes%20and%20QR%20Codes%20via%20Your%20Device%27s%20Camera_395272000.png)

In order to successfully use this widget, you need to have three things on the step:

1. The widget itself. It should be large enough that the operator can see what they are scanning
2. A Trigger that fires "When" "Barcode Scanner (Optical)" is used.
3. A Variable embedded on the step so that the operator can see when they successfully scan the barcode

Here's how to set up a Step that accomplishes this.

## Adding the Barcode Scanner Camera Widget

Click the Camera widget and choose "Barcode Scanner". Resize the widget to whatever size you prefer- this is the window where the operator will be able to see what they are scanning.

You can only have one Barcode Scanner widget per Step.

After selecting the widget, you will see the following options in the Side Pane:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Scan%20Barcodes%20and%20QR%20Codes%20via%20Your%20Device%27s%20Camera_205467241.png)

Here are the supported barcode formats:

- EAN-8
- EAN-13
- Code 39
- Code 128
- ITF
- RSS-14
- QR Code
- Data Matrix
- PDF 417

By default, all of these are turned "on". You can turn "off" individual barcode formats, which will also make it possible for the widget to scan barcodes more quickly.

## Storing The Output

Now, you need to create a Trigger that fires when a barcode is successfully scanned.

Create a Trigger on the Step Tab of the Side Pane, and add the following "when" statement:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Scan%20Barcodes%20and%20QR%20Codes%20via%20Your%20Device%27s%20Camera_205492982.png)

- WHEN "device" "Barcode Scanner (Optical)" outputs at: "this station" with events "Barcode appeared"

Then, add a "Data Manipulation" "store" statement to store the barcode value in a Variable.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Scan%20Barcodes%20and%20QR%20Codes%20via%20Your%20Device%27s%20Camera_205494499.png)

- "Data Manipulation" "Store" data: "Device Output" "barcode appeared: text" location: "Variable" (variable here)

Finally, if you want to instantly send the operator to another step when the barcode is stored, add a "Go To Step" Transition.

## Setting Up The Step

Here's a possible layout for an app that is meant to run on desktop:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Scan%20Barcodes%20and%20QR%20Codes%20via%20Your%20Device%27s%20Camera_205497012.png)

The camera Widget takes up the top half of the screen.

On the bottom half, there are navigation buttons as well as a text label and embedded variable text, so the operator can see the value of the barcode that was just scanned.

[Learn more about variable text here](https://support.tulip.co/docs/data-types-in-tulip)

Within the Player, users can also "Flip" and "Rotate" the live view from the camera.

## Troubleshooting The Camera Barcode Scanner

The conditions at your workstation will impact the amount of time that the app will take to successfully scan a barcode.

Here are some common limitations that will prevent you from successfully scanning barcodes.

### **Camera Resolution**

Does your tablet or phone use a modern, high-resolution camera? Many older devices and laptops have low-resolution cameras.

### Lighting

Are you scanning in a well-illuminated area? The camera needs sufficient light to view the contrasts in the barcode.

### Testing Procedure

Are you testing with the same camera that will be used in production? If not, you may get misleading results.

**Multiple Examples of Text In View**

The scanner works best if there is a single barcode in view. If there are other text sections or other barcodes in view, you should try blocking those with your finger.

### Flat Paper

If the barcode is printed on wrinkled paper, the scanner will have a hard time reading it.

## Further Reading

- [How To Dynamically Switch Between Apps](https://support.tulip.co/docs/how-to-navigate-between-multiple-apps-by-creating-a-routing-app)

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&utm_medium=article-link&utm_campaign=all) to post your question or see if others have faced a similar question!

**Trigger**

**Triggers** are groups of logic that are tied to an app event, such as step open, timer, widget interaction, etc. App builders can add triggers to **widgets**, **machines**, **devices**, **apps**, and **steps**.

**Triggers** can contain **actions**, **transitions**, and **conditions**.

**Widget**

**Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic.

*Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.*

**Variable**

**Variables**are a location to store app information. Variables have a specific type that must match the contents they can store.

Variables are only accessible within a single application and are cleared when the app is restarted or completed.

**Step**

A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

**Side Pane** **(Context Pane)**

The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)

**Step Tab**

In the **Side Pane**, the**Step Tab**is where you can adjust all of the **Step-level**settings, including **Step Triggers,**Step background, Step resolution, and more.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Step%20Tab.png)

**Transitions**

**Transitions** are a type of logic in **triggers**. **Transitions** can move operators between steps/apps or start/stop the app.****

Only 1**Transition******can be added to a single **Trigger.**

*ex: Complete then change to X app, Next step, Previous step, Cancel app, etc.*

**Tulip Player**

**Tulip Player** is the Windows/Mac executable program where users can run Tulip apps. Tulip player allows you to create a more seamless user experience by removing the need for a web browser, and allows increased IT controls.