Source: pages-sections/Foodhealth-sections/CameraInput.js

import { useRef, useState, useCallback } from "react";
import Webcam from "react-webcam";
import Button from "/components/CustomButtons/Button.js";
import GridContainer from "/components/Grid/GridContainer.js";
import GridItem from "/components/Grid/GridItem.js";
import Grid from "@material-ui/core/Grid";

const videoConstraints = {
  width: 720,
  height: 360,
  facingMode: "user",
};

/**
 * The function `CameraInput` is a React component that allows users to capture images using a webcam
 * and provides options to view, upload, and delete the captured images.
 * @returns The `CameraInput` component is being returned. It consists of conditional rendering based
 * on the `isCaptureEnable` and `url` states. If `isCaptureEnable` is false, it displays a button to
 * enable capturing. If `isCaptureEnable` is true and `url` is null, it shows the webcam component for
 * capturing an image. If `isCaptureEnable` is true and
 */
export function CameraInput({ onImageCapture }) {
  const [isCaptureEnable, setCaptureEnable] = useState(false);
  const webcamRef = useRef(null);
  const [url, setUrl] = useState(null);
  const [upload, setUpload] = useState(false);
  const capture = useCallback(() => {
    const imageSrc = webcamRef.current?.getScreenshot();
    if (imageSrc) {
      setUrl(imageSrc);
      onImageCapture(imageSrc);
    }
  }, [webcamRef]);

  return (
    <>
      {!isCaptureEnable && (
        <Button color="info" onClick={() => setCaptureEnable(true)}>
          Take Picture
        </Button>
      )}
      {isCaptureEnable && !url && (
        <>
          <Grid
            container
            direction="column"
            justifyContent="center"
            alignItems="center"
            spacing={2}
          >
            <GridItem xs={12}>
              <Grid
                container
                justifyContent="center"
                spacing={2}
                direction="row"
              >
                <Button color="danger" onClick={() => setCaptureEnable(false)}>
                  end{" "}
                </Button>
                <Button color="success" onClick={capture}>
                  capture
                </Button>
              </Grid>
            </GridItem>
            <GridItem xs={12}>
              <div>
                <Webcam
                  audio={false}
                  width={540}
                  height={360}
                  ref={webcamRef}
                  screenshotFormat="image/jpeg"
                  videoConstraints={videoConstraints}
                />
              </div>
            </GridItem>
          </Grid>
        </>
      )}
      {isCaptureEnable && url && (
        <>
          <Grid
            container
            direction="column"
            justifyContent="center"
            alignItems="center"
            spacing={2}
          >
            <Grid container justifyContent="center" spacing={2} direction="row">
              <GridItem xs={12}>
                <Button color="danger" onClick={() => setCaptureEnable(false)}>
                  end{" "}
                </Button>
                <Button color="warning" onClick={() => setUpload(true)}>
                  Upload
                </Button>
                <Button
                  color="rose"
                  onClick={() => {
                    setUrl(null);
                  }}
                >
                  delete
                </Button>
              </GridItem>
            </Grid>
          </Grid>
        </>
      )}
    </>
  );
}