Open nishadtu opened 5 months ago
import React, { useEffect, useState } from "react"; import Webcam from "react-webcam"; import axios from 'axios'; // import {BaseUrl} from '../../utils/constant'; // import { FilePond, File, registerPlugin } from 'react-filepond' const FACING_MODE_USER = "user"; const FACING_MODE_ENVIRONMENT = "environment"; const videoConstraints = { aspectRatio: 0.6666666667, facingMode: 'user', width: { min: 300 }, height: { min: 500 }, }; const audioConstraints = { suppressLocalAudioPlayback: true, noiseSuppression: true, echoCancellation: true, }; const WebcamStreamCapture = () => { const webcamRef = React.useRef(null); const mediaRecorderRef = React.useRef(null); const [capturing, setCapturing] = React.useState(false); const [recordedChunks, setRecordedChunks] = React.useState([]); const [videoSrc, setVideoSrc] = React.useState(null); const isInitialMount = React.useRef(true); const [facingMode, setFacingMode] = React.useState(FACING_MODE_USER); const [startButton, setstartButton] = useState("Start Video"); useEffect(() => { if (isInitialMount.current) { isInitialMount.current = false; } else { if (!capturing) { // console.log('running handleDownload') handleDownload(); } } }, [recordedChunks]) const handleClick = React.useCallback(() => { setFacingMode( prevState => prevState === FACING_MODE_USER ? FACING_MODE_ENVIRONMENT : FACING_MODE_USER ); console.log(facingMode); }, []); const handleStartCaptureClick = React.useCallback(() => { setCapturing(true); mediaRecorderRef.current = new MediaRecorder(webcamRef.current.stream, { mimeType: "video/webm" }); mediaRecorderRef.current.addEventListener( "dataavailable", handleDataAvailable ); mediaRecorderRef.current.start(); console.log("mediaRecorderRef.current.state", mediaRecorderRef.current.state); // "recording" setTimeout(() => { mediaRecorderRef.current.stop(); setCapturing(false); setstartButton("Retake Video"); console.log("mediaRecorderRef.current", mediaRecorderRef.current); // "recording stop" console.log("mediaRecorderRef.current.state", mediaRecorderRef.current.state); // "recording stop" }, 5000); }, [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); setstartButton("Retake Video"); console.log("mediaRecorderRef.current", mediaRecorderRef.current); // "recording stop" console.log("mediaRecorderRef.current.state", mediaRecorderRef.current.state); // "recording stop" }, [mediaRecorderRef, webcamRef, setCapturing]); const handleDownload = React.useCallback(() => { if (recordedChunks.length) { const blob = new Blob(recordedChunks, { type: "video/webm" }); const url = URL.createObjectURL(blob); const video = document.getElementById("video-replay"); video.src = url } }, [recordedChunks]); const handleSave = React.useCallback(() => { if (recordedChunks.length) { const blob = new Blob(recordedChunks, { type: "video/webm" }); const url = URL.createObjectURL(blob); const formData = new FormData(); var file = new File([blob], "webm"); formData.append("file", file); const apiUrl = 'https://provisionevents.co.uk/2024/video-app/video.php'; // axios.post("2024/video-app/upload/", formData); console.log(formData); const config = { headers: { 'content-type': 'multipart/form-data', }, }; axios.post(apiUrl, formData, config) .then((response) => { // handle the response console.log(response); console.log("Video saved"); }) .catch((error) => { // handle errors console.log(error); console.log("video error "); }); } }, [recordedChunks]); return ( <> <div className="d-flex flex-column align-items-center"> <Webcam audio={true} muted={true} ref={webcamRef} videoConstraints={{ videoConstraints, facingMode }} audioConstraints={audioConstraints} height={400} width={500} /> <video id="video-replay" height="400" width="500" controls></video> <br></br> <button onClick={handleClick}>Switch camera</button> {capturing ? ( <button className="btn btn-danger" onClick={handleStopCaptureClick}>Stop Capture</button> ) : ( <button className="btn btn-danger" onClick={handleStartCaptureClick}>{startButton}</button> )} {recordedChunks.length > 0 && ( <div> <input type="file" name="file" id="file" style={{ display : 'none'}}/> <button onClick={handleSave}>Upload to server</button> </div> )} </div> {/* from vilidation : */} </> ); }; export default WebcamStreamCapture
Same problem here as well. Any idea how to fix it? Best regards. 🤔
@digwa-ing how did you resolved this ?