I' using react webcam to take four pictures in my web, however, when i use multiople instances, the page take some time to respond and on mnobile doesnt even show.
How I could improve the take picture process
here is my code:
const webcamRef = useRef<Webcam>(null);
const [imgSrcFrontal, setImgSrcFrontal] = useState<string | null>(null);
const captureFront = React.useCallback(() => {
const imageSrcFront = webcamRef.current!.getScreenshot();
setImgSrcFrontal(imageSrcFront);
}, [webcamRefFrontal, setImgSrcFrontal]);
return(<>
</Label>
{imgSrcFrontal && (
<Image src={imgSrcFrontal} width="50%" sx={{ borderRadius: 1.5 }} />
)}
</Box>
<Webcam
audio={false}
ref={webcamRef}
screenshotFormat="image/jpeg"
videoConstraints={videoConstraintsVertical}
width="50%"
/>
<IconButton color="error" aria-label="upload picture" component="span" onClick={captureFront}>
<PhotoCamera />
</IconButton>
</>
)
