Fix camera preview mounting for QR scan

app/page.tsx

@@ -316,7 +316,30 @@ export default function TwoFactorAuth() {
       })
       streamRef.current = stream
 
+      setIsCameraOpen(true)
+
+      // Wait for the video element to mount before attaching the stream
+      await new Promise<void>((resolve, reject) => {
+        let attempts = 0
+        const waitForVideo = () => {
           if (videoRef.current) {
+            resolve()
+            return
+          }
+          attempts += 1
+          if (attempts > 10) {
+            reject(new Error("Video element not available"))
+            return
+          }
+          requestAnimationFrame(waitForVideo)
+        }
+        waitForVideo()
+      })
+
+      if (!videoRef.current) {
+        throw new Error("Video element not available")
+      }
+
       videoRef.current.srcObject = stream
       // Wait for video to be ready before playing
       await new Promise<void>((resolve, reject) => {
@@ -329,9 +352,7 @@ export default function TwoFactorAuth() {
         }
         video.onerror = () => reject(new Error("Video load error"))
       })
-      }
 
-      setIsCameraOpen(true)
       // Start scanning after a short delay to ensure video is rendering
       setTimeout(() => scanQRCode(), 500)
     } catch (error) {