I integrated a webcam capture file in my application while working in ReactJS. I'd like to know if there's any way that the captured image gets saved in a particular code directory when I click the button. The code looks something like this :
import React, { useState } from 'react';
import Webcam from "react-webcam";
const videoConstraints = {
width: 220,
height: 200,
facingMode: "user"
};
const WebcamCapture = () => {
const [image,setImage]=useState('');
const webcamRef = React.useRef(null);
const capture = React.useCallback(
() => {
const imageSrc = webcamRef.current.getScreenshot();
setImage(imageSrc)
});
return (
<div className="webcam-container">
<div className="webcam-img">
{image == '' ? <Webcam
audio={false}
height={200}
ref={webcamRef}
screenshotFormat="image/jpeg"
width={220}
videoConstraints={videoConstraints}
/> : <img src={image} />}
</div>
<div>
{image != '' ?
<button onClick={(e) => {
e.preventDefault();
setImage('')
}}
className="webcam-btn">
Retake Image</button> :
<button onClick={(e) => {
e.preventDefault();
capture();
}}
className="webcam-btn">Capture</button>
}
</div>
</div>
);
};
export default WebcamCapture;