A create a gym web app where user click his picture if user inside the 5m of radius then present mark in db and show on web app .

see the first picture

in which user click on capture then a different window appear and run the camera stream but i want to show video stram in circle

after clicking the picture show two button “Retake” and “Submit” if user click on retake btn then must camera on again
if user click on submit button then image and location send to the db.

Note :-
I already do the work related to location you don’t worry.

[enter image description here](https://i.sstatic.net/9ysU83KN.png)

import { useState, useEffect } from "react";
import axios from "axios";

function MyLocation() {
  const [position, setPosition] = useState({ latitude: null, longitude: null });
  const [image, setImage] = useState(null);
  const [showCamera, setShowCamera] = useState(false);
  const [showCaptureButton, setShowCaptureButton] = useState(true);
  const [showRetakeSubmitButtons, setShowRetakeSubmitButtons] = useState(false);

  useEffect(() => {
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(function (position) {
        setPosition({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
        });
      });
    } else {
      console.log("Geolocation is not available in your browser.");
    }
  }, []);

  const takePicture = () => {
    navigator.mediaDevices
      .getUserMedia({ video: true })
      .then((stream) => {
        const video = document.createElement("video");
        const canvas = document.createElement("canvas");

        video.autoplay = true;
        document.body.appendChild(video);
        video.srcObject = stream;

        const context = canvas.getContext("2d");
        video.addEventListener("loadedmetadata", () => {
          canvas.width = video.videoWidth;
          canvas.height = video.videoHeight;
        });

        const captureImage = () => {
          context.drawImage(video, 0, 0, canvas.width, canvas.height);
          const imgDataUrl = canvas.toDataURL("image/png");
          setImage(imgDataUrl);
          stream.getTracks().forEach((track) => track.stop());
          document.body.removeChild(video);
          document.body.removeChild(canvas);
          setShowCaptureButton(false);
          setShowRetakeSubmitButtons(true);
        };

        const retakePicture = () => {
          stream.getTracks().forEach((track) => track.stop());
          document.body.removeChild(video);
          document.body.removeChild(canvas);
          setShowCaptureButton(true);
          setShowRetakeSubmitButtons(false);
          takePicture(); 
        };

        const submitPicture = () => {
          if (image && position.latitude && position.longitude) {
          
            const formData = new FormData();
            formData.append("image", image);
            formData.append("latitude", position.latitude);
            formData.append("longitude", position.longitude);

            axios
              .post("YOUR_BACKEND_URL", formData)
              .then((response) => {
                console.log("Image submitted:", response.data);
              })
              .catch((error) => {
                console.error("Error submitting image:", error);
              });

            
            setImage(null);
            setShowCamera(false);
            setShowCaptureButton(true);
            setShowRetakeSubmitButtons(false);
          }
        };

        const submitButton = document.createElement("button");
        submitButton.innerText = "Submit";
        submitButton.addEventListener("click", submitPicture);

        const retakeButton = document.createElement("button");
        retakeButton.innerText = "Retake";
        retakeButton.addEventListener("click", retakePicture);

        const buttonsContainer = document.createElement("div");
        buttonsContainer.classList.add("flex", "justify-around", "mt-4");
        buttonsContainer.appendChild(submitButton);
        buttonsContainer.appendChild(retakeButton);

        const captureButton = document.createElement("button");
        captureButton.innerText = "Capture";
        captureButton.classList.add(
          "bg-blue-500",
          "text-white",
          "px-4",
          "py-2",
          "rounded-full"
        );
        captureButton.addEventListener("click", captureImage);

        const container = document.createElement("div");
        container.classList.add("flex", "flex-col", "items-center", "mt-8");
        container.appendChild(video);
        container.appendChild(captureButton);
        container.appendChild(buttonsContainer);

        document.body.appendChild(container);
      })
      .catch((error) => {
        console.error("Error accessing the camera:", error);
      });
  };

  return (
    <div className="flex items-center justify-center h-screen">
      <div className="bg-transparent p-4 rounded-lg border-2 border-dashed border-pink-800 text-white flex flex-col justify-center items-start">
        <h1 className="mx-auto my-5">
          Take a selfie to verify your identity!
        </h1>
        <div className="rounded-full h-[300px] w-[300px] bg-gray-400 mx-auto px-auto">
          {image && (
            <img
              src={image}
              alt="Captured"
              className="rounded-full h-[300px] w-[300px] object-cover"
            />
          )}
        </div>

        {showCaptureButton && (
          <div className="btn-div mx-auto my-2">
            <button
              onClick={takePicture}
              className="bg-pink-600 hover:bg-pink-900 rounded-lg border-none px-8 py-2 font-bold"
            >
              Capture
            </button>
          </div>
        )}

        {showRetakeSubmitButtons && (
          <div className="btn-div flex justify-between gap-x-3 w-full">
            <button
              onClick={retakePicture}
              className="bg-pink-600 hover:bg-pink-900 rounded-lg border-none px-8 py-2 font-bold"
            >
              Retake
            </button>
            <button
              onClick={submitPicture}
              className="bg-pink-600 hover:bg-pink-900 rounded-lg border-none px-8 py-2 font-bold"
            >
              Submit
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

export default MyLocation;

in which user click on capture then a different window appear and run the camera stream but i want to show video stram in circle

after clicking the picture show two button “Retake” and “Submit” if user click on retake btn then must camera on again
if user click on submit button then image and location send to the db.