fix(wasm-support): WebAssembly browser support. (#9410)

* fix(wasm-support): WebAssembly browser support.

* fix(wasm-support): WebAssembly browser support.

Co-authored-by: tudordan7 <tudor.pop@decagon.tech>

lang/main.json

@@ -362,7 +362,8 @@
         "image6" : "Forest ",
         "image7" : "Sunrise",
         "desktopShareError": "Could not create desktop share",
-        "desktopShare":"Desktop share"
+        "desktopShare":"Desktop share",
+        "webAssemblyWarning": "WebAssembly not supported"
     },
     "feedback": {
         "average": "Average",

react/features/stream-effects/virtual-background/index.js

@@ -1,11 +1,11 @@
 // @flow
 
-import * as wasmCheck from 'wasm-check';
+import { showWarningNotification } from '../../notifications/actions';
+import logger from '../../virtual-background/logger';
 
 import JitsiStreamBackgroundEffect from './JitsiStreamBackgroundEffect';
 import createTFLiteModule from './vendor/tflite/tflite';
 import createTFLiteSIMDModule from './vendor/tflite/tflite-simd';
-
 const models = {
     model96: 'libs/segm_lite_v681.tflite',
     model144: 'libs/segm_full_v679.tflite'
@@ -28,18 +28,36 @@ const segmentationDimensions = {
  *
  * @param {Object} virtualBackground - The virtual object that contains the background image source and
  * the isVirtualBackground flag that indicates if virtual image is activated.
+ * @param {Function} dispatch - The Redux dispatch function.
  * @returns {Promise<JitsiStreamBackgroundEffect>}
  */
-export async function createVirtualBackgroundEffect(virtualBackground: Object) {
+export async function createVirtualBackgroundEffect(virtualBackground: Object, dispatch: Function) {
     if (!MediaStreamTrack.prototype.getSettings && !MediaStreamTrack.prototype.getConstraints) {
         throw new Error('JitsiStreamBackgroundEffect not supported!');
     }
     let tflite;
+    let wasmCheck;
+
+    // Checks if WebAssembly feature is supported or enabled by/in the browser.
+    // Conditional import of wasm-check package is done to prevent
+    // the browser from crashing when the user opens the app.
+
+    try {
+        wasmCheck = require('wasm-check');
+        if (wasmCheck?.feature?.simd) {
+            tflite = await createTFLiteSIMDModule();
+        } else {
+            tflite = await createTFLiteModule();
+        }
+    } catch (err) {
+        logger.error('Looks like WebAssembly is disabled or not supported on this browser');
+        dispatch(showWarningNotification({
+            titleKey: 'virtualBackground.webAssemblyWarning',
+            description: 'WebAssembly disabled or not supported by this browser'
+        }));
+
+        return;
 
-    if (wasmCheck.feature.simd) {
-        tflite = await createTFLiteSIMDModule();
-    } else {
-        tflite = await createTFLiteModule();
     }
 
     const modelBufferOffset = tflite._getModelBufferMemoryOffset();

react/features/virtual-background/actions.js

@@ -22,7 +22,7 @@ export function toggleBackgroundEffect(options: Object, jitsiTrack: Object) {
         if (jitsiTrack) {
             try {
                 if (options.enabled) {
-                    await jitsiTrack.setEffect(await createVirtualBackgroundEffect(virtualBackground));
+                    await jitsiTrack.setEffect(await createVirtualBackgroundEffect(virtualBackground, dispatch));
                 } else {
                     await jitsiTrack.setEffect(undefined);
                     dispatch(backgroundEnabled(false));