GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → GoogleChromeLabs → Perception Toolkit

GoogleChromeLabs / Perception Toolkit

Licence: apache-2.0

Programming Languages

typescript
32286 projects

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].