fix(face-centering) fix face centering on browsers with no offscreencanvas support (#11234)

react/features/face-centering/faceCenteringWorker.js

@@ -35,7 +35,7 @@ const queue = [];
 let lastValidFaceBox;
 
 const detect = async message => {
-    const { baseUrl, imageBitmap, isHorizontallyFlipped, threshold } = message.data;
+    const { baseUrl, image, isHorizontallyFlipped, threshold } = message.data;
 
     if (initInProgress || initError) {
         return;
@@ -70,8 +70,8 @@ const detect = async message => {
 
     tf.engine().startScope();
 
-    const image = tf.browser.fromPixels(imageBitmap);
+    const imageTensor = tf.browser.fromPixels(image);
-    const detections = await model.estimateFaces(image, false, isHorizontallyFlipped, false);
+    const detections = await model.estimateFaces(imageTensor, false, isHorizontallyFlipped, false);
 
     tf.engine().endScope();
 
@@ -80,10 +80,10 @@ const detect = async message => {
     if (detections.length) {
         faceBox = {
             // normalize to percentage based
-            left: Math.round(Math.min(...detections.map(d => d.topLeft[0])) * 100 / imageBitmap.width),
+            left: Math.round(Math.min(...detections.map(d => d.topLeft[0])) * 100 / image.width),
-            right: Math.round(Math.max(...detections.map(d => d.bottomRight[0])) * 100 / imageBitmap.width),
+            right: Math.round(Math.max(...detections.map(d => d.bottomRight[0])) * 100 / image.width),
-            top: Math.round(Math.min(...detections.map(d => d.topLeft[1])) * 100 / imageBitmap.height),
+            top: Math.round(Math.min(...detections.map(d => d.topLeft[1])) * 100 / image.height),
-            bottom: Math.round(Math.max(...detections.map(d => d.bottomRight[1])) * 100 / imageBitmap.height)
+            bottom: Math.round(Math.max(...detections.map(d => d.bottomRight[1])) * 100 / image.height)
         };
 
         if (lastValidFaceBox && Math.abs(lastValidFaceBox.left - faceBox.left) < threshold) {

react/features/face-centering/functions.js

@@ -44,6 +44,7 @@ export async function sendDataToWorker(
     }
 
     let imageBitmap;
+    let image;
 
     try {
         imageBitmap = await imageCapture.grabFrame();
@@ -53,13 +54,28 @@ export async function sendDataToWorker(
         return;
     }
 
+    if (typeof OffscreenCanvas === 'undefined') {
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+
+        canvas.width = imageBitmap.width;
+        canvas.height = imageBitmap.height;
+        context.drawImage(imageBitmap, 0, 0);
+
+        image = context.getImageData(0, 0, imageBitmap.width, imageBitmap.height);
+    } else {
+        image = imageBitmap;
+    }
+
     worker.postMessage({
         id: DETECT_FACE_BOX,
         baseUrl: getBaseUrl(),
-        imageBitmap,
+        image,
         threshold,
         isHorizontallyFlipped
     });
+
+    imageBitmap.close();
 }
 
 /**