Commit c565bb29 authored by Ridma Dilshan's avatar Ridma Dilshan

Fix the Video detection Frontend

parent a47e9457
...@@ -3,6 +3,8 @@ import MainCard from 'components/MainCard'; ...@@ -3,6 +3,8 @@ import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX'; import ScrollX from 'components/ScrollX';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button'; 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 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 CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'; // Import CloudUploadOutlinedIcon from the correct path
...@@ -20,14 +22,14 @@ const List = () => { ...@@ -20,14 +22,14 @@ const List = () => {
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
// startIcon={<CloudUploadOutlinedIcon />} startIcon={<UploadOutlined />}
> >
Upload Upload
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
// startIcon={<CloudUploadOutlinedIcon />} // startIcon={<KeyboardVoiceIcon />}
> >
Record Record
</Button> </Button>
......
import React, { useState, useRef } from 'react';
import MainCard from 'components/MainCard'; import MainCard from 'components/MainCard';
import ScrollX from 'components/ScrollX'; import ScrollX from 'components/ScrollX';
import Grid from '@mui/material/Grid'; import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
// import MicIcon from '@mui/icons-material/Mic'; // Import MicIcon from the correct path import VideoCameraOutlined from '@ant-design/icons/lib/icons/VideoCameraOutlined';
// import CloudUploadOutlinedIcon from '@mui/icons-material/CloudUploadOutlined'; // Import CloudUploadOutlinedIcon from the correct path import UploadOutlined from '@ant-design/icons/lib/icons/UploadOutlined';
// import WebcamOutlinedIcon from '@mui/icons-material/WebcamOutlined';
const List = () => { 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 ( return (
<MainCard content={false}> <MainCard content={false}>
<ScrollX> <ScrollX>
...@@ -16,18 +49,43 @@ const List = () => { ...@@ -16,18 +49,43 @@ const List = () => {
<h2>Upload or Live</h2> <h2>Upload or Live</h2>
<MainCard> <MainCard>
<div style={{ textAlign: 'center' }}> <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 <Button
variant="contained" variant="contained"
color="primary" color="primary"
// startIcon={<CloudUploadOutlinedIcon />} startIcon={<UploadOutlined />}
onClick={handleUploadButtonClick}
> >
Upload Upload
</Button> </Button>
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
// startIcon={<CloudUploadOutlinedIcon />} startIcon={<VideoCameraOutlined />}
onClick={handleLiveButtonClick}
> >
Live Live
</Button> </Button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment