[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_97":96,"_32":45,"_106":85,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":25,"_123":124,"_125":49,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","aa2d5928-2783-11f0-b46e-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n/**\n * CameraSDK - A simplified webcam component\n */\nexport const CameraView = ({ \n zoom = 1,\n mirrored = true\n}) => {\n const videoRef = useRef(null);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n if (typeof navigator === 'undefined' || !navigator.mediaDevices) {\n setError(\"MediaDevices API not available in this environment\");\n return;\n }\n \n async function setupCamera() {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({\n video: { \n facingMode: \"user\",\n },\n audio: false\n });\n \n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n videoRef.current.style.transform = `${mirrored ? 'scaleX(-1)' : ''} scale(${zoom})`;\n videoRef.current.style.transformOrigin = 'center';\n }\n } catch (error) {\n console.error(\"Error accessing the camera:\", error);\n setError(\"Failed to access the camera. Please ensure you've granted the necessary permissions.\");\n }\n }\n \n setupCamera();\n\n return () => {\n if (videoRef.current && videoRef.current.srcObject) {\n videoRef.current.srcObject.getTracks().forEach(track => track.stop());\n }\n };\n }, [zoom, mirrored]);\n\n return (\n

\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\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 handleMouseDown = (e) => {\n e.preventDefault();\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n };\n\n const handleMouseMove = (e) => {\n if (containerRef.current) {\n const containerRect = containerRef.current.getBoundingClientRect();\n const newPosition = ((e.clientX - containerRect.left) / containerRect.width) * 100;\n setDividerPosition(Math.max(10, Math.min(90, newPosition)));\n }\n };\n\n const handleMouseUp = () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n };\n\n const handleValUrlSubmit = (e) => {\n e.preventDefault();\n if (valUrl) {\n setShowIframe(true);\n }\n };\n\n return (\n

\n \n

\n {!showIframe ? (\n <>\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 ) : (\n

\n \n

Diff · v6