Skip to content

A simple React Component using the client's webcam to read barcodes.

Notifications You must be signed in to change notification settings

AyoubEssrifi/react-webcam-barcode-scanner

 
 

Repository files navigation

React Webcam Barcode Scanner

This is a simple barebones React component built in Typescript to provide a webcam-based barcode scanner using react-webcam and @zxing/library. This component works on Computers and Mobile Devices (iOS 11 and above and Android Phones).

Installation

npm i react-webcam-barcode-scanner

Usage in React:

A demo of this can be found at: https://barcode.phdash.com.

import React from 'react';
import BarcodeScannerComponent from "react-webcam-barcode-scanner";

function App() {

  const [ data, setData ] = React.useState('Not Found');

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text)
          else setData('Not Found')
        }}
      />
      <p>{data}</p>
    </>
  )
}

export default App;

About

A simple React Component using the client's webcam to read barcodes.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 59.9%
  • JavaScript 40.1%