Need help with perception-toolkit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

206 Stars 21 Forks Apache License 2.0 338 Commits 47 Opened issues

Services available


Need anything else?

Contributors list

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.
      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

(and assuming that
is available at the root of your server, as it is with our sample server):
  • You must specify
    in the existing
  window.PerceptionToolkit.config = {
    root: '/node_modules/perception-toolkit',



  • You must change the location of
    (included at the end of


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

directory located in the project root.

API Docs

npm run docs

Note: docs can be found in the generated

directory located in the project root.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.