Commit 5b04c61f authored by supundileepa00's avatar supundileepa00

fix: react-media-recorder blob storage not defined issue. Used react-webcam instead

parent db63f5e8
...@@ -26,6 +26,7 @@ import { ...@@ -26,6 +26,7 @@ import {
AboutTeam, AboutTeam,
AboutVision, AboutVision,
AboutTestimonials, AboutTestimonials,
WebcamStreamCapture,
} from '../sections/slToText'; } from '../sections/slToText';
import { Upload } from 'src/components/upload'; import { Upload } from 'src/components/upload';
import { useCallback, useRef, useState } from 'react'; import { useCallback, useRef, useState } from 'react';
...@@ -34,8 +35,10 @@ import EmergencyRecordingIcon from '@mui/icons-material/EmergencyRecording'; ...@@ -34,8 +35,10 @@ import EmergencyRecordingIcon from '@mui/icons-material/EmergencyRecording';
import { useSnackbar } from 'notistack'; import { useSnackbar } from 'notistack';
import useCopyToClipboard from 'src/hooks/useCopyToClipboard'; import useCopyToClipboard from 'src/hooks/useCopyToClipboard';
import Iconify from 'src/components/iconify/Iconify'; import Iconify from 'src/components/iconify/Iconify';
import { useReactMediaRecorder } from 'react-media-recorder';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
const useReactMediaRecorder = () =>
// eslint-disable-next-line react-hooks/rules-of-hooks
import('react-media-recorder');
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
...@@ -169,8 +172,54 @@ export default function AboutPage() { ...@@ -169,8 +172,54 @@ export default function AboutPage() {
</Box> </Box>
) : ( ) : (
// Video Capture // Video Capture
<Box sx={{ flexGrow: 1 }}>
<Card>
<CardHeader title="Upload a video containing Sign Language" />
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Card>
<CardContent>
<WebcamStreamCapture />
</CardContent>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card sx={{ p: 5 }}>
<Box
display="grid"
gridTemplateColumns={{ xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }}
gap={5}
>
<Stack spacing={2}>
<Typography variant="overline" sx={{ color: 'text.secondary' }}>
on Change
</Typography>
<TextField
fullWidth
value={value}
onChange={handleChange}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<IconButton onClick={() => onCopy(value)}>
<Iconify icon="eva:copy-fill" width={24} />
</IconButton>
</Tooltip>
</InputAdornment>
),
}}
/>
</Stack>
</Box>
</Card>
</Grid>
</Grid>
</Card>
</Box>
// <RecordView /> // <RecordView />
<div>sdsd</div>
)} )}
</> </>
); );
...@@ -180,7 +229,6 @@ const RecordView = () => { ...@@ -180,7 +229,6 @@ const RecordView = () => {
const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({ const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({
video: true, video: true,
}); });
return ( return (
<div> <div>
<p>{status}</p> <p>{status}</p>
......
import React from 'react';
import Webcam from 'react-webcam';
import { Box, Button } from '@mui/material';
const WebcamStreamCapture = () => {
const webcamRef = React.useRef(null);
const mediaRecorderRef = React.useRef(null);
const [capturing, setCapturing] = React.useState(false);
const [recordedChunks, setRecordedChunks] = React.useState([]);
const [mediaBlobUrl, setMediaBlobUrl] = React.useState([]);
const handleStartCaptureClick = React.useCallback(() => {
setCapturing(true);
mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, {
mimeType: 'video/webm',
});
mediaRecorderRef.current.addEventListener('dataavailable', handleDataAvailable);
mediaRecorderRef.current.start();
}, [webcamRef, setCapturing, mediaRecorderRef]);
const handleDataAvailable = React.useCallback(
({ data }) => {
if (data.size > 0) {
setRecordedChunks((prev) => prev.concat(data));
}
},
[setRecordedChunks]
);
const handleStopCaptureClick = React.useCallback(() => {
mediaRecorderRef.current.stop();
setCapturing(false);
}, [mediaRecorderRef, webcamRef, setCapturing]);
const handleDownload = React.useCallback(() => {
if (recordedChunks.length) {
const blob = new Blob(recordedChunks, {
type: 'video/mp4',
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
a.href = url;
a.download = 'user-recording.mp4';
a.click();
window.URL.revokeObjectURL(url);
setRecordedChunks([]);
}
}, [recordedChunks]);
return (
<>
<Webcam audio={false} ref={webcamRef} />
{capturing ? (
<Button onClick={handleStopCaptureClick}>Stop Capture</Button>
) : (
<Button onClick={handleStartCaptureClick}>Start Capture</Button>
)}
{recordedChunks.length > 0 && <Button onClick={handleDownload}>Download</Button>}
<video src={mediaBlobUrl} controls autoPlay loop />
</>
);
};
export default WebcamStreamCapture;
// https://www.npmjs.com/package/react-webcam
...@@ -3,3 +3,4 @@ export { default as AboutWhat } from './AboutWhat'; ...@@ -3,3 +3,4 @@ export { default as AboutWhat } from './AboutWhat';
export { default as AboutTeam } from './AboutTeam'; export { default as AboutTeam } from './AboutTeam';
export { default as AboutVision } from './AboutVision'; export { default as AboutVision } from './AboutVision';
export { default as AboutTestimonials } from './AboutTestimonials'; export { default as AboutTestimonials } from './AboutTestimonials';
export { default as WebcamStreamCapture } from './WebcamStreamCapture';
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