diff --git a/lang/main.json b/lang/main.json index a8c03034f..5c5640f7f 100644 --- a/lang/main.json +++ b/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", diff --git a/react/features/stream-effects/virtual-background/index.js b/react/features/stream-effects/virtual-background/index.js index f4549f336..f59ffb75e 100644 --- a/react/features/stream-effects/virtual-background/index.js +++ b/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} */ -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(); diff --git a/react/features/virtual-background/actions.js b/react/features/virtual-background/actions.js index 2b366d12c..d5a05c157 100644 --- a/react/features/virtual-background/actions.js +++ b/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));