Wait for stream before running recognizeForVideo

src/App.tsx

@@ -53,6 +53,7 @@ function App() {
 					}`}
 				>
 					<Webcam
+						videoConstraints={{ width: 400, height: 300, facingMode: "user" }}
 						width={400}
 						height={300}
 						ref={(webCamRef) => {

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();
+		}
 	}
 
 	/**

src/styles.css

@@ -90,6 +90,8 @@ main {
     video {
         position: relative;
         border-radius: 40px;
+        width: 400px;
+        height: 300px;
     }
 }