Reactで、カメラの映像を表示して写真を撮る方法

import { useEffect, useRef, useState } from 'react';

type Facing = 'user' | 'environment';
type Photo = { url: string; blob: Blob; width: number; height: number };

// getUserMedia() が失敗したときの例外を、画面に出す文にする
function toMessage(err: unknown) {
  const name = err instanceof DOMException ? err.name : '';
  switch (name) {
    case 'NotAllowedError': return 'カメラの使用が許可されていません。ブラウザの設定で許可してください。';
    case 'NotFoundError': return 'カメラが見つかりません。';
    case 'NotReadableError': return 'カメラを使えません。ほかのアプリが使っていないか確かめてください。';
    case 'OverconstrainedError': return '条件に合うカメラがありません。';
    default: return `カメラを開けませんでした（${name || String(err)}）`;
  }
}

export function CameraCapture() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [on, setOn] = useState(true);
  const [facing, setFacing] = useState<Facing>('user');
  const [ready, setReady] = useState(false);
  const [error, setError] = useState('');
  const [photo, setPhoto] = useState<Photo | null>(null);

  useEffect(() => {
    if (!on) return;
    let cancelled = false;
    let stream: MediaStream | null = null;
    setError('');

    (async () => {
      // HTTPS（または localhost）でないページでは navigator.mediaDevices がない
      if (!navigator.mediaDevices?.getUserMedia) {
        setError('このページではカメラを使えません（HTTPS で開いてください）。');
        return;
      }
      try {
        const s = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: facing, width: { ideal: 1280 }, height: { ideal: 720 } },
          audio: false,
        });
        if (cancelled) {
          // 待っている間に片付けが済んでいたら、遅れて届いたカメラをすぐ止める
          s.getTracks().forEach((t) => t.stop());
          return;
        }
        stream = s;
        if (videoRef.current) videoRef.current.srcObject = s;
      } catch (err) {
        if (!cancelled) setError(toMessage(err));
      }
    })();

    return () => {
      cancelled = true;
      stream?.getTracks().forEach((t) => t.stop()); // トラックを止めて、カメラを使い終える
      if (videoRef.current) videoRef.current.srcObject = null;
      setReady(false);
    };
  }, [on, facing]);

  // 撮った写真の URL は、次の写真に替わるときと画面から消えるときに解放する
  useEffect(() => () => { if (photo) URL.revokeObjectURL(photo.url); }, [photo]);

  function takePhoto() {
    const video = videoRef.current;
    if (!video || !video.videoWidth) return;
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth; // 表示の大きさではなく、映像そのものの大きさ
    canvas.height = video.videoHeight;
    canvas.getContext('2d')!.drawImage(video, 0, 0);
    canvas.toBlob((blob) => {
      if (!blob) return setError('写真を画像にできませんでした。');
      setPhoto({ url: URL.createObjectURL(blob), blob, width: canvas.width, height: canvas.height });
    }, 'image/jpeg', 0.9);
  }

  return (
    <div className="camera">
      {on && (
        <video
          ref={videoRef}
          autoPlay
          playsInline
          muted
          onLoadedMetadata={() => setReady(true)}
          // 前面のカメラは鏡のように左右を反転して見せる（写真は反転しない）
          style={{ transform: facing === 'user' ? 'scaleX(-1)' : undefined }}
        />
      )}
      <p role="alert">{error}</p>
      <div className="buttons">
        <button type="button" onClick={takePhoto} disabled={!on || !ready}>撮影</button>
        <button type="button" onClick={() => setFacing((f) => (f === 'user' ? 'environment' : 'user'))} disabled={!on}>
          カメラを切り替える
        </button>
        <button type="button" onClick={() => setOn((v) => !v)}>{on ? 'カメラを止める' : 'カメラを使う'}</button>
      </div>
      {photo && (
        <figure>
          <img src={photo.url} width={photo.width} height={photo.height} alt="撮った写真" />
          <figcaption>
            {photo.width}×{photo.height}、{Math.round(photo.blob.size / 1024)}KB
            {' '}<a href={photo.url} download="photo.jpg">保存する</a>
          </figcaption>
        </figure>
      )}
    </div>
  );
}

useEffect(() => {
  let stream: MediaStream | null = null;
  navigator.mediaDevices.getUserMedia({ video: true }).then((s) => {
    stream = s;
    if (videoRef.current) videoRef.current.srcObject = s;
  });
  return () => stream?.getTracks().forEach((t) => t.stop());
}, []);

const ctx = canvas.getContext('2d')!;
ctx.translate(canvas.width, 0);
ctx.scale(-1, 1);
ctx.drawImage(video, 0, 0);