Viewfinder Webcomponent

Viewfinder web component for barcode scanning.

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