/** * This app creates a webcam-based image processing application with spooky effects. * It requests webcam permissions, displays the video feed, and applies visual and audio effects. * We use React for the UI, the browser's MediaDevices API for webcam access, * and Web Audio API for continuous audio effects. */ /** @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); const audioContextRef = useRef(null); const currentAudioEffectRef = useRef<{ stop: () => void } | null>(null); useEffect(() => { effectRef.current = effect; }, [effect]); useEffect(() => { async function setupWebcam() { try { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)(); // Function to create and play continuous audio effect const playContinuousAudio = (baseFreq: number, modFreq: number) => { if (!audioContextRef.current) return; const oscillator = audioContextRef.current.createOscillator(); const modulator = audioContextRef.current.createOscillator(); const modulatorGain = audioContextRef.current.createGain(); const gainNode = audioContextRef.current.createGain(); oscillator.type = 'sine'; oscillator.frequency.setValueAtTime(baseFreq, audioContextRef.current.currentTime); modulator.type = 'sine'; modulator.frequency.setValueAtTime(modFreq, audioContextRef.current.currentTime); modulatorGain.gain.setValueAtTime(20, audioContextRef.current.currentTime); modulator.connect(modulatorGain); modulatorGain.connect(oscillator.frequency); oscillator.connect(gainNode); gainNode.gain.setValueAtTime(0.1, audioContextRef.current.currentTime); gainNode.connect(audioContextRef.current.destination); modulator.start(); oscillator.start(); return { oscillator, modulator, gainNode }; }; // Add continuous audio effects for each visual effect const audioEffects: Record { stop: () => void }> = { pink_zone: () => { const { oscillator, modulator, gainNode } = playContinuousAudio(220, 0.5); return { stop: () => { oscillator.stop(); modulator.stop(); gainNode.disconnect(); } }; }, storm: () => { const { oscillator, modulator, gainNode } = playContinuousAudio(100, 1); const thunderInterval = setInterval(() => { if (Math.random() < 0.1) { // 10% chance every second const thunderOsc = audioContextRef.current!.createOscillator(); const thunderGain = audioContextRef.current!.createGain(); thunderOsc.type = 'sawtooth'; thunderOsc.frequency.setValueAtTime(100, audioContextRef.current!.currentTime); thunderGain.gain.setValueAtTime(0.5, audioContextRef.current!.currentTime); thunderGain.gain.exponentialRampToValueAtTime(0.01, audioContextRef.current!.currentTime + 0.5); thunderOsc.connect(thunderGain).connect(audioContextRef.current!.destination); thunderOsc.start(); thunderOsc.stop(audioContextRef.current!.currentTime + 0.5); } }, 1000); return { stop: () => { oscillator.stop(); modulator.stop(); gainNode.disconnect(); clearInterval(thunderInterval); } }; }, goth_girl: () => { const { oscillator, modulator, gainNode } = playContinuousAudio(150, 0.2); const beatOscillator = audioContextRef.current!.createOscillator(); const beatGain = audioContextRef.current!.createGain(); beatOscillator.type = 'square'; beatOscillator.frequency.setValueAtTime(2, audioContextRef.current!.currentTime); beatGain.gain.setValueAtTime(0, audioContextRef.current!.currentTime); const lfo = audioContextRef.current!.createOscillator(); lfo.type = 'square'; lfo.frequency.setValueAtTime(2, audioContextRef.current!.currentTime); lfo.connect(beatGain.gain); beatOscillator.connect(beatGain); beatGain.connect(gainNode); lfo.start(); beatOscillator.start(); return { stop: () => { oscillator.stop(); modulator.stop(); beatOscillator.stop(); lfo.stop(); gainNode.disconnect(); beatGain.disconnect(); } }; }, weed_mode: () => { const { oscillator, modulator, gainNode } = playContinuousAudio(300, 0.3); return { stop: () => { oscillator.stop(); modulator.stop(); gainNode.disconnect(); } }; }, hurt_me_plenty: () => { const { oscillator, modulator, gainNode } = playContinuousAudio(400, 2); return { stop: () => { oscillator.stop(); modulator.stop(); gainNode.disconnect(); } }; }, }; // Attach audio effects to window for access in the effect change handler (window as any).audioEffects = audioEffects; const stream = await navigator.mediaDevices.getUserMedia({ video: true }); if (videoRef.current) { videoRef.current.srcObject = stream; } // Start the initial audio effect currentAudioEffectRef.current = audioEffects[effect](); } 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()); } if (currentAudioEffectRef.current) { currentAudioEffectRef.current.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; // Add spooky aura overlay const time = Date.now() / 1000; for (let y = 0; y < canvas.height; y++) { for (let x = 0; x < canvas.width; x++) { const index = (y * canvas.width + x) * 4; const distance = Math.sqrt((x - canvas.width / 2) ** 2 + (y - canvas.height / 2) ** 2); const auraIntensity = Math.sin(distance * 0.2 - time) * 0.5 + 0.5; data[index] += auraIntensity * 50; // Red glow data[index + 2] += auraIntensity * 100; // Blue glow } } // 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": let lightningStrength = 0; if (Math.random() < 0.05) { lightningStrength = Math.random() * 200 + 55; // Trigger thunderclap sound if (audioContextRef.current) { (window as any).audioEffects.storm().stop(); currentAudioEffectRef.current = (window as any).audioEffects.storm(); } } for (let i = 0; i < data.length; i += 4) { data[i] = Math.min(data[i] / 4 + lightningStrength, 255); // Reduced Red with lightning data[i + 1] = Math.min(data[i + 1] / 3 + lightningStrength, 255); // Reduced Green with lightning 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 < 64) { data[i] = data[i + 1] = data[i + 2] = 0; // Black } else if (avg < 128) { data[i] = 102; // Deep purple data[i + 1] = 0; data[i + 2] = 153; } else { data[i] = data[i + 1] = data[i + 2] = Math.random() < 0.5 ? 0 : 255; } } 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( ` Spooky 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: #1a1a1a; color: #f0f0f0; } .container { text-align: center; background-color: #2a2a2a; padding: 20px; border-radius: 10px; box-shadow: 0 0 20px rgba(255,0,0,0.2); } h1 { color: #ff6b6b; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } canvas { max-width: 100%; border-radius: 5px; border: 2px solid #ff6b6b; box-shadow: 0 0 10px rgba(255,0,0,0.3); } .error { color: #ff4757; } a { color: #ff6b6b; text-decoration: none; display: block; margin-top: 20px; } a:hover { text-decoration: underline; color: #ff4757; } .effect-select { margin-top: 20px; padding: 10px; font-size: 16px; border: 2px solid #ff6b6b; border-radius: 5px; background-color: #2a2a2a; color: #f0f0f0; cursor: pointer; } .effect-select:hover { border-color: #ff4757; } .effect-select:focus { outline: none; box-shadow: 0 0 5px rgba(255, 107, 107, 0.5); } `;

webcamEffects