default flip face in face tracking selfie mode

Author: hiukim

examples/face-tracking/example1.html

@@ -18,7 +18,6 @@
       position: absolute;
       width: 100%;
       height: 100%;
-      transform: scaleX(-1);
     }
   </style>
 </head>

examples/face-tracking/example2.html

@@ -43,7 +43,6 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        transform: scaleX(-1);
       }
       .options-panel {
 	position: fixed;

examples/face-tracking/example3.html

@@ -58,7 +58,6 @@
         position: absolute;
         width: 100%;
         height: 100%;
-        transform: scaleX(-1);
       }
 
       #example-control-overlay {

examples/face-tracking/three-css.html

@@ -31,7 +31,6 @@
 	height: 100vh;
 	position: relative;
 	overflow: hidden;
-        transform: scaleX(-1);
       }
       #ar-div {
 	width: 1000px;
@@ -46,7 +45,6 @@
 	color: white;
       }
       #ar-div > div {
-        transform: scaleX(-1);
       }
     </style>
   </head>

examples/face-tracking/three-facemesh.html

@@ -38,7 +38,6 @@
       height: 100vh;
       position: relative;
       overflow: hidden;
-      transform: scaleX(-1);
     }
   </style>
 </head>

examples/face-tracking/three.html

@@ -21,7 +21,7 @@
         filterMinCF: 0.001,
         filterBeta: 10,
         userDeviceId,
-        environmentDeviceId
+        environmentDeviceId,
       });
 
       const anchor = mindarThree.addAnchor(1);
@@ -94,7 +94,6 @@
       height: 100vh;
       position: relative;
       overflow: hidden;
-      transform: scaleX(-1);
     }
 
     #control {

src/face-target/aframe.js

@@ -8,16 +8,18 @@ AFRAME.registerSystem('mindar-face-system', {
   video: null,
   shouldFaceUser: true,
   lastHasFace: false,
+  disableFaceMirror: false,
 
   init: function() {
     this.anchorEntities = [];
     this.faceMeshEntities = [];
   },
 
-  setup: function({uiLoading, uiScanning, uiError, filterMinCF, filterBeta}) {
+  setup: function({uiLoading, uiScanning, uiError, filterMinCF, filterBeta, disableFaceMirror}) {
     this.ui = new UI({uiLoading, uiScanning, uiError});
     this.filterMinCF = filterMinCF;
     this.filterBeta = filterBeta;
+    this.disableFaceMirror = disableFaceMirror;
   },
 
   registerFaceMesh: function(el) {
@@ -160,7 +162,9 @@ AFRAME.registerSystem('mindar-face-system', {
     });
     this._resize();
 
-    await this.controller.setup();
+    const flipFace = this.shouldFaceUser && !this.disableFaceMirror;
+
+    await this.controller.setup(flipFace);
     await this.controller.dummyRun(this.video);
 
     for (let i = 0; i < this.faceMeshEntities.length; i++) {
@@ -208,6 +212,12 @@ AFRAME.registerSystem('mindar-face-system', {
     this.video.style.width = vw + "px";
     this.video.style.height = vh + "px";
 
+    if (this.shouldFaceUser && !this.disableFaceMirror) {
+      video.style.transform = 'scaleX(-1)';
+    } else {
+      video.style.transform = 'scaleX(1)';
+    }
+
     const sceneEl = container.getElementsByTagName("a-scene")[0];
     sceneEl.style.top = this.video.style.top;
     sceneEl.style.left = this.video.style.left;
@@ -227,6 +237,7 @@ AFRAME.registerComponent('mindar-face', {
     uiError: {type: 'string', default: 'yes'},
     filterMinCF: {type: 'number', default: -1},
     filterBeta: {type: 'number', default: -1},
+    disableFaceMirror: {type: 'boolean', default: 'false'},
   },
 
   init: function() {
@@ -244,6 +255,7 @@ AFRAME.registerComponent('mindar-face', {
       uiError: this.data.uiError,
       filterMinCF: this.data.filterMinCF === -1? null: this.data.filterMinCF,
       filterBeta: this.data.filterBeta === -1? null: this.data.filterBeta,
+      disableFaceMirror: this.data.disableFaceMirror,
     });
 
     if (this.data.autoStart) {

src/face-target/controller.js

@@ -27,9 +27,9 @@ class Controller {
     this.faceScaleFilter = new OneEuroFilter({minCutOff: this.filterMinCF, beta: this.filterBeta});
   }
 
-  async setup() {
+  async setup(flipFace) {
     await waitCV();
-    this.faceMeshHelper = new FaceMeshHelper();
+    this.faceMeshHelper = new FaceMeshHelper(flipFace);
   }
 
   onInputResized(input) {

src/face-target/face-mesh-helper.js

@@ -1,7 +1,7 @@
 import {FaceMesh} from "@mediapipe/face_mesh";
 
 class FaceMeshHelper {
-  constructor() {
+  constructor(flipFace) {
     this.detectResolve = null;
 
     let _FaceMesh = FaceMesh;
@@ -14,12 +14,15 @@ class FaceMeshHelper {
       return `https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file}`;
     }});
 
+    console.log("flipFace", flipFace);
+
     this.faceMesh.setOptions({
       maxNumFaces: 1,
       //refineLandmarks: true,
       refineLandmarks: false,
       minDetectionConfidence: 0.5,
-      minTrackingConfidence: 0.5
+      minTrackingConfidence: 0.5,
+      selfieMode: flipFace
     });
 
     this.faceMesh.onResults((results) => {

src/face-target/three.js

@@ -8,7 +8,7 @@ const THREE={BufferGeometry,BufferAttribute};
 
 export class MindARThree {
   constructor({container, uiLoading="yes", uiScanning="yes", uiError="yes", filterMinCF=null, filterBeta=null,
-    userDeviceId = null, environmentDeviceId = null
+    userDeviceId = null, environmentDeviceId = null, disableFaceMirror = false,
   }) {
     this.container = container;
     this.ui = new UI({ uiLoading, uiScanning, uiError });
@@ -17,6 +17,7 @@ export class MindARThree {
       filterMinCF: filterMinCF,
       filterBeta: filterBeta,
     });
+    this.disableFaceMirror = disableFaceMirror;
     this.scene = new Scene();
     this.cssScene = new Scene();
     this.renderer = new WebGLRenderer({ antialias: true, alpha: true });
@@ -183,7 +184,9 @@ export class MindARThree {
       }
       this._resize();
 
-      await this.controller.setup();
+      const flipFace = this.shouldFaceUser && !this.disableFaceMirror;
+
+      await this.controller.setup(flipFace);
       await this.controller.dummyRun(video);
 
       this._resize();
@@ -227,6 +230,12 @@ export class MindARThree {
     video.style.width = vw + "px";
     video.style.height = vh + "px";
 
+    if (this.shouldFaceUser && !this.disableFaceMirror) {
+      video.style.transform = 'scaleX(-1)';
+    } else {
+      video.style.transform = 'scaleX(1)';
+    }
+
     const canvas = renderer.domElement;
     const cssCanvas = cssRenderer.domElement;