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

GoogleChromeLabs
203 Stars 19 Forks Apache License 2.0 338 Commits 45 Opened issues

Services available

!
?

Need anything else?

Contributors list

# 3,715
JavaScr...
Svelte
Shell
chrome-...
189 commits
# 43,310
cordova
Objecti...
Mobile
cpluspl...
95 commits
# 87,977
HTML
CSS
Shell
gltf
8 commits

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.

Overview

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

Installation

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
    ):
  

Development

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

  1. git clone https://github.com/GoogleChromeLabs/perception-toolkit
  2. npm i
  3. npm run build
  4. npm run serve
  5. Open the demo page at localhost:8080

Testing

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.

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.