I'm making simple camera component in React, with functionality similar to those from Messenger or Snapchat. I used CSS to make video stream responsive and implemented drawImage function to capture it. The problem is that it captures whole range of camera instead of viewport only. The difference is mostly seen when taking a picture on mobile vertically, because although video stream is cropped, captured image shows cropped parts too and is condensed. I know it propably can be fixed with changing drawImage() parameters but I didn't find working solution yet.

App.js

  const getVideo = () => {
    navigator.mediaDevices
      .getUserMedia({
        video: { width: window.screen.width, height: window.screen.height}
      })
      .then(stream => {
        let video = videoRef.current;
        video.srcObject = stream;
        video.play();
      })
      .catch(err => {
        console.error(err);
      })
  }

  const takePhoto = () => {
    const width =  window.innerWidth;
    const height =  window.innerHeight;

    let video = videoRef.current;
    let photo = photoRef.current;

    photo.width = width;
    photo.height = height;

    let ctx = photo.getContext('2d');
    ctx.drawImage(video, 0, 0, width, height);
    setHasPhoto(true)
  }

app.css

.camera video {
  width: 100%;
  object-fit: cover;
  height: 100vh;
}