\n {error ? (\n

{error}

\n ) : (\n

\n );\n};\n\n// Demo content for the standalone version\nconst DemoContent = () => {\n const [showMessage, setShowMessage] = useState(false);\n const [zoom, setZoom] = useState(1);\n const [mirrored, setMirrored] = useState(true);\n const [valUrl, setValUrl] = useState('');\n const [showIframe, setShowIframe] = useState(false);\n\n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text).then(() => {\n setShowMessage(true);\n setTimeout(() => {\n setShowMessage(false);\n }, 2000);\n }).catch(err => {\n console.error('Failed to copy: ', err);\n });\n };\n \n const quickStartCode = `import { CameraView } from \"https://esm.town/v/dcm31/demoCamera\";\n\nfunction App() {\n return (\n

\n \n

\n );\n}`;\n\n const handleValUrlSubmit = (e) => {\n e.preventDefault();\n if (valUrl) {\n setShowIframe(true);\n }\n };\n\n return (\n

\n {!showIframe ? (\n

Camera SDK

A simple webcam component that you can easily add to any val.

\n \n

🚀 Demo Any Val

\n\n

⚙️ Configuration

\n \n Zoom: {zoom.toFixed(1)}x\n setZoom(Number(e.target.value))} \n />\n \n

\n \n

\n \n setMirrored(e.target.checked)} \n />\n Mirror Camera\n \n

\n \n

✨ Quickstart

{quickStartCode}

\n \n {showMessage && Copied to clipboard!}\n

\n ) : (\n