\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 [dividerPosition, setDividerPosition] = useState(50);\n const [valUrl, setValUrl] = useState('');\n const [showIframe, setShowIframe] = useState(false);\n const containerRef = useRef(null);\n const [useThirdPanel, setUseThirdPanel] = useState(false);\n const [thirdValUrl, setThirdValUrl] = useState('');\n const [showThirdIframe, setShowThirdIframe] = useState(false);\n const [secondDividerPosition, setSecondDividerPosition] = useState(75);\n const divider1Ref = useRef(null);\n const divider2Ref = useRef(null);\n\n // Adjust divider positions when toggling third panel\n useEffect(() => {\n if (useThirdPanel) {\n // Set to equal thirds\n setDividerPosition(33.33);\n setSecondDividerPosition(66.66);\n } else {\n // Return to previous positions or defaults\n setDividerPosition(50);\n }\n }, [useThirdPanel]);\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 handleMouseDownFirstDivider = (e) => {\n e.preventDefault();\n document.addEventListener('mousemove', handleMouseMoveFirstDivider);\n document.addEventListener('mouseup', handleMouseUpFirstDivider);\n document.addEventListener('touchmove', handleTouchMoveFirstDivider);\n document.addEventListener('touchend', handleMouseUpFirstDivider);\n };\n\n const handleTouchStartFirstDivider = (e) => {\n e.preventDefault();\n document.addEventListener('touchmove', handleTouchMoveFirstDivider);\n document.addEventListener('touchend', handleMouseUpFirstDivider);\n };\n\n const handleMouseMoveFirstDivider = (e) => {\n if (containerRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.clientX - containerRect.left) / containerRect.width) * 100;\n const maxPos = useThirdPanel ? secondDividerPosition - 5 : 90;\n setDividerPosition(Math.max(10, Math.min(maxPos, newPosition)));\n }\n };\n\n const handleTouchMoveFirstDivider = (e) => {\n if (containerRef.current && e.touches && e.touches[0]) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.touches[0].clientX - containerRect.left) / containerRect.width) * 100;\n const maxPos = useThirdPanel ? secondDividerPosition - 5 : 90;\n setDividerPosition(Math.max(10, Math.min(maxPos, newPosition)));\n }\n };\n\n const handleMouseUpFirstDivider = () => {\n document.removeEventListener('mousemove', handleMouseMoveFirstDivider);\n document.removeEventListener('mouseup', handleMouseUpFirstDivider);\n document.removeEventListener('touchmove', handleTouchMoveFirstDivider);\n document.removeEventListener('touchend', handleMouseUpFirstDivider);\n };\n\n const handleMouseDownSecondDivider = (e) => {\n e.preventDefault();\n document.addEventListener('mousemove', handleMouseMoveSecondDivider);\n document.addEventListener('mouseup', handleMouseUpSecondDivider);\n document.addEventListener('touchmove', handleTouchMoveSecondDivider);\n document.addEventListener('touchend', handleMouseUpSecondDivider);\n };\n\n const handleTouchStartSecondDivider = (e) => {\n e.preventDefault();\n document.addEventListener('touchmove', handleTouchMoveSecondDivider);\n document.addEventListener('touchend', handleMouseUpSecondDivider);\n };\n\n const handleMouseMoveSecondDivider = (e) => {\n if (containerRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.clientX - containerRect.left) / containerRect.width) * 100;\n setSecondDividerPosition(Math.max(dividerPosition + 5, Math.min(90, newPosition)));\n }\n };\n\n const handleTouchMoveSecondDivider = (e) => {\n if (containerRef.current && e.touches && e.touches[0]) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.touches[0].clientX - containerRect.left) / containerRect.width) * 100;\n setSecondDividerPosition(Math.max(dividerPosition + 5, Math.min(90, newPosition)));\n }\n };\n\n const handleMouseUpSecondDivider = () => {\n document.removeEventListener('mousemove', handleMouseMoveSecondDivider);\n document.removeEventListener('mouseup', handleMouseUpSecondDivider);\n document.removeEventListener('touchmove', handleTouchMoveSecondDivider);\n document.removeEventListener('touchend', handleMouseUpSecondDivider);\n };\n\n const handleValUrlSubmit = (e) => {\n e.preventDefault();\n if (valUrl) {\n setShowIframe(true);\n }\n };\n\n const handleThirdValUrlSubmit = (e) => {\n e.preventDefault();\n if (thirdValUrl) {\n setShowThirdIframe(true);\n }\n };\n\n // Calculate the actual display widths\n let cameraWidth, configWidth, thirdPanelWidth;\n \n if (useThirdPanel) {\n cameraWidth = `calc(${dividerPosition}% - 5px)`;\n configWidth = `calc(${secondDividerPosition - dividerPosition}% - 10px)`;\n thirdPanelWidth = `calc(${100 - secondDividerPosition}% - 5px)`;\n } else {\n cameraWidth = `calc(${dividerPosition}% - 5px)`;\n configWidth = `calc(${100 - dividerPosition}% - 5px)`;\n }\n\n return (\n

\n \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

\n \n setUseThirdPanel(e.target.checked)} \n />\n Add Third Panel\n \n

\n\n {useThirdPanel && (\n

\n \n Third Panel URL:\n \n

\n )}\n

\n \n

✨ Quickstart

{quickStartCode}

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

\n ) : (\n