1.0.0 • Published 11 months ago

viewfinder-component v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

Built With Stencil

Viewfinder Webcomponent

version downloads jsdelivr

Viewfinder web component for barcode scanning.

screenshot

Online barcode scanner demo

Usage

In your HTML, add the component:

<view-finder></view-finder>

You can define the width, the height, the scan region and the styles like this:

<view-finder 
  style="--scan-line-color:orange;
         --scan-rect-color:orange;"
  width="1280"
  height="720"
  left="320"
  right="960"
  top="180"
  bottom="540"
  preserve-aspect-ratio="xMidYMid slice">
</view-finder>

If you need to set multiple regions, then use the regions prop.

document.querySelector("view-finder").regions = [
  {
    left:300,
    top:180,
    right: 500,
    bottom: 540,
  },
  {
    left:600,
    top:180,
    right: 800,
    bottom: 540,
  }
];

Install this component

Script tag

  • Put a script tag similar to this

    <script type="module">
      import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/viewfinder-component/dist/esm/loader.js';
      defineCustomElements();
    </script>

    in the head of your index.html

  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install viewfinder-component --save
  • Put a script tag similar to this

    <script type="module">
      import { defineCustomElements } from 'node_modules/viewfinder-component/dist/esm/loader.js';
      defineCustomElements();
    </script>

    in the head of your index.html

  • Then you can use the element anywhere in your template, JSX, html etc