Merge pull request #66 from KeneNwogu/Ken/camera-fix

fix: camera initialization bug fix

closes #66

Author: ayobami11

LEADERBOARD.md

@@ -1,4 +1,3 @@
-
 # GitHub Leaderboard
 
 🏆 **Welcome to the Official Leaderboard!** 🏆
@@ -18,5 +17,4 @@ A heartfelt **thank you** to all our fantastic contributors for their hard work
 
 ---
 
-*Want to see your name on the leaderboard? Contribute to our project on [GitHub](https://github.com/mlsanigeria/speak-to-docs) and make an impact!*
-
+_Want to see your name on the leaderboard? Contribute to our project on [GitHub](https://github.com/mlsanigeria/speak-to-docs) and make an impact!_

README.md

@@ -88,6 +88,7 @@ Watch our info session on how to get started with Hacktoberfest and contribute t
 We maintain a leaderboard to track your contributions and their impact on our projects. The more you contribute, the higher you'll climb on the leaderboard.
 
 <!-- Section Start -->
+
 ### Top 10 Contributors
 
 Thank you to all our fantastic contributors for their hard work and dedication! Here are our top 10 contributors:

src/app/scan-image/page.tsx

@@ -6,26 +6,29 @@ import Link from "next/link";
 
 export default function ScanImagePage() {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [isStarted, setIsStarted] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(false);
 
-  useEffect(() => {
-    const startCamera = async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: "environment" },
-        });
-        if (videoRef.current) {
-          videoRef.current.srcObject = stream;
-          setLoading(false);
-        }
-      } catch (err) {
-        console.error("Camera access error:", err);
-        setError("Unable to access camera. Please allow camera permissions.");
+  const startCamera = async () => {
+    try {
+      setLoading(true);
+      setIsStarted(true);
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "environment" },
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
         setLoading(false);
       }
-    };
+    } catch (err) {
+      console.error("Camera access error:", err);
+      setError("Unable to access camera. Please allow camera permissions.");
+      setLoading(false);
+    }
+  };
 
+  useEffect(() => {
     startCamera();
 
     return () => {
@@ -60,16 +63,24 @@ export default function ScanImagePage() {
         {error ? (
           <p className="text-center text-sm text-red-400 px-4">{error}</p>
         ) : loading ? (
-          <p className="text-neutral-500 text-sm">Initializing camera...</p>
+          <p className="w-full text-center text-neutral-500 text-sm">
+            Initializing camera...
+          </p>
         ) : (
-          <video
-            ref={videoRef}
-            autoPlay
-            playsInline
-            muted
-            className="w-full h-full object-cover"
-          />
+          ""
         )}
+
+        <video
+          ref={videoRef}
+          autoPlay
+          playsInline
+          muted
+          className={
+            isStarted && !loading
+              ? "w-full h-full object-cover"
+              : "absolute invisible left-[-100vw]"
+          }
+        />
       </div>
 
       {/* Footer */}