

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Intégration de filtres d'arrière-plan dans une application client pour le SDK Amazon Chime
<a name="background-filters"></a>

Cette section explique comment filtrer par programmation les arrière-plans vidéo à l'aide du flou d'arrière-plan 2.0 et du remplacement de l'arrière-plan 2.0. Pour ajouter un filtre d'arrière-plan à un flux vidéo, vous devez créer un filtre `VideoFxProcessor` contenant un `VideoFxConfig` objet. Vous insérez ensuite ce processeur dans un`VideoTransformDevice`.

Le processeur de filtre d'arrière-plan utilise un modèle d'apprentissage automatique TensorFlow Lite, JavaScript Web Workers, et WebAssembly permet d'appliquer un filtre à l'arrière-plan de chaque image du flux vidéo. Ces ressources sont téléchargées au moment de l'exécution lorsque vous créez un`VideoFxProcessor`.

L'[application de démonstration du navigateur GitHub utilise le](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/browser) nouveau flou d'arrière-plan et les nouveaux filtres de remplacement. Pour les essayer, lancez la démo avec`npm run start`, rejoignez la réunion, puis cliquez sur la caméra pour activer la vidéo. Ouvrez le menu **Appliquer le filtre** (![\[Button with a circle and a downward arrow.\]](http://docs.aws.amazon.com/fr_fr/chime-sdk/latest/dg/images/blur-apply-filter-initial.png)) et choisissez l'une des options **Background Blur 2.0** ou **Background Replacement 2.0**.

**Topics**
+ [À propos de l'utilisation des filtres d'arrière-plan pour le SDK Amazon Chime](about-bg-filters.md)
+ [Utilisation d'une politique de sécurité du contenu avec la bibliothèque cliente du SDK Amazon Chime pour JavaScript](content-security.md)
+ [Ajout de filtres d'arrière-plan à votre application pour le SDK Amazon Chime](add-filters.md)
+ [Exemple de filtre d'arrière-plan pour le SDK Amazon Chime](example-bg-filter.md)

# À propos de l'utilisation des filtres d'arrière-plan pour le SDK Amazon Chime
<a name="about-bg-filters"></a>

Les filtres d'arrière-plan peuvent être gourmands en CPU ou en GPU. Certains appareils mobiles et ordinateurs portables ou de bureau de moindre spécification peuvent ne pas être en mesure d'exécuter les filtres en même temps que plusieurs flux vidéo.

## Support SIMD pour le SDK Amazon Chime
<a name="simd-support"></a>

Les filtres d'arrière-plan sont plus efficaces dans les environnements qui prennent en charge les instructions uniques, les données multiples (SIMD). Les filtres utilisent moins de CPU pour un niveau de complexité donné lorsque vous activez le SIMD. Les appareils à faible consommation exécutant des navigateurs sans support SIMD peuvent ne pas exécuter de filtres d'arrière-plan.

## GL2 Support Web pour le SDK Amazon Chime
<a name="webgl2-support"></a>

L'`VideoFxProcessor`objet nécessite des navigateurs compatibles avec GL2 le Web pour accéder au GPU sur l'appareil client.

## Diffusion de contenu et bande passante pour le SDK Amazon Chime
<a name="delivery-caching-bandwidth"></a>

Un réseau de diffusion de contenu Amazon charge les machine-learning-model fichiers pour les filtres d'arrière-plan lors de l'exécution. Cela permet une distribution mondiale à faible latence sans qu'il soit nécessaire de fournir une suite complète de fichiers dans le cadre de votre application. Cependant, le chargement de fichiers de modèles peut ajouter de la latence à certaines parties de votre application. Pour atténuer cet impact, les navigateurs mettent en cache les fichiers du modèle indéfiniment. Ce cache accélère considérablement les chargements suivants. Il est recommandé de vérifier les navigateurs pris en charge, puis de créer les ressources de filtrage d'arrière-plan lorsque les utilisateurs ne remarquent aucune latence. Par exemple, vous pouvez télécharger des modèles de fichiers pendant que les utilisateurs attendent dans un lobby ou lorsqu'ils utilisent un sélecteur d'appareils.

Votre application doit se connecter aux éléments suivants :
+ Services multimédias du SDK Amazon Chime.
+ Amazon CloudFront via HTTPS (port 443).

Toutes les demandes sont adressées à des sous-domaines de. `sdkassets.chime.aws` Les applications qui ne peuvent pas accéder au réseau de diffusion de contenu ou qui n'incluent pas le domaine approprié dans leur [politique de sécurité du contenu](content-security.md) échoueront aux tests de support et ne pourront pas utiliser les filtres.

Pour plus d'informations sur les plages CloudFront d'adresses IP, consultez la section [Emplacements et plages d'adresses IP des serveurs CloudFront Edge](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html) dans le manuel *Amazon CloudFront Developer Guide*.

## Compatibilité du navigateur avec le SDK Amazon Chime
<a name="filters-browser-compat"></a>

Le tableau suivant répertorie les navigateurs et les versions qui prennent en charge les filtres d'arrière-plan.


| Navigateur | Version minimale prise en charge | 
| --- | --- | 
| Firefox | 76 ans et plus | 
| Navigateurs et environnements basés sur Chromium, notamment Edge et Electron | 78 ans et plus | 
| Chrome pour Android | 110 ans et plus | 
| Safari sur macOS | 16,3 ans et plus | 
| Safari sur iOS (iPhone, iPad) | 16.x | 
| Chrome sur iOS | 110,0.0.x.x | 
| Firefox sur iOS (iPhone iPad) | 16.x | 

La version 3.14 de l'`VideoFxProcessor`objet est compatible avec Android. Pour la prise en charge des appareils Android sur les versions antérieures à 3.14, utilisez les `BackgroundReplacementVideoFrameProcessor` objets `BackgroundBlurVideoFrameProcessor` et. Pour plus d'informations sur leur utilisation, reportez-vous à la [https://aws.github.io/amazon-chime-sdk-js/modules/backgroundfilter_video_processor.html](https://aws.github.io/amazon-chime-sdk-js/modules/backgroundfilter_video_processor.html)page sur GitHub.

# Utilisation d'une politique de sécurité du contenu avec la bibliothèque cliente du SDK Amazon Chime pour JavaScript
<a name="content-security"></a>

Les applications Web modernes utilisent une politique de sécurité du contenu pour protéger les utilisateurs contre certaines catégories d'attaques. Les applications qui utilisent le `VideoFxProcessor` doivent inclure les directives de politique décrites dans cette section. Les directives permettent au SDK Amazon Chime d'accéder aux ressources dont il a besoin lors de l'exécution.

**Topics**
+ [Directives de politique de sécurité du contenu requises](#required-csp)
+ [Exemple de politique de sécurité du contenu](#example-csp)
+ [Erreurs liées à la politique de sécurité du contenu](#csp-errors)
+ [Politique de sécurité du contenu de Cross-Origin Opener](#cross-origin-policy)

## Directives de politique de sécurité du contenu requises
<a name="required-csp"></a>

Vous devez utiliser les directives de politique de sécurité du contenu suivantes.
+ `blob: https://*.sdkassets.chime.aws`Pour `script-src:` ajouter, charger le code de traitement vidéo et `wasm-unsafe-eval` autoriser son exécution. 
+ `blob:``https://*.sdkassets.chime.aws`Pour `script-src-elem:` ajouter, chargez le code de traitement vidéo à partir de la source.
+ Pour `worker-src:` ajouter `blob: https://*.sdkassets.chime.aws` à Load Worker JavaScript Across Origins.

Si vous omettez l'une de ces entrées, ou si vous utilisez des en-têtes HTTP et des balises `http-equiv` méta pour spécifier une politique et que vous excluez par inadvertance l'une de ces entrées par intersection, aucun filtre d'arrière-plan ne pourra être initialisé. Le filtre semble ne pas être pris en charge, ou il crée un processeur d'images vidéo non opérationnel. Vous verrez apparaître des erreurs dans la console de votre navigateur, telles que :

```
Refused to connect to
'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…'
because it violates the document's content security policy.
```

### Directives de politique relatives aux scripts requises
<a name="required-script"></a>

Pour fonctionner, la `VideoFxProcessor` classe doit charger JavaScript des classes au moment de l'exécution à partir d'un réseau de diffusion de contenu Amazon. Ces classes utilisent le Web GL2 pour implémenter le post-traitement des vidéos. Pour permettre à une application de récupérer et d'exécuter ces classes, vous devez inclure les directives suivantes :
+ `script-src 'self' blob: https://*.sdkassets.chime.aws`
+ `script-src-elem 'self' blob: https://*.sdkassets.chime.aws`

**Note**  
Pour bénéficier d'un support complet sur Safari et Firefox, vous devez utiliser les `script-src-elem` directives `script-src` et.

### Directive sur la politique des travailleurs
<a name="required-worker"></a>

Les JavaScript classes de `VideoFxProcessor` charge sous forme de blob pour exécuter un thread de travail Web. Le fil utilise des modèles d'apprentissage automatique pour traiter les vidéos. Pour accorder à une application l'accès permettant de récupérer et d'utiliser ce programme de travail, incluez la directive suivante :

`worker-src 'self' blob: https://*.sdkassets.chime.aws`

### WebAssembly politique
<a name="required-web-assembly"></a>

`VideoFxProcessor`Charge un module WebAssembly (WASM) à partir du même réseau de diffusion de contenu appartenant à Amazon. Dans Chrome 95 et versions ultérieures, les modules WASM compilés ne peuvent pas être transmis entre plusieurs limites de modules. Pour permettre l'extraction et l'instanciation de ces modules, incluez-les `'wasm-unsafe-eval'` dans la directive. `script-src`

Pour plus d'informations sur la documentation de la politique de sécurité du contenu pour WebAssembly, reportez-vous à la section [Politique de sécurité WebAssembly du contenu](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md) sur GitHub.

### (Facultatif) Directive relative aux politiques relatives aux images d'arrière-plan
<a name="optional-directives"></a>

Pour utiliser une image d'arrière-plan chargée dynamiquement avec un filtre de remplacement d'arrière-plan, vous `VideoFxProcessor` devez avoir accès à l'image. Pour ce faire, incluez une `connect-src` directive dans le domaine qui héberge l'image.

## Exemple de politique de sécurité du contenu
<a name="example-csp"></a>

L'exemple de politique suivant vous permet d'utiliser le`VideoFxProcessor`. Les `connect-src` définitions ne sont pas spécifiques à un`VideoFxProcessor`. Ils sont plutôt liés à l'audio et à la vidéo d'une réunion du SDK Amazon Chime.

```
<head>
    <meta http-equiv="Content-Security-Policy" 
        content="base-uri 'self';    
        connect-src       'self' https://*.chime.aws wss://*.chime.aws https://*.amazonaws.com wss://*.chime.aws https://*.ingest.chime.aws;
        script-src        'self' blob: 'wasm-unsafe-eval' https://*.sdkassets.chime.aws; 
        script-src-elem   'self' blob: https://*.sdkassets.chime.aws;
        worker-src        'self' blob: https://*.sdkassets.chime.aws;">
</head>
```

## Erreurs liées à la politique de sécurité du contenu
<a name="csp-errors"></a>

Si vous omettez l'une des directives requises, elle ne `VideoFxProcessor` sera pas instanciée et ne sera pas prise en charge. Dans ce cas, l'erreur suivante (ou similaire) apparaît dans la console du navigateur :

```
Refused to connect to
'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js'
because it violates the document's content security policy.
```

## Politique de sécurité du contenu de Cross-Origin Opener
<a name="cross-origin-policy"></a>

Pour limiter l'utilisation de la mémoire, le module préfère utiliser un `SharedArrayBuffer` pour le traitement. Toutefois, cela nécessite que vous configuriez soigneusement la sécurité Web. Vous devez définir les en-têtes suivants lorsque vous diffusez le code HTML de votre application :

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

Le serveur doit les définir car ils n'ont aucun équivalent de méta-balise. Si vous ne définissez pas ces en-têtes, les filtres d'arrière-plan peuvent utiliser un peu plus de RAM. 

Les filtres d'arrière-plan peuvent être gourmands en CPU ou en GPU. Certains appareils mobiles et ordinateurs portables ou de bureau de moindre spécification peuvent ne pas être en mesure d'exécuter les filtres en même temps que plusieurs flux vidéo.

# Ajout de filtres d'arrière-plan à votre application pour le SDK Amazon Chime
<a name="add-filters"></a>

Le processus d'ajout de filtres d'arrière-plan suit les étapes générales suivantes :
+ Vérifiez les navigateurs compatibles.
+ Créez un `VideoFxConfig` objet avec la configuration que vous souhaitez utiliser.
+ Utilisez l'objet de configuration pour créer un `VideoFxProcessor` objet.
+ Incluez l'`VideoFxProcessor`objet dans un`VideoTransformDevice`.
+ Utilisez le `VideoTransformDevice` pour démarrer l'entrée vidéo.

**Note**  
Pour effectuer ces étapes, vous devez d'abord :  
Créez un `Logger`.
Choisissez un appareil vidéo de sa classe`MediaDeviceInfo`.
Rejoignez avec succès un`MeetingSession`.

Les étapes décrites dans les sections suivantes expliquent comment effectuer le processus.

**Topics**
+ [Vérifier l'assistance avant de proposer un filtre pour le SDK Amazon Chime](support-check.md)
+ [Création d'un VideoFxConfig objet pour le SDK Amazon Chime](create-videofxconfig.md)
+ [Création d'un VideoFxProcessor objet pour le SDK Amazon Chime](create-videofxprocessor.md)
+ [Configuration de l'VideoFxProcessorobjet pour le SDK Amazon Chime](configure-videofxprocessor.md)
+ [Création de l'VideoTransformDeviceobjet pour le SDK Amazon Chime](create-video-transform.md)
+ [Démarrage de l'entrée vidéo pour le SDK Amazon Chime](start-video-input.md)
+ [Optimisation de l'utilisation des ressources pour le SDK Amazon Chime](tuning.md)

# Vérifier l'assistance avant de proposer un filtre pour le SDK Amazon Chime
<a name="support-check"></a>

Le SDK Amazon Chime fournit une méthode statique asynchrone qui vérifie les navigateurs compatibles et tente de télécharger les ressources requises. Cependant, il ne vérifie pas les performances de l'appareil. Il est recommandé de toujours s'assurer que les navigateurs et les appareils des utilisateurs peuvent prendre en charge les filtres avant de les proposer.

```
import {
    VideoFxProcessor
} from 'amazon-chime-sdk-js';

if (!await VideoFxProcessor.isSupported(logger)) {     
    // logger is optional for isSupported
}
```

# Création d'un VideoFxConfig objet pour le SDK Amazon Chime
<a name="create-videofxconfig"></a>

Vous pouvez définir des configurations pour `backgroundBlur` et `backgroundReplacement` dans le même objet. Cependant, vous ne pouvez pas `isEnabled` définir ce `true` paramètre pour les deux filtres en même temps. Cette configuration n'est pas valide.

La `VideoFxConfig` classe n'effectue aucune validation de son propre chef. La validation a lieu à l'étape suivante.

L'exemple suivant montre une valeur valide`VideoFxConfig`.

```
const videoFxConfig: VideoFxConfig = {
    backgroundBlur: {
        isEnabled: false,
        strength: 'medium'
    },
    backgroundReplacement: {
        isEnabled: false,
        backgroundImageURL: 'space.jpg',
        defaultColor: undefined,
    }
}
```

Les tableaux suivants répertorient les `VideoFxProcessor` propriétés que vous pouvez spécifier dans l'`VideoFxConfig`objet.

**Propriétés du filtre de flou d'arrière-plan**


| Propriété | Type | Description | 
| --- | --- | --- | 
| `isEnabled` | `boolean` |  Dans `true` ce cas, le filtre brouille l'arrière-plan. | 
| `strength` | `string` | Détermine l'étendue du flou. Valeurs valides : `low` \$1 `medium` \$1 `high`. | 

**Propriétés du filtre de remplacement en arrière-plan**


| Propriété | Type | Description | 
| --- | --- | --- | 
| `isEnabled` | `boolean` |  Lorsque`true`, le filtre remplace l'arrière-plan \$1. | 
| `backgroundImageURL` | `string` | URL de l'image d'arrière-plan. Le filtre redimensionne l'image de manière dynamique aux dimensions de l'écran actuel. Vous pouvez utiliser une chaîne telle que `https://...` ou une URL de données telle que`data:image/jpeg;base64`. | 
| `defaultColor` | `string` | Une chaîne de couleur hexadécimale telle que `000000` ou`FFFFFF`, ou une chaîne telle que `black` ou`white`. Si vous ne spécifiez pas d'URL d'image, le processeur l'utilise `defaultColor` comme arrière-plan. Si vous ne spécifiez pas a`defaultColor`, le processeur est noir par défaut. | 

# Création d'un VideoFxProcessor objet pour le SDK Amazon Chime
<a name="create-videofxprocessor"></a>

Lors de la création de l'`VideoFxProcessor`objet, AWS les serveurs téléchargent les actifs d'exécution ou un cache de navigateur charge les actifs. Si les configurations réseau ou CSP empêchent l'accès aux actifs, l'`VideoFx.create`opération génère une exception. Le résultat VideoFxProcessor est configuré comme un processeur non opérationnel, ce qui n'affectera pas le flux vidéo.

```
let videoFxProcessor: VideoFxProcessor | undefined = undefined;
try {
  videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig);
} catch (error) {
  logger.warn(error.toString());
}
```

`VideoFxProcessor.create`tente également de charger l'image depuis`backgroundReplacement.backgroundImageURL`. Si l'image ne se charge pas, le processeur lance une exception. Le processeur émet également des exceptions pour d'autres raisons, telles que des configurations non valides, des navigateurs non pris en charge ou un matériel sous-alimenté. 

# Configuration de l'VideoFxProcessorobjet pour le SDK Amazon Chime
<a name="configure-videofxprocessor"></a>

Les tableaux suivants répertorient les `VideoFxProcessor` propriétés que vous pouvez configurer. L'exemple ci-dessous montre une configuration d'exécution typique.

**Flou d’arrière-plan**  
Le flou d'arrière-plan possède les propriétés suivantes :


| Propriété | Type | Description | 
| --- | --- | --- | 
| `isEnabled` | `boolean` | Dans `true` ce cas, le filtre brouille l'arrière-plan. | 
| `strength` | `string` | Détermine l'étendue du flou. Valeurs valides : `low` \$1 `medium` \$1 `high`. | 

**Remplacement d’arrière-plan**  
Le remplacement de l'arrière-plan prend les paramètres suivants :


| Propriété | Type | Description | 
| --- | --- | --- | 
| `isEnabled` | `boolean` | Quand`true`, le filtre remplace l'arrière-plan. | 
| `backgroundImageURL` | `string` | URL de l'image d'arrière-plan. Le filtre redimensionne l'image de manière dynamique aux dimensions de l'écran actuel. Vous pouvez utiliser une chaîne telle que `https://...` ou une URL de données telle que`data:image/jpeg;base64`. | 
| `defaultColor` | `string` | Une chaîne de couleur hexadécimale telle que `000000` ou`FFFFFF`, ou une chaîne telle que `black` ou`white`. Si vous ne spécifiez pas d'URL d'image, le processeur l'utilise `defaultColor` comme arrière-plan. Si vous ne spécifiez pas de, `defaultColor` le processeur est noir par défaut. | 

**Modification d'une configuration lors de l'exécution**  
Vous pouvez modifier une `VideoFxProcessor` configuration lors de l'exécution à l'aide du `videoFxProcessor.setEffectConfig` paramètre. L'exemple suivant montre comment activer le remplacement de l'arrière-plan et désactiver le flou d'arrière-plan.

**Note**  
Vous ne pouvez spécifier qu'un seul type de remplacement d'arrière-plan à la fois. Spécifiez une valeur pour `backgroundImageURL` ou`defaultColor`, mais pas les deux.

```
videoFxConfig.backgroundBlur.isEnabled = false;
videoFxConfig.backgroundReplacement.isEnabled = true;
try {
  await videoFxProcessor.setEffectConfig(videoFxConfig);
} catch(error) {
  logger.error(error.toString())
}
```

Si `setEffectConfig` une exception est émise, la configuration précédente reste en vigueur. `setEffectConfig`lance des exceptions dans des conditions similaires à celles qui `VideoFxProcessor.create` entraînent le rejet d'exceptions.

L'exemple suivant montre comment modifier une image d'arrière-plan pendant l'exécution de la vidéo.

```
videoFxConfig.backgroundReplacement.backgroundImageURL = "https://my-domain.com/my-other-image.jpg";
try {
  await videoFxProcessor.setEffectConfig(videoFxConfig);
} catch(error) {
  logger.error(error.toString())
}
```

# Création de l'VideoTransformDeviceobjet pour le SDK Amazon Chime
<a name="create-video-transform"></a>

L'exemple suivant montre comment créer un `VideoTransformDevice` objet contenant le`VideoFxProcessor`.

```
// assuming that logger and videoInputDevice have already been set    
const videoTransformDevice = new DefaultVideoTransformDevice(
  logger,
  videoInputDevice,
  [videoFxProcessor]
);
```

# Démarrage de l'entrée vidéo pour le SDK Amazon Chime
<a name="start-video-input"></a>

L'exemple suivant montre comment utiliser l'`VideoTransformDevice`objet pour démarrer une entrée vidéo. 

```
// assuming that meetingSession has already been created
await meetingSession.audioVideo.startVideoInput(videoTransformDevice);
meetingSession.audioVideo.start();
meetingSession.audioVideo.startLocalVideoTile();
```

# Optimisation de l'utilisation des ressources pour le SDK Amazon Chime
<a name="tuning"></a>

Lors de la création du`VideoFxProcessor`, vous pouvez fournir le `processingBudgetPerFrame` paramètre optionnel et contrôler la quantité de CPU et de GPU utilisée par les filtres.

```
let videoFxProcessor: VideoFxProcessor | undefined = undefined;
const processingBudgetPerFrame = 50;
try {
  videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig, processingBudgetPerFrame);
} catch (error) {
  logger.warn(error.toString());
}
```

Le `VideoFxProcessor` traitement d'un cadre prend du temps. La durée dépend de l'appareil, du navigateur et des autres éléments qui s'exécutent dans le navigateur ou sur l'appareil. Le processeur utilise le concept de *budget* pour cibler le temps nécessaire au traitement et au rendu de chaque image.

Le temps de traitement est exprimé en millisecondes. À titre d'exemple d'utilisation d'un budget, 1 seconde correspond à 1 000 ms. Le ciblage de 15 images par seconde de capture vidéo permet d'obtenir un budget total de 1 000 ms/15 images par seconde = 66 ms. Vous pouvez définir un budget de 50 % de ce montant, soit 33 ms, en fournissant la valeur `50` dans le `processingBudgetPerFrame` paramètre, comme indiqué dans l'exemple ci-dessus.

Il essaie `VideoFxProcessor` ensuite de traiter les cadres dans les limites du budget spécifié. Si le traitement dépasse le budget, le processeur réduit la qualité visuelle pour respecter le budget. Le processeur continue de réduire la qualité visuelle au minimum, date à laquelle elle cesse de diminuer. Cette durée de traitement est mesurée en continu. Ainsi, si davantage de ressources deviennent disponibles, par exemple si une autre application ferme et libère du processeur, le processeur améliore à nouveau la qualité visuelle jusqu'à atteindre le budget prévu ou jusqu'à ce qu'une qualité visuelle maximale soit atteinte.

Si vous ne fournissez aucune valeur à`processingBudgetPerFrame`, la valeur `VideoFxProcessor` par défaut est. `50`

# Exemple de filtre d'arrière-plan pour le SDK Amazon Chime
<a name="example-bg-filter"></a>

L'exemple suivant montre comment implémenter les filtres.

```
import {
    VideoFxConfig,
    VideoFxTypeConversion,
    VideoTransformDevice,
    DefaultVideoTransformDevice,
    Logger,
    VideoFxProcessor,
    MeetingSession
} from 'amazon-chime-sdk-js';

let videoTransformDevice: VideoTransformDevice | undefined = undefined;
let videoFxProcessor: VideoFxProcessor | undefined = undefined;

const videoFxConfig: VideoFxConfig = {
    backgroundBlur: {
        isEnabled: false,
        strength: "medium"
    },
    backgroundReplacement: {
        isEnabled: false,
        backgroundImageURL: 'space.jpg',
        defaultColor: undefined,
    }
}

export const addEffectsToMeeting = async (videoInputDevice: MediaDeviceInfo, meetingSession: MeetingSession, logger: Logger): Promise<void> => {
    try {
        videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig);
    } catch (error) {
        logger.error(error.toString());
        return;
    }

    videoTransformDevice = new DefaultVideoTransformDevice(
        logger,
        videoInputDevice,
        [videoFxProcessor]
    );

    await meetingSession.audioVideo.startVideoInput(videoTransformDevice);
}

export const enableReplacement = async (logger: Logger) => {
    videoFxConfig.backgroundBlur.isEnabled = false;
    videoFxConfig.backgroundReplacement.isEnabled = true;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const enableBlur = async (logger: Logger) => {
    videoFxConfig.backgroundReplacement.isEnabled = false;
    videoFxConfig.backgroundBlur.isEnabled = true;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const pauseEffects = async (logger: Logger) => {
    videoFxConfig.backgroundReplacement.isEnabled = false;
    videoFxConfig.backgroundBlur.isEnabled = false;
    await updateVideoFxConfig(videoFxConfig, logger);

}

export const setReplacementImage = async (newImageUrl: string, logger: Logger) => {
    videoFxConfig.backgroundReplacement.backgroundImageURL = newImageUrl;
    videoFxConfig.backgroundReplacement.defaultColor = undefined;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const setReplacementDefaultColor = async (newHexColor: string, logger: Logger) => {
    videoFxConfig.backgroundReplacement.defaultColor = newHexColor;
    videoFxConfig.backgroundReplacement.backgroundImageURL = undefined;
    await updateVideoFxConfig(videoFxConfig, logger);
}

export const setBlurStrength = async (newStrength: number, logger: Logger) => {
    videoFxConfig.backgroundBlur.strength = VideoFxTypeConversion.useBackgroundBlurStrengthType(newStrength);
    await updateVideoFxConfig(videoFxConfig, logger);

}

export const updateVideoFxConfig = async (config: VideoFxConfig, logger: Logger) => {
    try {
        await videoFxProcessor.setEffectConfig(videoFxConfig);
    } catch (error) {
        logger.error(error.toString())
    }
}

export const turnOffEffects = () => {
    const innerDevice = await videoTransformDevice?.intrinsicDevice();
    await videoTransformDevice?.stop();
    videoTransformDevice = undefined;
    videoFxProcessor = undefined;
    await meetingSession.audioVideo.startVideoInput(innerDevice);
}
```