Skip to content
Go to file

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.

You can’t perform that action at this time.