add(face-landmarks): max faces detected config and default value (#11625)

* fix(face-landmarks): set max detected faces up to 4

* add(face-landmarks): config for max faces detected

* fix(config.js): default value for capture interval face-landmarks

* add missing coma

config.js

@@ -779,7 +779,7 @@ var config = {
     // enableEmailInStats: false,
 
     // faceLandmarks: {
-    //     // Enables sharing your face cordinates. Used for centering faces within a video.
+    //     // Enables sharing your face coordinates. Used for centering faces within a video.
     //     enableFaceCentering: false,
 
     //     // Enables detecting face expressions and sharing data with other participants
@@ -791,8 +791,11 @@ var config = {
     //     // Minimum required face movement percentage threshold for sending new face centering coordinates data.
     //     faceCenteringThreshold: 10,
 
-    //     // Miliseconds for processing a new image capture in order to detect face coordinates if they exist.
+    //     // Milliseconds for processing a new image capture in order to detect face coordinates if they exist.
-    //     captureInterval: 100
+    //     captureInterval: 1000,
+
+    //     // Maximum number of faces that can be detected from a video track.
+    //     maxFacesDetected: 4
     // },
 
     // Controls the percentage of automatic feedback shown to participants when callstats is enabled.

react/features/face-landmarks/FaceLandmarksHelper.ts

@@ -21,7 +21,8 @@ type FaceBox = {
 
 type InitInput = {
     baseUrl: string,
-    detectionTypes: string[]
+    detectionTypes: string[],
+    maxFacesDetected?: number
 }
 
 type DetectOutput = {
@@ -44,6 +45,7 @@ export class HumanHelper implements FaceLandmarksHelper {
     protected human: Human | undefined;
     protected faceDetectionTypes: string[];
     protected baseUrl: string;
+    protected maxFacesDetected?: number;
     private detectionInProgress = false;
     private lastValidFaceBox: FaceBox | undefined;
     /**
@@ -59,11 +61,12 @@ export class HumanHelper implements FaceLandmarksHelper {
         deallocate: true,
         filter: { enabled: false },
         face: {
-            enabled: true,
+            enabled: false,
             detector: {
                 enabled: false,
                 rotation: false,
-                modelPath: 'blazeface-front.json'
+                modelPath: 'blazeface-front.json',
+                maxDetected: 4
             },
             mesh: { enabled: false },
             iris: { enabled: false },
@@ -79,9 +82,10 @@ export class HumanHelper implements FaceLandmarksHelper {
         segmentation: { enabled: false }
     };
 
-    constructor({ baseUrl, detectionTypes }: InitInput) {
+    constructor({ baseUrl, detectionTypes, maxFacesDetected }: InitInput) {
         this.faceDetectionTypes = detectionTypes;
         this.baseUrl = baseUrl;
+        this.maxFacesDetected = maxFacesDetected;
         this.init();
     }
 
@@ -97,7 +101,11 @@ export class HumanHelper implements FaceLandmarksHelper {
 
             if (this.faceDetectionTypes.length > 0 && this.config.face) {
                 this.config.face.enabled = true
-            } 
+            }
+            
+            if (this.maxFacesDetected && this.config.face?.detector) {
+                this.config.face.detector.maxDetected = this.maxFacesDetected;
+            }
 
             if (this.faceDetectionTypes.includes(DETECTION_TYPES.FACE_BOX) && this.config.face?.detector) {
                 this.config.face.detector.enabled = true;

react/features/face-landmarks/actions.js

@@ -140,7 +140,8 @@ export function loadWorker() {
         worker.postMessage({
             type: INIT_WORKER,
             baseUrl,
-            detectionTypes
+            detectionTypes,
+            maxFacesDetected: faceLandmarks?.maxFacesDetected
         });
 
         dispatch(startFaceLandmarksDetection());