From 6dc04a3d1effc46eaa5d7d88f4f67a4d72f8e01a Mon Sep 17 00:00:00 2001
From: Adwaith Rao <adwaithr99@gmail.com>
Date: Fri, 9 Apr 2021 10:22:31 +0530
Subject: [PATCH] Get the face detection input from a source canvas instead of
 a video element

---
 src/app/ar-fan-cam/ar-fan-cam.page.html | 1 +
 src/app/ar-fan-cam/ar-fan-cam.page.scss | 3 ++-
 src/app/ar-fan-cam/ar-fan-cam.page.ts   | 7 ++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/ar-fan-cam/ar-fan-cam.page.html b/src/app/ar-fan-cam/ar-fan-cam.page.html
index 971fdf2..3c0dcea 100644
--- a/src/app/ar-fan-cam/ar-fan-cam.page.html
+++ b/src/app/ar-fan-cam/ar-fan-cam.page.html
@@ -5,6 +5,7 @@
     <div class="container" #containerElement>
         <img #glassesElement class="glass-image" [ngStyle]="glassProperties" src="/assets/ar-accessories/glass.png" alt=""/>
         <video id="playback-video" width="{{ width }}" height="{{ height }}" #videoElement autoPlay></video>
+        <canvas id="source-canvas" #sourceCanvasElement width="{{ width }}" height="{{ height }}"></canvas>
         <canvas id="result-canvas" #canvasElement width="{{ width }}" height="{{ height }}"></canvas>
     </div>
 
diff --git a/src/app/ar-fan-cam/ar-fan-cam.page.scss b/src/app/ar-fan-cam/ar-fan-cam.page.scss
index 4c8d5f3..940e0d1 100644
--- a/src/app/ar-fan-cam/ar-fan-cam.page.scss
+++ b/src/app/ar-fan-cam/ar-fan-cam.page.scss
@@ -50,6 +50,7 @@
     position: absolute;
     top: 0px;
     left: 0px;
+    z-index: 1;
     transform-origin: 15% 50%;
 }
 
@@ -57,7 +58,7 @@
     display: block;
 }
 
-#result-canvas, #three-container {
+#result-canvas, #source-canvas, #three-container {
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/app/ar-fan-cam/ar-fan-cam.page.ts b/src/app/ar-fan-cam/ar-fan-cam.page.ts
index 72cc4d8..f466518 100644
--- a/src/app/ar-fan-cam/ar-fan-cam.page.ts
+++ b/src/app/ar-fan-cam/ar-fan-cam.page.ts
@@ -12,6 +12,7 @@ export class ArFanCamPage implements OnInit {
     @ViewChild('videoElement') videoElement: ElementRef<HTMLVideoElement>;
     @ViewChild('glassesElement') glassesElement: ElementRef<HTMLImageElement>;
     @ViewChild('canvasElement') canvasElement: ElementRef<HTMLCanvasElement>;
+    @ViewChild('sourceCanvasElement') sourceCanvasElement: ElementRef<HTMLCanvasElement>;
     
     mediaStream: MediaStream|null = null;
     capturedImageStrings: Array<string> = [];
@@ -118,7 +119,11 @@ export class ArFanCamPage implements OnInit {
     detectAndDrawFace = async () => {
         const tinyFaceDetectorOptions = new TinyFaceDetectorOptions();
 
-        let detectionWithLandmarks = await detectSingleFace(this.videoElement.nativeElement, tinyFaceDetectorOptions).withFaceLandmarks(true);
+        const sourceCanvas = this.sourceCanvasElement.nativeElement;
+        const context = sourceCanvas.getContext('2d');
+        context.drawImage(this.videoElement.nativeElement, 0, 0, sourceCanvas.width, sourceCanvas.height);
+
+        let detectionWithLandmarks = await detectSingleFace(this.sourceCanvasElement.nativeElement, tinyFaceDetectorOptions).withFaceLandmarks(true);
         
         if (detectionWithLandmarks) {
             const leftEye = detectionWithLandmarks.landmarks.getLeftEye();