From 443b14dbfba4bc194a09caad153099fa7c649dc8 Mon Sep 17 00:00:00 2001
From: Mou <m.mounir.f@gmail.com>
Date: Thu, 28 Mar 2024 20:21:30 +0200
Subject: [PATCH] Wait for stream before running recognizeForVideo

---
 src/App.tsx           |  1 +
 src/lib/Recognizer.ts | 20 +++++++++++---------
 src/styles.css        |  2 ++
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 31a6409..1fead54 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -53,6 +53,7 @@ function App() {
 					}`}
 				>
 					<Webcam
+						videoConstraints={{ width: 400, height: 300, facingMode: "user" }}
 						width={400}
 						height={300}
 						ref={(webCamRef) => {
diff --git a/src/lib/Recognizer.ts b/src/lib/Recognizer.ts
index 1c864c8..c326ac2 100644
--- a/src/lib/Recognizer.ts
+++ b/src/lib/Recognizer.ts
@@ -84,17 +84,19 @@ export default class Recognizer {
 	private async init(): Promise<void> {
 		this.recognizer = await GestureRecognizer.createFromOptions(this.vision, this.options);
 
-		const updateResults = async () => {
-			if (this.recognizer) {
-				this.results = await this.recognizer.recognizeForVideo(this.videoElement, Date.now());
-				if (this.resultsCallback) {
-					this.resultsCallback(this.results);
+		if (this.videoElement.duration) {
+			const updateResults = async () => {
+				if (this.recognizer) {
+					this.results = await this.recognizer.recognizeForVideo(this.videoElement, Date.now());
+					if (this.resultsCallback) {
+						this.resultsCallback(this.results);
+					}
 				}
-			}
-			requestAnimationFrame(updateResults);
-		};
+				requestAnimationFrame(updateResults);
+			};
 
-		updateResults();
+			updateResults();
+		}
 	}
 
 	/**
diff --git a/src/styles.css b/src/styles.css
index fb2db13..355ae08 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -90,6 +90,8 @@ main {
     video {
         position: relative;
         border-radius: 40px;
+        width: 400px;
+        height: 300px;
     }
 }