1.0.0 • Published 1 year ago

viewfinder-component v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year 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