Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich. # Integration von Hintergrundfiltern in eine Client-Anwendung für das Amazon Chime SDK In diesem Abschnitt wird erklärt, wie Videohintergründe mithilfe von Background Blur 2.0 und Background Replacement 2.0 programmatisch gefiltert werden. Um einem Videostream einen Hintergrundfilter hinzuzufügen, erstellen Sie einen, der ein Objekt `VideoFxProcessor` enthält. `VideoFxConfig` Anschließend fügen Sie diesen Prozessor in einen ein`VideoTransformDevice`. Der Hintergrundfilterprozessor verwendet ein TensorFlow Lite-Modell für maschinelles Lernen, JavaScript Web Workers, und WebAssembly wendet einen Filter auf den Hintergrund jedes Frames im Videostream an. Diese Elemente werden zur Laufzeit heruntergeladen, wenn Sie eine erstellen`VideoFxProcessor`. Die [Browser-Demoanwendung GitHub](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/browser) verwendet die neuen Filter für Hintergrundunschärfe und Ersatzfilter. Um sie auszuprobieren, starten Sie die Demo mit`npm run start`, nehmen Sie am Meeting teil und klicken Sie dann auf die Kamera, um das Video zu aktivieren. Öffnen **Sie das Menü Filter anwenden** (![\[Button with a circle and a downward arrow.\]](http://docs.aws.amazon.com/de_de/chime-sdk/latest/dg/images/blur-apply-filter-initial.png)) und wählen Sie eine der Optionen **Background Blur 2.0** oder **Background Replacement 2.0**. **Topics** + [Über die Verwendung von Hintergrundfiltern für das Amazon Chime SDK](about-bg-filters.md) + [Verwenden einer Inhaltssicherheitsrichtlinie mit der Amazon Chime SDK-Clientbibliothek für JavaScript](content-security.md) + [Hinzufügen von Hintergrundfiltern zu Ihrer Anwendung für das Amazon Chime SDK](add-filters.md) + [Beispiel für einen Hintergrundfilter für das Amazon Chime SDK](example-bg-filter.md) # Über die Verwendung von Hintergrundfiltern für das Amazon Chime SDK Hintergrundfilter können rechenintensiv und GPU-intensiv sein. Einige Mobilgeräte und Laptops oder Desktop-Computer mit niedrigerer Spezifikation sind möglicherweise nicht in der Lage, die Filter zusammen mit mehreren Videostreams auszuführen. ## SIMD-Unterstützung für das Amazon Chime SDK Hintergrundfilter sind in Umgebungen, die Single Instruction, Multiple Data (SIMD) unterstützen, effizienter. Wenn Sie SIMD aktivieren, verbrauchen die Filter für einen bestimmten Komplexitätsgrad weniger CPU. Geräte mit geringem Stromverbrauch, auf denen Browser ohne SIMD-Unterstützung ausgeführt werden, können möglicherweise keine Hintergrundfilter ausführen. ## GL2 Webunterstützung für das Amazon Chime SDK Das `VideoFxProcessor` Objekt benötigt Browser, die Web unterstützen, um GL2 auf die GPU auf dem Client-Gerät zugreifen zu können. ## Inhaltsbereitstellung und Bandbreite für das Amazon Chime SDK Ein Amazon Content Delivery Network lädt die machine-learning-model Dateien für Hintergrundfilter zur Laufzeit. Dies ermöglicht eine globale Verteilung mit geringer Latenz, ohne dass Sie eine vollständige Suite von Dateien als Teil Ihrer Anwendung bereitstellen müssen. Das Laden von Modelldateien kann jedoch die Latenz von Teilen Ihrer Anwendung erhöhen. Um diese Auswirkungen abzumildern, speichern Browser die Modelldateien unbegrenzt im Cache. Durch diesen Cache werden nachfolgende Ladevorgänge erheblich beschleunigt. Es hat sich bewährt, nach unterstützten Browsern zu suchen und dann die Hintergrundfilterressourcen zu erstellen, wenn Benutzer möglicherweise keine Latenz bemerken. Sie können beispielsweise Modelldateien herunterladen, während Benutzer in einer Lobby warten oder während sie eine Geräteauswahl verwenden. Ihre Anwendung muss eine Verbindung zu folgenden Geräten herstellen: + Mediendienste des Amazon Chime SDK. + Amazon CloudFront über HTTPS (Port 443). Alle Anfragen beziehen sich auf Subdomains von. `sdkassets.chime.aws` Anwendungen, die nicht auf das Content Delivery Network zugreifen können oder die nicht die richtige Domain in ihre [Inhaltssicherheitsrichtlinie](content-security.md) aufnehmen, bestehen ihre Supportprüfungen nicht und können die Filter nicht verwenden. Weitere Informationen zu den CloudFront IP-Adressbereichen finden Sie unter [Standorte und IP-Adressbereiche von CloudFront Edge-Servern](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html) im *Amazon CloudFront Developer Guide*. ## Browserkompatibilität für das Amazon Chime SDK In der folgenden Tabelle sind die Browser und Versionen aufgeführt, die Hintergrundfilter unterstützen. | Browser | Unterstützte Mindestversion | | --- | --- | | Firefox | 76\$1 | | Chromium-basierte Browser und Umgebungen, einschließlich Edge und Electron | 78\$1 | | Android Chrome | 110\$1 | | Safari auf macOS | 16.3\$1 | | Safari auf iOS (iPhone, iPad) | 16.x | | Chrome auf iOS | 110.0.0.x.x | | Firefox auf iOS (iPhone iPad) | 16.x | Version 3.14 des `VideoFxProcessor` Objekts unterstützt Android. Für die Unterstützung von Android-Geräten in Versionen vor 3.14 verwenden Sie die Objekte `BackgroundBlurVideoFrameProcessor` und`BackgroundReplacementVideoFrameProcessor`. Weitere Informationen zu ihrer Verwendung finden Sie auf der [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)Seite unter. GitHub # Verwenden einer Inhaltssicherheitsrichtlinie mit der Amazon Chime SDK-Clientbibliothek für JavaScript Moderne Webanwendungen verwenden eine Inhaltssicherheitsrichtlinie, um Benutzer vor bestimmten Arten von Angriffen zu schützen. Anwendungen, die die verwenden, `VideoFxProcessor` müssen die in diesem Abschnitt beschriebenen Richtlinienrichtlinien enthalten. Die Direktiven gewähren dem Amazon Chime SDK Zugriff auf die Ressourcen, die es zur Laufzeit benötigt. **Topics** + [Erforderliche Richtlinien zur Inhaltssicherheitsrichtlinie](#required-csp) + [Beispiel für eine Richtlinie zur Inhaltssicherheit](#example-csp) + [Fehler in der Inhaltssicherheitsrichtlinie](#csp-errors) + [Richtlinie zur Sicherheit ursprungsübergreifender Opener-Inhalte](#cross-origin-policy) ## Erforderliche Richtlinien zur Inhaltssicherheitsrichtlinie Sie müssen die folgenden Richtlinien für Inhaltssicherheitsrichtlinien verwenden. + Zum `script-src:` Hinzufügen`blob: https://*.sdkassets.chime.aws`, um den Videoverarbeitungscode `wasm-unsafe-eval` zu laden und seine Ausführung zu ermöglichen. + Zum `script-src-elem:` Hinzufügen `blob:``https://*.sdkassets.chime.aws`, um den Videoverarbeitungscode aus der Quelle zu laden. + Zum `worker-src:` Hinzufügen`blob: https://*.sdkassets.chime.aws`, um den Worker JavaScript ursprungsübergreifend zu laden. Wenn Sie einen dieser Einträge weglassen oder HTTP-Header und `http-equiv` Metatags verwenden, um eine Richtlinie zu spezifizieren und versehentlich einen dieser Einträge aufgrund von Überschneidungen ausschließen, kann ein Hintergrundfilter nicht initialisiert werden. Der Filter scheint nicht unterstützt zu werden, oder er erzeugt einen No-Op-Videoframe-Prozessor. In Ihrer Browserkonsole werden Fehler angezeigt, wie z. B.: ``` Refused to connect to 'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…' because it violates the document's content security policy. ``` ### Erforderliche Richtlinien für Skriptrichtlinien Um zu funktionieren, muss die `VideoFxProcessor` Klasse zur Laufzeit JavaScript Klassen aus einem Amazon Content Delivery Network laden. Diese Klassen verwenden WebGL2 , um die Nachbearbeitung von Videos zu implementieren. Damit eine Anwendung diese Klassen abrufen und ausführen kann, müssen Sie die folgenden Anweisungen angeben: + `script-src 'self' blob: https://*.sdkassets.chime.aws` + `script-src-elem 'self' blob: https://*.sdkassets.chime.aws` **Anmerkung** Für die vollständige Unterstützung von Safari und Firefox müssen Sie die `script-src-elem` Direktiven `script-src` und verwenden. ### Richtlinie zur Arbeitnehmerpolitik Die `VideoFxProcessor` lädt JavaScript Klassen als Blob, um einen Web-Worker-Thread auszuführen. Der Thread verwendet Modelle für maschinelles Lernen, um Videos zu verarbeiten. Um einer Anwendung Zugriff auf das Abrufen und Verwenden dieses Workers zu gewähren, fügen Sie die folgende Anweisung hinzu: `worker-src 'self' blob: https://*.sdkassets.chime.aws` ### WebAssembly Richtlinie Das `VideoFxProcessor` lädt ein WebAssembly (WASM) -Modul aus demselben Amazon-eigenen Content Delivery Network. In Chrome 95 und höher können kompilierte WASM-Module nicht über mehrere Modulgrenzen hinweg weitergegeben werden. Um das Abrufen und Instanziieren dieser Module zu ermöglichen, fügen Sie sie in die Direktive ein`'wasm-unsafe-eval'`. `script-src` Weitere Informationen zur Dokumentation der Content Security Policy für WebAssembly finden Sie unter [WebAssembly Content Security](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md) Policy unter. GitHub ### (Optional) Richtlinie zur Richtlinie „Hintergrundbild“ Um ein dynamisch geladenes Hintergrundbild mit einem Ersatzfilter für den Hintergrund zu verwenden, `VideoFxProcessor` müssen sie Zugriff auf das Bild haben. Fügen Sie dazu der Domain, die das Bild hostet, eine `connect-src` Direktive hinzu. ## Beispiel für eine Richtlinie zur Inhaltssicherheit Mit der folgenden Beispielrichtlinie können Sie die verwenden`VideoFxProcessor`. Die `connect-src` Definitionen sind nicht spezifisch für `VideoFxProcessor` a. Stattdessen beziehen sie sich auf die Audio- und Videodaten eines Amazon Chime SDK-Meetings. ``` ``` ## Fehler in der Inhaltssicherheitsrichtlinie Wenn Sie eine der erforderlichen Anweisungen weglassen, `VideoFxProcessor` werden sie nicht instanziiert und nicht unterstützt. In diesem Fall wird der folgende (oder ein ähnlicher) Fehler in der Browserkonsole angezeigt: ``` Refused to connect to 'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js' because it violates the document's content security policy. ``` ## Richtlinie zur Sicherheit ursprungsübergreifender Opener-Inhalte Um die Speichernutzung zu begrenzen, verwendet das Modul bevorzugt a `SharedArrayBuffer` für die Verarbeitung. Dies erfordert jedoch, dass Sie die Websicherheit sorgfältig konfigurieren. Sie müssen die folgenden Header festlegen, wenn Sie den HTML-Code Ihrer Anwendung bereitstellen: ``` Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp ``` Der Server muss diese festlegen, da sie keine Metatag-Entsprechungen haben. Wenn Sie diese Header nicht festlegen, verbrauchen die Hintergrundfilter möglicherweise etwas mehr RAM. Hintergrundfilter können rechenintensiv und GPU-intensiv sein. Einige Mobilgeräte und Laptops oder Desktop-Computer mit niedrigerer Spezifikation sind möglicherweise nicht in der Lage, die Filter zusammen mit mehreren Videostreams auszuführen. # Hinzufügen von Hintergrundfiltern zu Ihrer Anwendung für das Amazon Chime SDK Das Hinzufügen von Hintergrundfiltern erfolgt im Großen und Ganzen wie folgt: + Suchen Sie nach unterstützten Browsern. + Erstellen Sie ein `VideoFxConfig` Objekt mit der Konfiguration, die Sie verwenden möchten. + Verwenden Sie das Konfigurationsobjekt, um ein `VideoFxProcessor` Objekt zu erstellen. + Schließt das `VideoFxProcessor` Objekt in ein ein`VideoTransformDevice`. + Verwenden Sie den`VideoTransformDevice`, um den Videoeingang zu starten. **Anmerkung** Um diese Schritte abzuschließen, müssen Sie zuerst: Erstellen Sie einen `Logger`. Wählen Sie ein Videogerät der Klasse`MediaDeviceInfo`. Treten Sie erfolgreich einem bei`MeetingSession`. In den folgenden Abschnitten wird erläutert, wie der Vorgang abgeschlossen wird. **Topics** + [Überprüfen Sie, ob Support verfügbar ist, bevor Sie einen Filter für das Amazon Chime SDK anbieten](support-check.md) + [Ein VideoFxConfig Objekt für das Amazon Chime SDK erstellen](create-videofxconfig.md) + [Ein VideoFxProcessor Objekt für das Amazon Chime SDK erstellen](create-videofxprocessor.md) + [Konfiguration des VideoFxProcessor Objekts für das Amazon Chime SDK](configure-videofxprocessor.md) + [Das VideoTransformDevice Objekt für das Amazon Chime SDK erstellen](create-video-transform.md) + [Videoeingabe für das Amazon Chime SDK starten](start-video-input.md) + [Optimierung der Ressourcennutzung für das Amazon Chime SDK](tuning.md) # Überprüfen Sie, ob Support verfügbar ist, bevor Sie einen Filter für das Amazon Chime SDK anbieten Das Amazon Chime SDK bietet eine asynchrone statische Methode, die nach unterstützten Browsern sucht und versucht, die erforderlichen Ressourcen herunterzuladen. Es überprüft jedoch nicht die Geräteleistung. Als bewährte Methode sollten Sie immer sicherstellen, dass die Browser und Geräte der Benutzer die Filter unterstützen, bevor Sie die Filter anbieten. ``` import { VideoFxProcessor } from 'amazon-chime-sdk-js'; if (!await VideoFxProcessor.isSupported(logger)) { // logger is optional for isSupported } ``` # Ein VideoFxConfig Objekt für das Amazon Chime SDK erstellen Sie können Konfigurationen für `backgroundBlur` und `backgroundReplacement` im selben Objekt definieren. Sie können jedoch nicht `isEnabled` `true` für beide Filter gleichzeitig auf einstellen. Das ist eine ungültige Konfiguration. Die `VideoFxConfig` Klasse führt keine eigene Validierung durch. Die Validierung erfolgt im nächsten Schritt. Das folgende Beispiel zeigt eine gültige`VideoFxConfig`. ``` const videoFxConfig: VideoFxConfig = { backgroundBlur: { isEnabled: false, strength: 'medium' }, backgroundReplacement: { isEnabled: false, backgroundImageURL: 'space.jpg', defaultColor: undefined, } } ``` In den folgenden Tabellen sind die `VideoFxProcessor` Eigenschaften aufgeführt, die Sie im `VideoFxConfig` Objekt angeben können. **Eigenschaften des Filters für Hintergrundunschärfe** | Eigenschaft | Typ | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Wann `true` verwischt der Filter den Hintergrund. | | `strength` | `string` | Bestimmt das Ausmaß der Unschärfe. Zulässige Werte: `low` \$1 `medium` \$1 `high`. | **Eigenschaften des Ersatzfilters für den Hintergrund** | Eigenschaft | Typ | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Wann `true` ersetzt der Filter den Hintergrund\$1. | | `backgroundImageURL` | `string` | Die URL des Hintergrundbilds. Der Filter passt die Bildgröße dynamisch an die Abmessungen des aktuellen Bildschirms an. Sie können eine Zeichenfolge wie `https://...` oder eine Daten-URL wie `data:image/jpeg;base64` verwenden. | | `defaultColor` | `string` | Eine hexadezimale Zeichenfolge wie `000000` oder `FFFFFF` oder oder eine Zeichenfolge wie `black` oder`white`. Wenn Sie keine Bild-URL angeben, verwendet der Prozessor die `defaultColor` als Hintergrund. Wenn Sie kein A angeben`defaultColor`, ist der Prozessor standardmäßig schwarz. | # Ein VideoFxProcessor Objekt für das Amazon Chime SDK erstellen Beim Erstellen des `VideoFxProcessor` Objekts laden AWS Server die Runtime-Assets herunter, oder ein Browser-Cache lädt die Assets. Wenn Netzwerk- oder CSP-Konfigurationen den Zugriff auf die Ressourcen verhindern, löst der `VideoFx.create` Vorgang eine Ausnahme aus. Das Ergebnis VideoFxProcessor ist als No-Op-Prozessor konfiguriert, was sich nicht auf den Videostream auswirkt. ``` let videoFxProcessor: VideoFxProcessor | undefined = undefined; try { videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig); } catch (error) { logger.warn(error.toString()); } ``` `VideoFxProcessor.create`versucht auch, das Bild von `backgroundReplacement.backgroundImageURL` zu laden. Wenn das Bild nicht geladen werden kann, löst der Prozessor eine Ausnahme aus. Der Prozessor löst auch aus anderen Gründen Ausnahmen aus, z. B. aufgrund ungültiger Konfigurationen, nicht unterstützter Browser oder unzureichender Hardware. # Konfiguration des VideoFxProcessor Objekts für das Amazon Chime SDK In den folgenden Tabellen sind die `VideoFxProcessor` Eigenschaften aufgeführt, die Sie konfigurieren können. Das Beispiel unter den Tabellen zeigt eine typische Laufzeitkonfiguration. **Unschärfe im Hintergrund** Die Hintergrundunschärfe hat die folgenden Eigenschaften: | Eigenschaft | Typ | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Wann `true` verwischt der Filter den Hintergrund. | | `strength` | `string` | Bestimmt das Ausmaß der Unschärfe. Zulässige Werte: `low` \$1 `medium` \$1 `high`. | **Ersetzen des Hintergrunds** Das Ersetzen des Hintergrunds erfordert die folgenden Parameter: | Eigenschaft | Typ | Description | | --- | --- | --- | | `isEnabled` | `boolean` | Wann `true` ersetzt der Filter den Hintergrund. | | `backgroundImageURL` | `string` | Die URL des Hintergrundbilds. Der Filter passt die Bildgröße dynamisch an die Abmessungen des aktuellen Bildschirms an. Sie können eine Zeichenfolge wie `https://...` oder eine Daten-URL wie `data:image/jpeg;base64` verwenden. | | `defaultColor` | `string` | Eine hexadezimale Zeichenfolge wie `000000` oder `FFFFFF` oder oder eine Zeichenfolge wie `black` oder`white`. Wenn Sie keine Bild-URL angeben, verwendet der Prozessor die `defaultColor` als Hintergrund. Wenn Sie kein A angeben, `defaultColor` ist der Prozessor standardmäßig schwarz. | **Änderung einer Konfiguration zur Laufzeit** Sie können eine `VideoFxProcessor` Konfiguration zur Laufzeit ändern, indem Sie den `videoFxProcessor.setEffectConfig` Parameter verwenden. Das folgende Beispiel zeigt, wie Sie die Hintergrundersetzung aktivieren und die Hintergrundunschärfe deaktivieren. **Anmerkung** Sie können jeweils nur einen Typ der Hintergrundersetzung angeben. Geben Sie einen Wert für `backgroundImageURL` oder an`defaultColor`, aber nicht für beide. ``` videoFxConfig.backgroundBlur.isEnabled = false; videoFxConfig.backgroundReplacement.isEnabled = true; try { await videoFxProcessor.setEffectConfig(videoFxConfig); } catch(error) { logger.error(error.toString()) } ``` Wenn `setEffectConfig` eine Ausnahme ausgelöst wird, bleibt die vorherige Konfiguration gültig. `setEffectConfig`löst Ausnahmen unter Bedingungen aus, die denen ähneln, die zur Auslösung von Ausnahmen führen`VideoFxProcessor.create`. Das folgende Beispiel zeigt, wie Sie ein Hintergrundbild ändern können, während das Video läuft. ``` videoFxConfig.backgroundReplacement.backgroundImageURL = "https://my-domain.com/my-other-image.jpg"; try { await videoFxProcessor.setEffectConfig(videoFxConfig); } catch(error) { logger.error(error.toString()) } ``` # Das VideoTransformDevice Objekt für das Amazon Chime SDK erstellen Das folgende Beispiel zeigt, wie Sie ein `VideoTransformDevice` Objekt erstellen, das das enthält`VideoFxProcessor`. ``` // assuming that logger and videoInputDevice have already been set const videoTransformDevice = new DefaultVideoTransformDevice( logger, videoInputDevice, [videoFxProcessor] ); ``` # Videoeingabe für das Amazon Chime SDK starten Das folgende Beispiel zeigt, wie das `VideoTransformDevice` Objekt verwendet wird, um die Videoeingabe zu starten. ``` // assuming that meetingSession has already been created await meetingSession.audioVideo.startVideoInput(videoTransformDevice); meetingSession.audioVideo.start(); meetingSession.audioVideo.startLocalVideoTile(); ``` # Optimierung der Ressourcennutzung für das Amazon Chime SDK Bei der Erstellung des `VideoFxProcessor` können Sie den optionalen `processingBudgetPerFrame` Parameter angeben und die Menge an CPU und GPU steuern, die die Filter verwenden. ``` let videoFxProcessor: VideoFxProcessor | undefined = undefined; const processingBudgetPerFrame = 50; try { videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig, processingBudgetPerFrame); } catch (error) { logger.warn(error.toString()); } ``` Das `VideoFxProcessor` benötigt Zeit, um einen Frame zu verarbeiten. Die Dauer hängt vom Gerät, vom Browser und davon ab, was sonst noch im Browser oder auf dem Gerät läuft. Der Prozessor verwendet das Konzept eines *Budgets, um festzulegen*, wie viel Zeit für die Verarbeitung und das Rendern der einzelnen Frames benötigt wird. Die Verarbeitungszeit wird in Millisekunden angegeben. Als Beispiel für die Verwendung eines Budgets gilt: 1 Sekunde entspricht 1000 ms. Wenn Sie eine Videoaufnahme von 15 Bildern pro Sekunde anstreben, ergibt sich ein Gesamtbudget von 1000 ms/15 Bildern pro Sekunde = 66 ms. Sie können ein Budget von 50% davon oder 33 ms festlegen, indem Sie den Wert `50` im `processingBudgetPerFrame` Parameter angeben, wie im obigen Beispiel gezeigt. Der versucht `VideoFxProcessor` dann, die Frames innerhalb des angegebenen Budgets zu verarbeiten. Wenn das Budget für die Verarbeitung überschritten wird, reduziert der Prozessor die visuelle Qualität, um das Budget einzuhalten. Der Prozessor reduziert die visuelle Qualität weiterhin auf ein Minimum und hört dann auf zu reduzieren. Diese Verarbeitungsdauer wird kontinuierlich gemessen. Wenn also mehr Ressourcen verfügbar werden, z. B. wenn eine andere App geschlossen wird und die CPU wieder freigegeben wird, erhöht der Prozessor die visuelle Qualität erneut, bis das Budget erreicht ist oder die maximale visuelle Qualität erreicht ist. Wenn Sie keinen Wert für angeben`processingBudgetPerFrame`, ist der `VideoFxProcessor` Standardwert. `50` # Beispiel für einen Hintergrundfilter für das Amazon Chime SDK Das folgende Beispiel zeigt, wie die Filter implementiert werden. ``` 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 => { 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); } ```