From 2f0119f4cae704976c29b1e3634c54d8fae9dd95 Mon Sep 17 00:00:00 2001
From: thaddmt <68032955+thaddmt@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:59:45 -0700
Subject: [PATCH] fix(liveness): use video stream dimensions instead of videoEl
 dimensions (#5798)

* fix(liveness): use video stream dimensions instead of videoEl dimensions

* Create curly-readers-reflect.md
---
 .changeset/curly-readers-reflect.md                    |  5 +++++
 .../service/utils/streamProvider.ts                    | 10 ++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/curly-readers-reflect.md

diff --git a/.changeset/curly-readers-reflect.md b/.changeset/curly-readers-reflect.md
new file mode 100644
index 00000000000..73c9c70b2e5
--- /dev/null
+++ b/.changeset/curly-readers-reflect.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+fix(liveness): use video stream dimensions instead of videoEl dimensions
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts
index fe84fc55470..eb53d785fca 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/utils/streamProvider.ts
@@ -60,7 +60,7 @@ export class LivenessStreamProvider {
   private _reader!: ReadableStreamDefaultReader;
   private videoEl: HTMLVideoElement;
   private _client!: RekognitionStreamingClient;
-  private _stream: MediaStream;
+  private stream: MediaStream;
   private initPromise: Promise<void>;
 
   constructor({
@@ -74,7 +74,7 @@ export class LivenessStreamProvider {
   }: StreamProviderArgs) {
     this.sessionId = sessionId;
     this.region = region;
-    this._stream = stream;
+    this.stream = stream;
     this.videoEl = videoEl;
     this.videoRecorder = new VideoRecorder(stream);
     this.credentialProvider = credentialProvider;
@@ -198,13 +198,15 @@ export class LivenessStreamProvider {
       this.videoRecorder.videoStream
     )();
 
+    const mediaSettings = this.stream.getTracks()[0].getSettings();
+
     const response = await this._client.send(
       new StartFaceLivenessSessionCommand({
         ChallengeVersions: 'FaceMovementAndLightChallenge_1.0.0',
         SessionId: this.sessionId,
         LivenessRequestStream: livenessRequestGenerator,
-        VideoWidth: this.videoEl.videoWidth.toString(),
-        VideoHeight: this.videoEl.videoHeight.toString(),
+        VideoWidth: (mediaSettings.width ?? this.videoEl.width).toString(),
+        VideoHeight: (mediaSettings.height ?? this.videoEl.height).toString(),
       })
     );
     return response.LivenessResponseStream!;