fix(blur-effect) enable blur effect on all platforms supporting canvas filters

That means all browsers except Safari, for now.

In addition, use the 96p model (instead of the 144p one) on browsers without SIMD support.

react/features/blur/components/VideoBlurButton.js

 // @flow
 
-import React from 'react';
-
 import { createVideoBlurEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { IconBlurBackground } from '../../base/icons';
 import { connect } from '../../base/redux';
-import { AbstractButton, BetaTag } from '../../base/toolbox/components';
+import { AbstractButton } from '../../base/toolbox/components';
 import type { AbstractButtonProps } from '../../base/toolbox/components';
 import { toggleBlurEffect } from '../actions';
 
     tooltip = 'toolbar.startvideoblur';
     toggledLabel = 'toolbar.stopvideoblur';
 
-    /**
-     * Helper function to be implemented by subclasses, which returns
-     * a React Element to display (a beta tag) at the end of the button.
-     *
-     * @override
-     * @protected
-     * @returns {ReactElement}
-     */
-    _getElementAfter() {
-        return <BetaTag />;
-    }
-
     /**
      * Handles clicking / pressing the button, and toggles the blur effect
      * state accordingly.

react/features/blur/functions.js

 
 import { getJitsiMeetGlobalNS, loadScript } from '../base/util';
 
+let filterSupport;
+
 /**
  * Returns promise that resolves with the blur effect instance.
  *
 
     return loadScript('libs/video-blur-effect.min.js').then(() => ns.effects.createBlurEffect());
 }
+
+/**
+ * Checks context filter support.
+ *
+ * @returns {boolean} True if the filter is supported and false if the filter is not supported by the browser.
+ */
+export function checkBlurSupport() {
+    if (typeof filterSupport === 'undefined') {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        filterSupport = typeof ctx.filter !== 'undefined';
+
+        canvas.remove();
+    }
+
+    return filterSupport;
+}

react/features/stream-effects/blur/JitsiStreamBlurEffect.js

     timerWorkerScript
 } from './TimerWorker';
 
