video feature

src/App.jsx

 import TimeDuration from "./components/TimeDuration"
 import Title from "./components/Title"
+import Video from "./components/Video"
 
 function App() {
   return (
     <>
       <div className="page-container">
         <Title/>
+        <Video/>
         <TimeDuration/>
       </div>
     </>

src/components/TimeDuration.jsx

@@ -55,8 +55,7 @@ function TimeDuration() {
           onChange={(e) => setMinute(e.target.value)}
         />
       </div>
-      <button onClick={()=>console.log(handleTimeInput())}>rereive time</button>
-      <button onClick={startTimer}>Timer</button>
+      <button onClick={startTimer}>Start timer</button>
       <button onClick={() => clearInterval(intervalID.current)}>Stop timer</button>
       <button onClick={runTime}>Resume</button>
       <button onClick={() => setSecond(0)}>Reset timer</button>

src/components/Video.jsx

+import { useRef } from "react";
+
+function Video() {
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+
+  function stopCam(){
+    if(streamRef.current){
+        streamRef.current.getTracks().forEach(track => {
+            track.stop();
+        }); 
+        streamRef.current = null   //clean the ref
+    }
+  }
+
+  function startCam(){
+    navigator.mediaDevices
+      .getUserMedia({ video: true })
+      .then((stream) => {
+        if (videoRef.current) {
+          streamRef.current = stream;
+          videoRef.current.srcObject = stream; // Connect the stream to the <video>
+          videoRef.current.play(); // Start playing the video
+        }
+      })
+      .catch((error) => {
+        console.log("Error:", error);
+      });
+  }
+  return (
+    <>
+        <video
+        ref={videoRef}
+        width="640"
+        height="480"
+        autoPlay
+        muted
+        style={{ transform: "scaleX(-1)" }}
+        ></video>
+        <button onClick={startCam}>Start Camera</button>
+        <button onClick={stopCam}>Stop Camera</button>
+    </>
+    
+  );
+}
+export default Video;