ReactHooksでバーコードをスキャンする

はじめに

• ReactからQuaggajsライブラリを利用してバーコードをスキャンする

serratus.github.io

サンプルコード

import React , { useState,useEffect } from 'react'
import Quagga from "quagga";


const Scan = (props) => {

  const [barcode,setBarcode] = useState("")

  useEffect(() => {
    Quagga.onDetected(result => {
      if (result !== undefined){
        setBarcode(result.codeResult.code)
      }
    });
    const config = {
      inputStream: {
        name : "Live",
        type : "LiveStream",        
        target: '#preview',
        size: 1000,
        singleChannel: false
      },
      locator: {
        patchSize: "medium",
        halfSample: true
      },
      decoder: {
        readers: [{
          format: "ean_reader",
          config: {}
        }]
      },
      numOfWorker: navigator.hardwareConcurrency || 4,
      locate: true,
      src: null
    };
    
    Quagga.init(config, function(err) {
        if (err) {
            console.log(err);
            return
        }
        Quagga.start();
    });
  
  },[])

  return (
    <>
      <h2>バーコードスキャナ</h2>
      <hr />
      {barcode !== "" ? `バーコード：${barcode}` : "スキャン中"}
      <hr />    
      <div id="preview"></div>
    </>
  )
}

export default Scan

実行結果

読み込んだバーコードの商品はこちらです。