Fix the Video detection Frontend

Project/Frontend/SignConnectPlus/src/pages/emotion-detection/emotion-audio-detection/list/list.tsx

@@ -3,6 +3,8 @@ import MainCard from 'components/MainCard';
 import ScrollX from 'components/ScrollX';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
+// import KeyboardVoiceIcon from '@mui/icons-material/KeyboardVoice';
+import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
 // import MicIcon from '@mui/icons-material/Mic'; // Import MicIcon from the correct path
 // import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'; // Import CloudUploadOutlinedIcon from the correct path
 
@@ -20,14 +22,14 @@ const List = () => {
                                 <Button
                                     variant="contained"
                                     color="primary"
-                                    // startIcon={<CloudUploadOutlinedIcon />}
+                                    startIcon={<UploadOutlined />}
                                 >
                                     Upload
                                 </Button>
                                 <Button
                                     variant="contained"
                                     color="primary"
-                                    // startIcon={<CloudUploadOutlinedIcon />}
+                                    // startIcon={<KeyboardVoiceIcon />}
                                 >
                                     Record
                                 </Button>

Project/Frontend/SignConnectPlus/src/pages/emotion-detection/emotion-video-detection/list/list.tsx

-
+import React, { useState, useRef } from 'react';
 import MainCard from 'components/MainCard';
 import ScrollX from 'components/ScrollX';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
-// import MicIcon from '@mui/icons-material/Mic'; // Import MicIcon from the correct path
-// import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'; // Import CloudUploadOutlinedIcon from the correct path
+import VideoCameraOutlined from '@ant-design/icons/lib/icons/VideoCameraOutlined';
+import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
+// import WebcamOutlinedIcon from '@mui/icons-material/WebcamOutlined';
+
 
 const List = () => {
+    const [selectedFile, setSelectedFile] = useState<File | null>(null);
+    const [isLive, setIsLive] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const videoRef = useRef<HTMLVideoElement | null>(null);
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files && event.target.files[0]) {
+            setSelectedFile(event.target.files[0]);
+        }
+    };
+
+    const handleUploadButtonClick = () => {
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+
+    const handleLiveButtonClick = async () => {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+            if (videoRef.current) {
+                videoRef.current.srcObject = stream;
+                videoRef.current.play(); // Start playing the live camera feed
+            }
+            setIsLive(true);
+        } catch (error) {
+            console.error('Error accessing camera:', error);
+        }
+    };
+    
+
     return (
         <MainCard content={false}>
             <ScrollX>
@@ -16,18 +49,43 @@ const List = () => {
                     <h2>Upload or Live</h2>
                         <MainCard>
                             <div style={{ textAlign: 'center' }}>
-                                <h2>Upload Your Files</h2>
+                                
+                                <input
+                                    type="file"
+                                    accept="video/*"
+                                    ref={fileInputRef}
+                                    onChange={handleFileChange}
+                                    style={{ display: 'none' }}
+                                />
+                                {isLive ? (
+                                    <video
+                                        ref={videoRef}
+                                        autoPlay
+                                        playsInline
+                                        width="100%"
+                                    />
+                                ) : (
+                                    selectedFile && (
+                                        <video
+                                            controls
+                                            width="100%"
+                                            src={URL.createObjectURL(selectedFile)}
+                                        />
+                                    )
+                                )}
                                 <Button
                                     variant="contained"
                                     color="primary"
-                                    // startIcon={<CloudUploadOutlinedIcon />}
+                                    startIcon={<UploadOutlined />}
+                                    onClick={handleUploadButtonClick}
                                 >
                                     Upload
                                 </Button>
                                 <Button
                                     variant="contained"
                                     color="primary"
-                                    // startIcon={<CloudUploadOutlinedIcon />}
+                                    startIcon={<VideoCameraOutlined />}
+                                    onClick={handleLiveButtonClick}
                                 >
                                     Live
                                 </Button>