How to avoid failed to acquire camera feed

Question

I am trying to replicate Mediapipe selfie segmentation in React and I get failed to acquire camera feed. How can I get camera feed up and running in Mediapipe?

This is my code :

function App() {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);

  React.useEffect(() => {
    canvasCtx = canvasRef.current.getContext("2d");
    navigator.mediaDevices.getUserMedia({ video: true }).then((camRec) => {
      webcamRef.current.srcObject = camRec;
      // webcamRef.current.onloadedmetadata = (e) => {
      //   webcamRef.current.play();
      // };
    });
    const selfieSegmentation = new SelfieSegmentation({
      locateFile: (file) => {
        return `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`;
      }
    });
    selfieSegmentation.setOptions({
      modelSelection: 1
    });

    selfieSegmentation.onResults(onResults);

    console.log(webcamRef.current, canvasRef.current.width);
    if (
      typeof webcamRef.current !== "undefined" &&
      webcamRef.current !== null
    ) {
      const camera = new Camera(webcamRef.current, {
        onFrame: async () => {
          await selfieSegmentation.send({ image: webcamRef.current });
        },
        width: 640,
        height: 480
      });
      camera.start();
    }
  }, []);

to produce : link

Answer 1

It turns out the width and height of the camera must match your camera quality. In my case I had to change those numbers to these :

Okay I fixed this. the problem was width and height

   camera = new Camera(webcamRef.current, {
        onFrame: async () => {
          await selfieSegmentation.send({ image: webcamRef.current });
        },
        width: 1280,
        height: 720,
      });