captured image being stretched on browser resize

[fancybaby404]

No description provided.

[UretzkyZvi]

Hey, could you specify more details, thanks

[fancybaby404]

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)
				},
			})

[UretzkyZvi]

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:

1. 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.

2. 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.

3. 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

4. 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
         });
     };

5. 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."

6. Push Your Changes:

   • Push your changes to your forked repository:

     git push origin fix-image-stretch-issue

7. 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