{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "webcam",
  "title": "Webcam",
  "description": "A browser webcam streaming component with error handling and ref forwarding. | ブラウザのウェブカメラストリーミング用コンポーネント。エラー処理とref転送機能付き。",
  "files": [
    {
      "path": "components/media/webcam.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState, useEffect } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// default video and audio settings\nconst mediaConfig = {\n  video: {\n    width: 640,\n    height: 360,\n    facingMode: \"user\",\n  },\n  audio: false,\n  errorMessage: \"Unable to access camera\",\n};\n\nfunction mergeRefs<T>(\n  ref: React.Ref<T> | undefined,\n  localRef: React.MutableRefObject<T | null>,\n) {\n  return (el: T | null) => {\n    localRef.current = el;\n    if (typeof ref === \"function\") ref(el);\n    else if (ref) (ref as React.MutableRefObject<T | null>).current = el;\n  };\n}\n\ninterface WebcamProps {\n  ref?: React.Ref<HTMLVideoElement>;\n  width?: number; // Video width, default: 640\n  height?: number; // Video height, default: 360\n  audio?: boolean; // Audio, default: false\n  className?: string; // <video> Class name\n  containerClassName?: string; // Container class name\n}\n\nexport function Webcam({\n  ref,\n  width = mediaConfig.video.width,\n  height = mediaConfig.video.height,\n  audio = mediaConfig.audio,\n  className,\n  containerClassName,\n}: WebcamProps) {\n  const videoRef = useRef<HTMLVideoElement>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    let stream: MediaStream | null = null;\n\n    async function initCamera() {\n      try {\n        stream = await navigator.mediaDevices.getUserMedia({\n          video: {\n            width: width,\n            height: height,\n            facingMode: mediaConfig.video.facingMode,\n          },\n          audio: audio,\n        });\n        if (videoRef.current) videoRef.current.srcObject = stream;\n      } catch (err) {\n        setError(\n          err instanceof Error ? `${err.message}` : mediaConfig.errorMessage,\n        );\n      }\n    }\n\n    initCamera();\n    return () => {\n      stream?.getTracks().forEach((track) => track.stop());\n    };\n  }, [audio, height, width]);\n\n  return (\n    <div\n      className={cn(\n        \"relative flex items-center justify-center w-full h-full\",\n        containerClassName,\n      )}\n    >\n      {error ? (\n        <p\n          role=\"alert\"\n          className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-red-500\"\n        >\n          {error}\n        </p>\n      ) : null}\n      <video\n        ref={mergeRefs(ref, videoRef)}\n        autoPlay\n        playsInline\n        muted\n        className={cn(\n          \"w-full h-full aspect-video bg-black object-cover scale-x-[-1] rounded-xs\",\n          className,\n        )}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}