Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Makes image bigger Apr 25, 2019
build Adds credentials for fetches (#100) May 1, 2019
defs
demo Adds lighthouse pb file; updates gitignore May 10, 2019
perception-toolkit Rename MarkerChannges to PerceivedResults May 6, 2019
src Updates build to latest May 5, 2019
styles
target-generation Updates build to latest May 5, 2019
third_party Updates build to latest May 5, 2019
.gitignore Adds lighthouse pb file; updates gitignore May 10, 2019
CONTRIBUTING.md Some more README cleanups, and contribution guidelines (#108) May 8, 2019
LICENSE Change to ASL Mar 29, 2019
README.md Some more README cleanups, and contribution guidelines (#108) May 8, 2019
index.html Initial commit Jan 11, 2019
index.ts Change to ASL Mar 29, 2019
karma.conf.js
package-lock.json Adds target generation (#101) May 1, 2019
package.json Merge pull request #105 from smalls/update-package May 8, 2019
rollup.config.js Consistent licenses Apr 4, 2019
tsconfig.docs.json Updates documentation Apr 29, 2019
tsconfig.json Add Barcode type, separate from Marker Mar 11, 2019
tslint.json Fixes and updates Feb 13, 2019

README.md

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.

You can’t perform that action at this time.