Public
Back
Version 6
8/25/2024
/**
* 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<HTMLVideoElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const displayCanvasRef = useRef<HTMLCanvasElement>(null);
const [error, setError] = useState<string | null>(null);
const [effect, setEffect] = useState<string>("normal");
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);
}
}
kian-webcameffects.web.val.run
Updated: October 9, 2024