captured image being stretched on browser resize

sorry for the lack of information. i found an issue where if i resize the browser in a mobile view, it takes a picture of that resized form and when i maximize the browser again, it is stretched and does not look good. i managed to fix it though, i just had to specify the specific width and height i want for my image component in the camera-provider so that its the same through out.

im unsure anymore on the other steps i've taken to fix the issue but i think that's the main one

functions i modified in camera-provider.tsx: const takePhoto = (): string | undefined => { if ( !playerRef.current || !canvasRef.current || !playerRef.current?.videoWidth || !playerRef.current?.videoHeight || !canvasRef.current?.getContext("2d") ) return; const videoWidth = playerRef.current.videoWidth; const videoHeight = playerRef.current.videoHeight; const canvasWidth = playerRef.current.offsetWidth; const canvasHeight = playerRef.current.offsetHeight;

    let sX = 0;
    let sY = 0;
    let sW = videoWidth;
    let sH = videoHeight;

    const videoAspectRatio = videoWidth / videoHeight;
    const canvasAspectRatio = canvasWidth / canvasHeight;

    if (videoAspectRatio > canvasAspectRatio) {
        sW = videoHeight * canvasAspectRatio;
        sX = (videoWidth - sW) / 2;
    } else if (videoAspectRatio < canvasAspectRatio) {
        sH = videoWidth / canvasAspectRatio;
        sY = (videoHeight - sH) / 2;
    }

    canvasRef.current.width = canvasWidth;
    canvasRef.current.height = canvasHeight;

    const context = canvasRef.current.getContext("2d");
    if (context && playerRef?.current) {
        context.drawImage(
            playerRef.current,
            sX,
            sY,
            sW,
            sH,
            0,
            0,
            canvasWidth,
            canvasHeight,
        );
    }

    const imgData = canvasRef.current.toDataURL("image/jpeg");

    return imgData;
};

initCameraStream :

        navigator.mediaDevices
            .getUserMedia({
                audio: false,
                video: {
                    deviceId: activeDeviceId
                        ? { exact: activeDeviceId }
                        : undefined,
                    // width: { min: 480, ideal: 480 }, // 4:3 aspect ratio for iPhone
                    // height: { min: 360, ideal: 360 },
                    // aspectRatio: { ideal: 1.3333333333 }, // 4:3 aspect ratio
                    width: { min: 320, ideal: 1080, max: 1080 },
                    height: { min: 566, ideal: 1350, max: 1350 },
                    aspectRatio: { ideal: 1.25 }, // Aspect ratio between 1.91:1 (0.523) and 4:5 (1.25)
                },
            })

Thank you for reporting the issue and sharing your solution! I would greatly appreciate your contribution. To ensure your fix is integrated into the project, I encourage you to fork the repository and create a pull request (PR) with your changes. Here's a step-by-step guide to help you through the process:

Fork the Repository:
- Click the "Fork" button in the upper right corner of the repository page. This will create a copy of the repository under your GitHub account.
Clone the Forked Repository:
- Open your terminal or command prompt.
- Clone your forked repository using the following command:
```
git clone https://github.com/your-username/capture-photo.git
```
- Replace your-username with your GitHub username.
Create a New Branch:
- Navigate to the repository directory:
```
cd capture-photo
```
- Create a new branch for your changes:
```
git checkout -b fix-image-stretch-issue
```

Make Your Changes:

Open the camera-provider.tsx file in your preferred code editor.

Apply the changes you mentioned:

const takePhoto = (): string | undefined => {
if (
 !playerRef.current ||
 !canvasRef.current ||
 !playerRef.current?.videoWidth ||
 !playerRef.current?.videoHeight ||
 !canvasRef.current?.getContext("2d")
) return;

const videoWidth = playerRef.current.videoWidth;
const videoHeight = playerRef.current.videoHeight;
const canvasWidth = playerRef.current.offsetWidth;
const canvasHeight = playerRef.current.offsetHeight;

let sX = 0;
let sY = 0;
let sW = videoWidth;
let sH = videoHeight;

const videoAspectRatio = videoWidth / videoHeight;
const canvasAspectRatio = canvasWidth / canvasHeight;

if (videoAspectRatio > canvasAspectRatio) {
 sW = videoHeight * canvasAspectRatio;
 sX = (videoWidth - sW) / 2;
} else if (videoAspectRatio < canvasAspectRatio) {
 sH = videoWidth / canvasAspectRatio;
 sY = (videoHeight - sH) / 2;
}

canvasRef.current.width = canvasWidth;
canvasRef.current.height = canvasHeight;

const context = canvasRef.current.getContext("2d");
if (context && playerRef?.current) {
 context.drawImage(
   playerRef.current,
   sX,
   sY,
   sW,
   sH,
   0,
   0,
   canvasWidth,
   canvasHeight,
 );
}

const imgData = canvasRef.current.toDataURL("image/jpeg");

return imgData;
};

const initCameraStream = () => {
navigator.mediaDevices
 .getUserMedia({
   audio: false,
   video: {
     deviceId: activeDeviceId ? { exact: activeDeviceId } : undefined,
     width: { min: 320, ideal: 1080, max: 1080 },
     height: { min: 566, ideal: 1350, max: 1350 },
     aspectRatio: { ideal: 1.25 },
   },
 })
 .then((stream) => {
   // Your existing code to handle the stream
 });
};

Commit Your Changes:
- Add your changes to the staging area:
```
git add camera-provider.tsx
```
- Commit your changes with a meaningful message:
```
git commit -m "Fix image stretch issue on browser resize."
```
Push Your Changes:
- Push your changes to your forked repository:
```
git push origin fix-image-stretch-issue
```
Create a Pull Request:
- Navigate to your forked repository on GitHub.
- Click the "Compare & pull request" button.
- Submit the pull request. Thanks for your contribution

UretzkyZvi / capture-photo

captured image being stretched on browser resize #1