From a0bf474e55998c19cc6b459d98e71fe1737bbcef Mon Sep 17 00:00:00 2001
From: Shubham Kumar <shubham.24bcs10320@sst.scaler.com>
Date: Thu, 4 Dec 2025 19:37:27 +0530
Subject: [PATCH] WEB-476-fix(clients): preserve aspect ratio when capturing
 client image (#2852)

* fix(clients): preserve aspect ratio when capturing client image

* Remove aspect-ratio and change object-fit: cover to object-fit: contain
---
 .../capture-image-dialog.component.html       |  2 +-
 .../capture-image-dialog.component.scss       | 10 ++++++++
 .../capture-image-dialog.component.ts         | 24 ++++++++++++++++---
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
index 3e4f08ee5..bd85449d8 100644
--- a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
+++ b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.html
@@ -1,7 +1,7 @@
 <div class="layout-column gap-2px">
   <h1 mat-dialog-title align="center">{{ 'labels.heading.Capture Client Image' | translate }}</h1>
 
-  <video #video width="540" height="480" autoplay></video>
+  <video #video class="capture-video" autoplay></video>
 
   <!-- Using a class will break renderer changes -->
   <canvas #canvas [ngStyle]="{ display: 'none' }"></canvas>
diff --git a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.scss b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.scss
index e69de29bb..613b35c1b 100644
--- a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.scss
+++ b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.scss
@@ -0,0 +1,10 @@
+@use '../../../../../assets/styles/colours' as colors;
+
+.capture-video {
+  width: 100%;
+  max-width: 640px;
+  height: auto;
+  object-fit: contain;
+  border-radius: 4px;
+  background-color: colors.$black;
+}
diff --git a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts
index 31840b698..0408b4f80 100644
--- a/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts
+++ b/src/app/clients/clients-view/custom-dialogs/capture-image-dialog/capture-image-dialog.component.ts
@@ -60,8 +60,13 @@ export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
    */
   startCamera() {
     if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+      const videoConstraints: MediaTrackConstraints = {
+        width: { ideal: 640 },
+        height: { ideal: 480 },
+        facingMode: 'user'
+      };
       navigator.mediaDevices
-        .getUserMedia({ video: true })
+        .getUserMedia({ video: videoConstraints })
         .then((stream: MediaStream) => {
           this.renderer.setProperty(this.video.nativeElement, 'srcObject', stream);
           this.video.nativeElement.play();
@@ -101,13 +106,26 @@ export class CaptureImageDialogComponent implements AfterViewInit, OnDestroy {
 
   /**
    * Captures the image by drawing video state on canvas, then converts canvas state to data URL.
+   * Uses actual video dimensions to prevent aspect ratio distortion.
    * See https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL for details.
    */
   capture() {
     this.isCaptured = true;
     this.video.nativeElement.pause();
-    this.canvas.nativeElement.getContext('2d').drawImage(this.video.nativeElement, 0, 0, 150, 150);
-    this.clientImageDataURL = this.canvas.nativeElement.toDataURL();
+
+    // Get actual video stream dimensions to preserve aspect ratio
+    const videoWidth = this.video.nativeElement.videoWidth;
+    const videoHeight = this.video.nativeElement.videoHeight;
+
+    // Set canvas dimensions to match video stream
+    this.canvas.nativeElement.width = videoWidth;
+    this.canvas.nativeElement.height = videoHeight;
+
+    // Draw the video frame at full resolution without distortion
+    this.canvas.nativeElement.getContext('2d').drawImage(this.video.nativeElement, 0, 0, videoWidth, videoHeight);
+
+    // Convert to data URL with JPEG format for smaller file size
+    this.clientImageDataURL = this.canvas.nativeElement.toDataURL('image/jpeg', 0.9);
   }
 
   /**