---
layout: default
title: Examples
showInMenu: true
---

Examples
========

The following examples showcase some of the features offered by QuaggaJS.

## Sandbox for mobile (Android only) <i class="icon-video-camera"/>

A minimal mobile-app like [example](sandbox/) with lot's of configuration
options.

<a href="sandbox/" class="columns large-thirds small-half">
    <img src="{{ site.baseurl }}/assets/sandbox-01.png" />
    <img src="{{ site.baseurl }}/assets/sandbox-02.png" />
    <img src="{{ site.baseurl }}/assets/sandbox-03.png" />
</a>

## Scanning multiple types of codes simultaneously <i class="icon-video-camera"/>

<a href="multiple/">Video-based Example</a> showcasing the use of multiple
readers

<a href="multiple/">
    <img src="{{ site.baseurl }}/assets/scan-multiple-01.png" />
</a>

## Scanning to input-field <i class="icon-video-camera"/>

<a href="scan-to-input/">Video-based Example</a> showcasing an input-field for
barcodes

<a href="scan-to-input/">
    <img src="{{ site.baseurl }}/assets/scan-to-input-01.png" />
</a>

## File-based barcode-input <i class="icon-camera"/> <i class="icon-image"/>

<a href="file-input/">File-based Example</a> showcasing an input field for
barcodes

<a href="file-input/">
    <img src="{{ site.baseurl }}/assets/scan-to-input-01.png" />
</a>

## Using static image files <i class="icon-image"/>

[This example](static_images/) shows the capabilities of QuaggaJS using
images taken under various conditions.

<a href="static_images/" class="columns large-quater small-half">
    <img src="{{ site.baseurl }}/assets/example_static_01.jpg" />
    <img src="{{ site.baseurl }}/assets/example_static_02.jpg" />
    <img src="{{ site.baseurl }}/assets/example_static_03.jpg" />
    <img src="{{ site.baseurl }}/assets/example_static_04.jpg" />
</a>

## Using the live-stream from your webcam <i class="icon-video-camera"/>

This is the preferred mode of using QuaggaJS. [This example](live_w_locator/)  demonstrates the real-time decoding capabilities of QuaggaJS by using your
webcam as a barcode-scanner.

[![Live 1]({{ site.baseurl }}/assets/example_live_01.jpg)](live_w_locator/)

## Using the File API <i class="icon-camera"/> <i class="icon-image"/>

Instead of directly accessing the user's webcam, [this example](file_input/)  shows you how to use QuaggaJS with the HTML5 File API to decode a pre-taken image.

[![File Input 1]({{ site.baseurl }}/assets/example_file_input_01.jpg)](file_input/)