added webcam

website/src/App.jsx

@@ -8,6 +8,7 @@ import Menu from './Menu'
 import Homepage from './Homepage';
 import Bird_CNN from './Bird_CNN';
 import Reviews from './Reviews.jsx';
+import Object_Detection from './Object_Detection.jsx';
 
 function App() {
 
@@ -17,6 +18,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Homepage />} />
         <Route path="/bird_cnn" element={<Bird_CNN />} />
+        <Route path="/object_detection" element={<Object_Detection />} />
         <Route path="/reviews" element={<Reviews />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>

website/src/Menu.jsx

@@ -7,6 +7,7 @@ function Menu() {
             <nav id="navbar-main">
                 <Link className='navbar-item' to="/">Homepage</Link>
                 <Link className='navbar-item' to="/bird_cnn">Birds</Link>
+                <Link className='navbar-item' to="/object_detection">YOLO</Link>
                 <Link className='navbar-item' to="/reviews">Reviews</Link>
             </nav>
         </>

website/src/Object_Detection.jsx

@@ -0,0 +1,65 @@
+import styles from './Object_Detection.module.css';
+import { useRef, useEffect } from 'react'
+
+function Object_Detection() {
+    const videoRef = useRef(null);
+
+    useEffect(() => {
+        async function startWebcam() {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({
+                    video: true,
+                    audio: false,
+                });
+
+                if (videoRef.current) {
+                    videoRef.current.srcObject = stream;
+                }
+            } catch (err) {
+                console.error("Error accessing webcam:", err);
+            }
+        }
+
+        startWebcam();
+
+        return () => {
+            if (videoRef.current?.srcObject) {
+                const tracks = videoRef.current.srcObject.getTracks();
+                tracks.forEach((track) => track.stop());
+            }
+        };
+    }, []);
+
+    const captureImage = () => {
+        const video = videoRef.current;
+        const canvas = canvasRef.current;
+
+        const width = video.videoWidth;
+        const height = video.videoHeight;
+
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext("2d");
+
+        ctx.drawImage(video, 0, 0, width, height);
+
+        const dataUrl = canvas.toDataURL("image/png");
+
+        setImage(dataUrl);
+    };
+
+
+    return (
+        <div className='site-box'>
+            <h1 className='site-headline'>Face Detection</h1>
+            <div id={styles.container}>
+                <video autoPlay={true} id={styles.videoElement} ref={videoRef}>
+
+                </video>
+            </div>
+        </div>
+    )
+}
+
+export default Object_Detection;

website/src/Object_Detection.module.css

@@ -0,0 +1,11 @@
+#container {
+	margin: 0px auto;
+	width: 520px;
+	height: 395px;
+	border: 10px #333 solid;
+}
+#videoElement {
+	width: 500px;
+	height: 375px;
+	background-color: #666;
+}