-const segmentationWidth = 256;
-const segmentationHeight = 144;
-const segmentationPixelCount = segmentationWidth * segmentationHeight;
 const blurValue = '25px';
 
 /**
  */
 export default class JitsiStreamBlurEffect {
     _model: Object;
+    _options: Object;
+    _segmentationPixelCount: number;
     _inputVideoElement: HTMLVideoElement;
     _onMaskFrameTimer: Function;
     _maskFrameTimerWorker: Worker;
      * Represents a modified video MediaStream track.
      *
      * @class
-     * @param {BodyPix} bpModel - BodyPix model.
+     * @param {Object} model - Meet model.
+     * @param {Object} options - Segmentation dimensions.
      */
-    constructor(bpModel: Object) {
-        this._model = bpModel;
+    constructor(model: Object, options: Object) {
+        this._model = model;
+        this._options = options;
+        this._segmentationPixelCount = this._options.width * this._options.height;
 
         // Bind event handler so it is only bound once for every instance.
         this._onMaskFrameTimer = this._onMaskFrameTimer.bind(this);
             this._segmentationMaskCanvas,
             0,
             0,
-            segmentationWidth,
-            segmentationHeight,
+            this._options.width,
+            this._options.height,
             0,
             0,
             this._inputVideoElement.width,
         this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
 
         this._outputCanvasCtx.globalCompositeOperation = 'destination-over';
-        this._outputCanvasCtx.filter = `blur(${blurValue})`; // FIXME Does not work on Safari.
+        this._outputCanvasCtx.filter = `blur(${blurValue})`;
         this._outputCanvasCtx.drawImage(this._inputVideoElement, 0, 0);
     }
 
         this._model._runInference();
         const outputMemoryOffset = this._model._getOutputMemoryOffset() / 4;
 
-        for (let i = 0; i < segmentationPixelCount; i++) {
+        for (let i = 0; i < this._segmentationPixelCount; i++) {
             const background = this._model.HEAPF32[outputMemoryOffset + (i * 2)];
             const person = this._model.HEAPF32[outputMemoryOffset + (i * 2) + 1];
             const shift = Math.max(background, person);
             this._inputVideoElement.height,
             0,
             0,
-            segmentationWidth,
-            segmentationHeight
+            this._options.width,
+            this._options.height
         );
 
         const imageData = this._segmentationMaskCtx.getImageData(
             0,
             0,
-            segmentationWidth,
-            segmentationHeight
+            this._options.width,
+            this._options.height
         );
         const inputMemoryOffset = this._model._getInputMemoryOffset() / 4;
 
-        for (let i = 0; i < segmentationPixelCount; i++) {
+        for (let i = 0; i < this._segmentationPixelCount; i++) {
             this._model.HEAPF32[inputMemoryOffset + (i * 3)] = imageData.data[i * 4] / 255;
             this._model.HEAPF32[inputMemoryOffset + (i * 3) + 1] = imageData.data[(i * 4) + 1] / 255;
             this._model.HEAPF32[inputMemoryOffset + (i * 3) + 2] = imageData.data[(i * 4) + 2] / 255;
         const { height, frameRate, width }
             = firstVideoTrack.getSettings ? firstVideoTrack.getSettings() : firstVideoTrack.getConstraints();
 
-        this._segmentationMask = new ImageData(segmentationWidth, segmentationHeight);
+        this._segmentationMask = new ImageData(this._options.width, this._options.height);
         this._segmentationMaskCanvas = document.createElement('canvas');
-        this._segmentationMaskCanvas.width = segmentationWidth;
-        this._segmentationMaskCanvas.height = segmentationHeight;
+        this._segmentationMaskCanvas.width = this._options.width;
+        this._segmentationMaskCanvas.height = this._options.height;
         this._segmentationMaskCtx = this._segmentationMaskCanvas.getContext('2d');
         this._outputCanvasElement.width = parseInt(width, 10);
         this._outputCanvasElement.height = parseInt(height, 10);

react/features/stream-effects/blur/index.js

 import createTFLiteSIMDModule from './vendor/tflite/tflite-simd';
 
 const models = {
-    '96': 'libs/segm_lite_v681.tflite',
-    '144': 'libs/segm_full_v679.tflite'
+    'model96': 'libs/segm_lite_v681.tflite',
+    'model144': 'libs/segm_full_v679.tflite'
+};
+
+const segmentationDimensions = {
+    'model96': {
+        'height': 96,
+        'width': 160
+    },
+    'model144': {
+        'height': 144,
+        'width': 256
+    }
 };
 
 /**
 
     const modelBufferOffset = tflite._getModelBufferMemoryOffset();
     const modelResponse = await fetch(
-        models['144']
+        wasmCheck.feature.simd ? models.model144 : models.model96
     );
 
     if (!modelResponse.ok) {
 
     tflite._loadModel(model.byteLength);
 
-    return new JitsiStreamBlurEffect(tflite);
+    const options = wasmCheck.feature.simd ? segmentationDimensions.model144 : segmentationDimensions.model96;
+
+    return new JitsiStreamBlurEffect(tflite, options);
 }

react/features/toolbox/components/web/Toolbox.js

 // @flow
 
 import React, { Component } from 'react';
-import * as wasmCheck from 'wasm-check';
 
 import {
     ACTION_SHORTCUT_TRIGGERED,
 import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
 import { isVpaasMeeting } from '../../../billing-counter/functions';
 import { VideoBlurButton } from '../../../blur';
+import { checkBlurSupport } from '../../../blur/functions';
 import { CHAT_SIZE, ChatCounter, toggleChat } from '../../../chat';
 import { EmbedMeetingDialog } from '../../../embed-meeting';
 import { SharedDocumentButton } from '../../../etherpad';
                 && <VideoBlurButton
                     key = 'videobackgroundblur'
                     showLabel = { true }
-                    visible = { !_screensharing && wasmCheck.feature.simd } />,
+                    visible = { !_screensharing && checkBlurSupport() } />,
             this._shouldShowButton('settings')
                 && <SettingsButton
                     key = 'settings'