added screen recording and upload options

.gitignore

@@ -0,0 +1,15 @@
+# dependencies
+node_modules/
+
+# Python
+__pycache__/
+*.pyc
+
+# OS files
+.DS_Store
+
+# Large binaries
+*.onnx
+*.bin
+*.pt
+*.mp4

package.json

@@ -19,8 +19,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.29.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^4.5.2",
     "@webgpu/types": "^0.1.63",
     "eslint": "^9.29.0",

src/App.tsx

@@ -6,13 +6,21 @@ import WebcamPermissionDialog from "./components/WebcamPermissionDialog";
 import type { AppState } from "./types";
 
 export default function App() {
-  const [appState, setAppState] = useState<AppState>("requesting-permission");
-  const [webcamStream, setWebcamStream] = useState<MediaStream | null>(null);
+  const [appState, setAppState] = useState<AppState>("welcome");
+  const [mediaStream, setMediaStream] = useState<MediaStream | null>(null);
+  const [fileUrl, setFileUrl] = useState<string | null>(null);
   const [isVideoReady, setIsVideoReady] = useState(false);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const handlePermissionGranted = useCallback((stream: MediaStream) => {
-    setWebcamStream(stream);
+    // Clean up any previous source
+    setFileUrl((prev: string | null) => {
+      if (prev) URL.revokeObjectURL(prev);
+      return null;
+    });
+    stopStreamTracks(mediaStream);
+
+    setMediaStream(stream);
     setAppState("welcome");
   }, []);
 
@@ -33,8 +41,17 @@ export default function App() {
   }, []);
 
   const setupVideo = useCallback(
-    (video: HTMLVideoElement, stream: MediaStream) => {
-      video.srcObject = stream;
+    (video: HTMLVideoElement, source: { stream?: MediaStream; url?: string | null }) => {
+      // Reset current src/srcObject first
+      video.pause();
+      video.src = "";
+      (video as HTMLVideoElement & { srcObject: MediaStream | null }).srcObject = null;
+
+      if (source.stream) {
+        (video as HTMLVideoElement & { srcObject: MediaStream | null }).srcObject = source.stream;
+      } else if (source.url) {
+        video.src = source.url;
+      }
 
       const handleCanPlay = () => {
         setIsVideoReady(true);
@@ -51,16 +68,68 @@ export default function App() {
   );
 
   useEffect(() => {
-    if (webcamStream && videoRef.current) {
-      const video = videoRef.current;
-
-      video.srcObject = null;
-      video.load();
+    const video = videoRef.current;
+    if (!video) return;
+
+    const cleanup = setupVideo(video, { stream: mediaStream ?? undefined, url: fileUrl });
+    return cleanup;
+  }, [mediaStream, fileUrl, setupVideo]);
+
+  const stopStreamTracks = (stream: MediaStream | null) => {
+    stream?.getTracks().forEach((t) => {
+      try {
+        t.stop();
+      } catch (e) {
+        // ignore
+      }
+    });
+  };
+
+  const handleSelectCamera = useCallback(() => {
+    // Move to permission flow; component will request permission
+    setAppState("requesting-permission");
+  }, []);
 
-      const cleanup = setupVideo(video, webcamStream);
-      return cleanup;
+  const handleSelectDisplay = useCallback(async () => {
+    try {
+      // Clean up previous
+      stopStreamTracks(mediaStream);
+      setMediaStream(null);
+      setFileUrl((prev: string | null) => {
+        if (prev) URL.revokeObjectURL(prev);
+        return null;
+      });
+
+      if (!navigator.mediaDevices?.getDisplayMedia) {
+        throw new Error("Screen capture not supported in this browser");
+      }
+
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: false,
+      });
+      setMediaStream(stream);
+      // Ensure we are on welcome where Start is visible
+      setAppState("welcome");
+    } catch (e) {
+      console.error("Failed to start display capture:", e);
+      // Stay on welcome; user can retry
     }
-  }, [webcamStream, setupVideo]);
+  }, [mediaStream]);
+
+  const handleSelectFile = useCallback((file: File) => {
+    // Clean up previous sources
+    stopStreamTracks(mediaStream);
+    setMediaStream(null);
+    setFileUrl((prev: string | null) => {
+      if (prev) URL.revokeObjectURL(prev);
+      return null;
+    });
+
+    const url = URL.createObjectURL(file);
+    setFileUrl(url);
+    setAppState("welcome");
+  }, [mediaStream]);
 
   const videoBlurState = useMemo(() => {
     switch (appState) {
@@ -81,25 +150,32 @@ export default function App() {
     <div className="App relative h-screen overflow-hidden">
       <div className="absolute inset-0 bg-gray-900" />
 
-      {webcamStream && (
-        <video
-          ref={videoRef}
-          autoPlay
-          muted
-          playsInline
-          className="absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-out"
-          style={{
-            filter: videoBlurState,
-            opacity: isVideoReady ? 1 : 0,
-          }}
-        />
-      )}
+      <video
+        ref={videoRef}
+        autoPlay
+        muted
+        playsInline
+        loop={Boolean(fileUrl)}
+        className="absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-out"
+        style={{
+          filter: videoBlurState,
+          opacity: isVideoReady ? 1 : 0,
+        }}
+      />
 
       {appState !== "captioning" && <div className="absolute inset-0 bg-gray-900/80 backdrop-blur-sm" />}
 
       {appState === "requesting-permission" && <WebcamPermissionDialog onPermissionGranted={handlePermissionGranted} />}
 
-      {appState === "welcome" && <WelcomeScreen onStart={handleStart} />}
+      {appState === "welcome" && (
+        <WelcomeScreen
+          onStart={handleStart}
+          onSelectCamera={handleSelectCamera}
+          onSelectDisplay={handleSelectDisplay}
+          onSelectFile={handleSelectFile}
+          isSourceReady={Boolean(mediaStream) || Boolean(fileUrl)}
+        />
+      )}
 
       {appState === "loading" && <LoadingScreen onComplete={handleLoadingComplete} />}
 

src/components/WelcomeScreen.tsx

@@ -2,12 +2,24 @@ import HfIcon from "./HfIcon";
 import GlassContainer from "./GlassContainer";
 import GlassButton from "./GlassButton";
 import { GLASS_EFFECTS } from "../constants";
+import type React from "react";
 
 interface WelcomeScreenProps {
   onStart: () => void;
+  onSelectCamera?: () => void;
+  onSelectDisplay?: () => void;
+  onSelectFile?: (file: File) => void;
+  isSourceReady?: boolean;
 }
 
-export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
+export default function WelcomeScreen({ onStart, onSelectCamera, onSelectDisplay, onSelectFile, isSourceReady }: WelcomeScreenProps) {
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file && onSelectFile) onSelectFile(file);
+    // Reset input so selecting the same file again re-triggers change
+    e.currentTarget.value = "";
+  };
+
   return (
     <div className="absolute inset-0 text-white flex items-center justify-center p-8">
       <div className="max-w-2xl w-full space-y-8">
@@ -33,18 +45,64 @@ export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
           </div>
         </GlassContainer>
 
-        {/* Webcam Status Card */}
+        {/* Source Selection Card */}
         <GlassContainer
           bgColor={GLASS_EFFECTS.COLORS.SUCCESS_BG}
           className="rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-200"
-          role="status"
-          aria-label="Camera status"
+          role="region"
+          aria-label="Video source selection"
         >
-          <div className="p-4">
-            <div className="flex items-center justify-center space-x-2">
-              <div className="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
-              <p className="text-green-400 font-medium">Camera ready</p>
+          <div className="p-6 flex flex-col items-center gap-4">
+            <div className="flex flex-wrap items-center justify-center gap-3">
+              <GlassButton
+                onClick={(e) => {
+                  e.preventDefault();
+                  onSelectCamera?.();
+                }}
+                className="px-4 py-3 rounded-2xl"
+                aria-label="Use Camera"
+              >
+                Use Camera
+              </GlassButton>
+              <GlassButton
+                onClick={(e) => {
+                  e.preventDefault();
+                  onSelectDisplay?.();
+                }}
+                className="px-4 py-3 rounded-2xl"
+                aria-label="Share Tab or Screen"
+              >
+                Share Tab/Screen
+              </GlassButton>
+              <div>
+                <input
+                  id="video-file-input"
+                  type="file"
+                  accept="video/*"
+                  onChange={handleFileChange}
+                  className="hidden"
+                />
+                <GlassButton
+                  onClick={(e) => {
+                    e.preventDefault();
+                    document.getElementById("video-file-input")?.click();
+                  }}
+                  className="px-4 py-3 rounded-2xl"
+                  aria-label="Upload Video"
+                >
+                  Upload Video
+                </GlassButton>
+              </div>
             </div>
+
+            <GlassButton
+              onClick={onStart}
+              className="px-8 py-4 rounded-2xl"
+              aria-label="Start live captioning with AI model"
+              disabled={!isSourceReady}
+            >
+              <span className="font-semibold text-lg">Start Live Captioning</span>
+            </GlassButton>
           </div>
         </GlassContainer>
 
@@ -104,16 +162,7 @@ export default function WelcomeScreen({ onStart }: WelcomeScreenProps) {
           </div>
         </GlassContainer>
 
-        {/* Start Button */}
         <div className="flex flex-col items-center space-y-4">
-          <GlassButton
-            onClick={onStart}
-            className="px-8 py-4 rounded-2xl"
-            aria-label="Start live captioning with AI model"
-          >
-            <span className="font-semibold text-lg">Start Live Captioning</span>
-          </GlassButton>
-
           <p className="text-sm text-gray-400 opacity-80">AI model will load when you click start</p>
         </div>
       </div>