QRコード読み取り

用途

カメラからリアルタイムQR読み取り。html5-qrcodeで実装。

特徴

• カメラ起動
• リアルタイム読取
• カメラ切替
• スキャン結果コールバック

コード（コピペ用）

'use client';
import { Html5Qrcode } from 'html5-qrcode';
import { useEffect, useRef } from 'react';

export function QRScanner({ onResult }: { onResult: (text: string) => void }) {
  const ref = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const id = 'qr-' + Math.random();
    if (ref.current) ref.current.id = id;
    const scanner = new Html5Qrcode(id);
    scanner.start(
      { facingMode: 'environment' },
      { fps: 10, qrbox: 250 },
      (text) => { onResult(text); scanner.stop(); },
      () => {}
    );
    return () => { scanner.stop().catch(() => {}); };
  }, []);
  return <div ref={ref} style={{ width: 300, height: 300 }} />;
}

使い方

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

注意事項

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