バーコードスキャン（カメラ）

用途

カメラでJANコード・EAN・Code128等を読み取り。

特徴

• 複数フォーマット対応
• リアルタイム認識
• カメラ切替

コード（コピペ用）

'use client';
import { BrowserMultiFormatReader } from '@zxing/browser';
import { useEffect, useRef } from 'react';

export function BarcodeScanner({ onDetect }: { onDetect: (code: string) => void }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    const reader = new BrowserMultiFormatReader();
    reader.decodeFromVideoDevice(undefined, videoRef.current!, (result) => {
      if (result) onDetect(result.getText());
    });
    return () => reader.reset();
  }, []);
  return <video ref={videoRef} style={{ width: '100%' }} />;
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加