/** * This app will create a webcam-based image processing application. * It will request webcam permissions, display the video feed, and prepare for applying effects. * We'll use React for the UI, the browser's MediaDevices API for webcam access, * and later we'll incorporate P5.js for image processing. */ /** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const videoRef = useRef(null); const canvasRef = useRef(null); const displayCanvasRef = useRef(null); const [error, setError] = useState(null); const [effect, setEffect] = useState("pink_zone"); const effectRef = useRef(effect); useEffect(() => { effectRef.current = effect; }, [effect]); useEffect(() => { async function setupWebcam() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); if (videoRef.current) { videoRef.current.srcObject = stream; } } catch (err) { setError("Failed to access webcam. Please ensure you've granted permission."); console.error("Error accessing webcam:", err); } } setupWebcam(); return () => { if (videoRef.current && videoRef.current.srcObject) { const stream = videoRef.current.srcObject as MediaStream; stream.getTracks().forEach(track => track.stop()); } }; }, []); useEffect(() => { const video = videoRef.current; const canvas = canvasRef.current; const displayCanvas = displayCanvasRef.current; if (!video || !canvas || !displayCanvas) return; const ctx = canvas.getContext("2d"); const displayCtx = displayCanvas.getContext("2d"); if (!ctx || !displayCtx) return; let animationFrameId: number; const drawToCanvas = () => { canvas.width = 64; canvas.height = 64; ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; // Apply selected effect switch (effectRef.current) { case "pink_zone": for (let i = 0; i < data.length; i += 4) { data[i] = data[i] * 2 % 255; // Red data[i + 1] = data[i + 1] / 2; // Green data[i + 2] = (data[i + 2] + 100) % 255; // Blue } break; case "storm": const lightningStrength = Math.random() < 0.05 ? Math.random() * 200 + 55 : 0; for (let i = 0; i < data.length; i += 4) { data[i] = Math.min(data[i] / 4, 255); // Reduced Red data[i + 1] = Math.min(data[i + 1] / 3, 255); // Reduced Green data[i + 2] = Math.min((data[i + 2] + 50) % 255 + lightningStrength, 255); // Enhanced Blue with lightning } break; case "goth_girl": for (let i = 0; i < data.length; i += 4) { const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; if (avg < 128) { data[i] = data[i + 1] = data[i + 2] = 0; // Black } else if (avg < 192) { data[i] = 102; // Deep purple data[i + 1] = 0; data[i + 2] = 153; } else { data[i] = data[i + 1] = data[i + 2] = 255; // White } } break; case "weed_mode": for (let i = 0; i < data.length; i += 4) { const avg = (data[i] + data[i + 1] + data[i + 2]) / 3; // Create a wavy effect const waveEffect = Math.sin(i / 100) * 30; data[i] = Math.max(0, Math.min(255, data[i] / 4 + waveEffect)); // Reduced red with wave data[i + 1] = Math.max(0, Math.min(255, avg < 128 ? 50 : 200 + waveEffect)); // Dark or bright green with wave data[i + 2] = Math.max(0, Math.min(255, data[i + 2] / 4 - waveEffect)); // Reduced blue with inverse wave } break; case "hurt_me_plenty": for (let i = 0; i < data.length; i += 4) { const intensity = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = Math.min(intensity * 2, 255); // Intense red data[i + 1] = intensity < 128 ? 0 : Math.min(intensity, 100); // Dark with some orange data[i + 2] = intensity < 64 ? 0 : Math.min(intensity / 2, 50); // Very dark blue } break; } ctx.putImageData(imageData, 0, 0); displayCanvas.width = video.videoWidth; displayCanvas.height = video.videoHeight; displayCtx.imageSmoothingEnabled = false; displayCtx.drawImage(canvas, 0, 0, displayCanvas.width, displayCanvas.height); animationFrameId = requestAnimationFrame(drawToCanvas); }; video.addEventListener("play", drawToCanvas); return () => { video.removeEventListener("play", drawToCanvas); cancelAnimationFrame(animationFrameId); }; }, []); return (

{effect}

{error ?

{error}

: ( <>

); } // client-side only code function client() { createRoot(document.getElementById("root")!).render(); } if (typeof document !== "undefined") { client(); } // server-side only code export default async function server(request: Request): Promise { return new Response( ` Webcam Effects

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } .container { text-align: center; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } h1 { color: #333; } canvas { max-width: 100%; border-radius: 5px; } .error { color: red; } a { color: #0077cc; text-decoration: none; display: block; margin-top: 20px; } a:hover { text-decoration: underline; } .effect-select { margin-top: 20px; padding: 10px; font-size: 16px; border: 2px solid #4CAF50; border-radius: 5px; background-color: white; cursor: pointer; } .effect-select:hover { border-color: #45a049; } .effect-select:focus { outline: none; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); } `;

webcamEffects