Skip to content

smalls/perception-toolkit

Repository files navigation

Web Perception Toolkit

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

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

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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published