Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Web Perception Toolkit

Build Status NPM

Web Perception Toolkit running on a phone

This toolkit provides a set of components and utilities for developers to add an augmented experience to their website. For example, a primary use-case supported is the ability to detect barcodes (in -- say -- a real-world store) with the user's device camera, and to show them extended information on a given product.

Please see our Getting Started guide.


Included in this toolkit:

  • Device Support Detection
    • Barcode Detector
    • getUserMedia and environment camera
    • Geolocation
    • Wasm
  • Detectors
    • Barcode Detector (native / ZXing)
    • QR Codes (native / ZXing)
    • Geolocation (native)
    • 2D (Planar) Images
    • (TODO) ML Image Classification
  • UI
    • Loader
    • Card
    • User onboarding
  • Utilities
    • Stream capture (i.e. getUserMedia to image conversion)
    • Logging
    • Image resizing


Please check out our Getting Started guide for far more information.

Briefly, however: we recommend installation via npm. Simply:

npm install --save perception-toolkit

A few starting samples are under demo, where you can see how to set up barcode detection and the display of values to the end user. The most basic is demo/simple, and this may be a good starting point in your own project. Once you copy demo/simple/index.html into your own project, you'll need a few small modifications to refer to the Web Perception Toolkit installed in node_modules (and assuming that node_modules is available at the root of your server, as it is with our sample server):

  • You must specify root in the existing window.PerceptionToolkit.config:

    window.PerceptionToolkit.config = {
      root: '/node_modules/perception-toolkit',
  • You must change the location of bootstrap.js (included at the end of <body>):

    <script src="/node_modules/perception-toolkit/lib/bundled/bootstrap.js"></script>


We're glad you're excited and want to help out! Please read our contributing guide for hints.

  1. git clone
  2. npm i
  3. npm run build
  4. npm run serve
  5. Open the demo page at localhost:8080


npm test

Note: coverage data can be found in the generated coverage/ directory located in the project root.

API Docs

npm run docs

Note: docs can be found in the generated docs directory located in the project root.