기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # Amazon Chime SDK용 클라이언트 애플리케이션에 백그라운드 필터 통합 이 섹션에서는 배경 흐림 2.0 및 배경 교체 2.0을 사용하여 비디오 배경을 프로그래밍 방식으로 필터링하는 방법을 설명합니다. 비디오 스트림에 배경 필터를 추가하려면 `VideoFxConfig` 객체가 포함된 `VideoFxProcessor`를 만들어야 합니다. 그런 다음 해당 프로세서를 `VideoTransformDevice`에 삽입합니다. 배경 필터 프로세서는 TensorFlow Lite 기계 학습 모델, JavaScript 웹 워커, WebAssembly를 사용하여 비디오 스트림의 각 프레임 배경에 필터를 적용합니다. 이러한 에셋은 `VideoFxProcessor` 생성 시 런타임에 다운로드됩니다. [GitHub의 브라우저 데모 애플리케이션](https://github.com/aws/amazon-chime-sdk-js/tree/main/demos/browser)은 새로운 배경 흐림 및 대체 필터를 사용합니다. 시험해 보려면 `npm run start`로 데모를 시작하고 회의에 참여한 다음 카메라를 클릭하여 비디오를 활성화하세요. **필터 적용** 메뉴(![\[Button with a circle and a downward arrow.\]](http://docs.aws.amazon.com/ko_kr/chime-sdk/latest/dg/images/blur-apply-filter-initial.png)) 를 열고 **배경 흐림 2.0** 또는 **배경 교체 2.0** 옵션 중 하나를 선택합니다. **Topics** + [Amazon Chime SDK용 백그라운드 필터 사용 정보](about-bg-filters.md) + [ㅂJavaScript용 Amazon Chime SDK 클라이언트 라이브러리에서 content-security 정책 사용](content-security.md) + [Amazon Chime SDK용 애플리케이션에 백그라운드 필터 추가](add-filters.md) + [Amazon Chime SDK의 배경 필터 예시](example-bg-filter.md) # Amazon Chime SDK용 백그라운드 필터 사용 정보 배경 필터는 CPU를 많이 사용하고 GPU를 많이 사용할 수 있습니다. 일부 모바일 디바이스와 저사양 노트북 또는 데스크톱 컴퓨터에서는 여러 개의 동영상 스트림과 함께 필터를 실행할 수 없을 수도 있습니다. ## Amazon Chime SDK에 대한 SIMD 지원 배경 필터는 SIMD(단일 명령, 다중 데이터)를 지원하는 환경에서 더 효율적입니다. SIMD를 활성화하면 필터는 주어진 복잡성 수준에 대해 더 적은 CPU를 사용합니다. SIMD를 지원하지 않는 브라우저를 실행하는 저전력 디바이스는 배경 필터를 실행하지 못할 수 있습니다. ## Amazon Chime SDK에 대한 WebGL2 지원 `VideoFxProcessor` 객체가 클라이언트 디바이스의 GPU에 액세스하려면 WebGL2를 지원하는 브라우저가 필요합니다. ## Amazon Chime SDK의 콘텐츠 전송 및 대역폭 Amazon 콘텐츠 전송 네트워크는 런타임에 배경 필터용 기계 학습 모델 파일을 로드합니다. 따라서 애플리케이션의 일부로 전체 파일 세트를 제공할 필요 없이 지연 시간이 짧은 글로벌 배포가 가능합니다. 하지만 모델 파일을 로드하면 애플리케이션 일부에 지연 시간이 늘어날 수 있습니다. 이러한 영향을 줄이기 위해 브라우저는 모델 파일을 무기한 캐시합니다. 이 캐시를 사용하면 후속 로드 속도가 훨씬 빨라집니다. 가장 좋은 방법은 지원되는 브라우저를 확인한 다음 사용자가 대기 시간을 느끼지 못할 때 배경 필터 리소스를 생성하는 것입니다. 예를 들어, 사용자가 로비에서 기다리는 동안이나 디바이스 선택기를 사용하는 동안 모델 파일을 다운로드할 수 있습니다. 애플리케이션은 다음에 연결되어야 합니다. + Amazon Chime SDK 미디어 서비스 + HTTPS를 통한 Amazon CloudFront(포트 443). 모든 요청은 `sdkassets.chime.aws`의 하위 도메인으로 이루어집니다. 콘텐츠 전송 네트워크에 액세스할 수 없거나 [콘텐츠 보안 정책](content-security.md)에 올바른 도메인을 포함하지 않는 애플리케이션은 지원 확인에 실패하고 필터를 사용할 수 없게 됩니다. CloudFront의 IP 주소 범위에 대한 자세한 내용은 Amazon CloudFront 개발자 안내서**의 [CloudFront 엣지 서버의 위치 및 IP 주소 범위](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html)를 참조하세요. ## Amazon Chime SDK의 브라우저 호환성 다음 표에는 배경 필터를 지원하는 브라우저와 버전 목록이 있습니다. | 브라우저 | 지원되는 최소 버전 | | --- | --- | | Firefox | 76 이상 | | Edge 및 Electron을 포함한 Chromium 기반 브라우저 및 환경 | 78 이상 | | Android Chrome | 110 이상 | | macOS용 Safari | 16.3 이상 | | iOS용 Safari(iPhone, iPad) | 16.x | | iOS용 Chrome | 110.0.0.x.x | | iOS용 Firefox(iPhone, iPad) | 16.x | `VideoFxProcessor` 객체 버전 3.14는 Android를 지원합니다. 3.14 이전 버전에서 Android 디바이스를 지원하려면 `BackgroundBlurVideoFrameProcessor` 및 `BackgroundReplacementVideoFrameProcessor` 객체를 사용하세요. 이러한 객체 사용에 대한 자세한 내용은 GitHub의 [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) 페이지를 참조하세요. # ㅂJavaScript용 Amazon Chime SDK 클라이언트 라이브러리에서 content-security 정책 사용 최신 웹 애플리케이션은 콘텐츠 보안 정책을 사용하여 특정 유형의 공격으로부터 사용자를 보호합니다. `VideoFxProcessor`를 사용하는 애플리케이션에는 이 단원에 설명된 정책 지시문이 포함되어야 합니다. 이 지시문을 사용하면 Amazon Chime SDK가 런타임에 필요한 리소스에 액세스할 수 있습니다. **Topics** + [필수 콘텐츠 보안 정책 지시문](#required-csp) + [콘텐츠 보안 정책 예제](#example-csp) + [콘텐츠 보안 정책 오류](#csp-errors) + [교차 오리진 오프너 콘텐츠 보안 정책](#cross-origin-policy) ## 필수 콘텐츠 보안 정책 지시문 다음 콘텐츠 보안 정책 지시문을 사용해야 합니다. + `script-src:`: `blob: https://*.sdkassets.chime.aws`를 추가하여 비디오 처리 코드를 로드하고 `wasm-unsafe-eval`을 추가하여 실행을 허용합니다. + `script-src-elem:`: `blob:` `https://*.sdkassets.chime.aws`를 추가하여 소스에서 비디오 처리 코드를 로드합니다. + `worker-src:`: `blob: https://*.sdkassets.chime.aws`를 추가하여 오리진 전체에서 작업자 JavaScript를 로드합니다. 이러한 항목 중 하나를 생략하거나 HTTP 헤더 및 `http-equiv` 메타 태그를 사용하여 정책을 지정하고 실수로 교차점을 통해 이러한 항목을 제외하는 경우 배경 필터를 초기화할 수 없습니다. 필터가 지원되지 않는 것 같거나 작동하지 않는 비디오 프레임 프로세서를 생성합니다. 브라우저 콘솔에 다음과 같은 오류가 표시됩니다. ``` Refused to connect to 'https://static.sdkassets.chime.aws/bgblur/workers/worker.js…' because it violates the document's content security policy. ``` ### 필수 스크립트 정책 지시문 제대로 작동하려면 `VideoFxProcessor` 클래스가 Amazon 콘텐츠 전송 네트워크에서 런타임에 JavaScript 클래스를 로드해야 합니다. 이러한 클래스는 WebGL2를 사용하여 비디오의 후처리를 구현합니다. 애플리케이션이 이러한 클래스를 가져와서 실행할 수 있게 하려면 다음 지시문을 포함해야 합니다. + `script-src 'self' blob: https://*.sdkassets.chime.aws` + `script-src-elem 'self' blob: https://*.sdkassets.chime.aws` **참고** Safari와 Firefox를 완벽하게 지원하려면 `script-src` 및 `script-src-elem` 지시문을 사용해야 합니다. ### 작업자 정책 지시문 `VideoFxProcessor`는 JavaScript 클래스를 blob으로 로드하여 웹 작업자 스레드를 실행합니다. 스레드는 기계 학습 모델을 사용하여 비디오를 처리합니다. 애플리케이션에 이 작업자를 가져오고 사용할 수 있는 액세스 권한을 부여하려면 다음 지시문을 포함하세요. `worker-src 'self' blob: https://*.sdkassets.chime.aws` ### WebAssembly 정책 `VideoFxProcessor`는 Amazon 소유의 동일한 콘텐츠 전송 네트워크에서 WASM(WebAssembly) 모듈을 로드합니다. Chrome 95 이상에서는 컴파일된 WASM 모듈을 여러 모듈 경계를 넘어 전달할 수 없습니다. 이러한 모듈을 가져오고 인스턴스화할 수 있도록 하려면 `script-src` 지시문에 `'wasm-unsafe-eval'`를 포함하세요. WebAssembly에 대한 콘텐츠 보안 정책 문서에 대한 자세한 내용은 GitHub의 [WebAssembly 콘텐츠 보안 정책](https://github.com/WebAssembly/content-security-policy/blob/main/proposals/CSP.md)을 참조하세요. ### (선택 사항) 배경 이미지 정책 지시문 동적으로 로드된 배경 이미지를 배경 교체 필터와 함께 사용하려면 `VideoFxProcessor`에 이미지에 대한 액세스 권한이 있어야 합니다. 그렇게 하려면 이미지를 호스팅하는 도메인에 `connect-src` 지시문을 포함시키세요. ## 콘텐츠 보안 정책 예제 다음 예제 정책을 사용하면 `VideoFxProcessor`를 사용할 수 있습니다. `connect-src` 정의는 `VideoFxProcessor`에만 국한되지 않습니다. 대신 Amazon Chime SDK 회의에서 나온 오디오 및 비디오와 관련이 있습니다. ``` ``` ## 콘텐츠 보안 정책 오류 필수 지침을 생략하면 `VideoFxProcessor`가 인스턴스화되지 않고 지원되지 않습니다. 이 경우 브라우저 콘솔에 다음과 같은(또는 유사한) 오류가 나타납니다. ``` Refused to connect to 'https://static.sdkassets.chime.aws/ml_media_fx/otherassets/worker.js' because it violates the document's content security policy. ``` ## 교차 오리진 오프너 콘텐츠 보안 정책 메모리 사용량을 제한하기 위해 모듈은 처리 용도로 `SharedArrayBuffer`를 사용하는 것을 선호합니다. 그러나 이를 위해서는 웹 보안을 신중하게 구성해야 합니다. 애플리케이션 HTML을 제공할 때는 다음 헤더를 설정해야 합니다. ``` Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp ``` 메타태그에 상응하는 항목이 없으므로 서버에서 이를 설정해야 합니다. 이러한 헤더를 설정하지 않으면 배경 필터가 약간 더 많은 RAM을 사용할 수 있습니다. 배경 필터는 CPU를 많이 사용하고 GPU를 많이 사용할 수 있습니다. 일부 모바일 디바이스와 저사양 노트북 또는 데스크톱 컴퓨터에서는 여러 개의 동영상 스트림과 함께 필터를 실행할 수 없을 수도 있습니다. # Amazon Chime SDK용 애플리케이션에 백그라운드 필터 추가 배경 필터를 추가하는 프로세스는 다음과 같은 광범위한 단계를 따릅니다. + 지원되는 브라우저를 확인하세요. + 사용하려는 구성으로 `VideoFxConfig` 객체를 생성합니다. + 구성 객체를 사용하여 `VideoFxProcessor` 객체를 생성합니다. + `VideoFxProcessor` 객체를 `VideoTransformDevice`에 포함시킵니다. + `VideoTransformDevice`를 사용하여 비디오 입력을 시작합니다. **참고** 이 단계를 완료하려면 먼저 다음을 수행해야 합니다. `Logger`를 만듭니다. 클래스 `MediaDeviceInfo`에 맞는 비디오 디바이스를 선택합니다. `MeetingSession`에 성공적으로 참여합니다. 다음 섹션의 단계에서는 프로세스를 완료하는 방법에 대해 설명합니다. **Topics** + [Amazon Chime SDK용 필터를 제공하기 전에 지원 여부 확인](support-check.md) + [Amazon Chime SDK용 VideoFxConfig 객체 생성](create-videofxconfig.md) + [Amazon Chime SDK용 VideoFxProcessor 객체 생성](create-videofxprocessor.md) + [Amazon Chime SDK용 VideoFxProcessor 객체 구성](configure-videofxprocessor.md) + [Amazon Chime SDK용 VideoTransformDevice 객체 생성](create-video-transform.md) + [Amazon Chime SDK의 비디오 입력 시작](start-video-input.md) + [Amazon Chime SDK의 리소스 사용률 튜닝](tuning.md) # Amazon Chime SDK용 필터를 제공하기 전에 지원 여부 확인 Amazon Chime SDK는 지원되는 브라우저를 확인하고 필요한 자산을 다운로드하려고 시도하는 비동기 정적 메서드를 제공합니다. 그러나 디바이스 성능을 확인하지는 않습니다. 필터를 제공하기 전에 항상 사용자의 브라우저와 디바이스가 필터를 지원할 수 있는지 확인하는 것이 좋습니다. ``` import { VideoFxProcessor } from 'amazon-chime-sdk-js'; if (!await VideoFxProcessor.isSupported(logger)) { // logger is optional for isSupported } ``` # Amazon Chime SDK용 VideoFxConfig 객체 생성 동일한 객체에서 `backgroundBlur` 및 `backgroundReplacement`에 대한 구성을 정의할 수 있습니다. 그러나 동시에 두 필터에 대해 `isEnabled`를 `true`로 설정할 수는 없습니다. 잘못된 구성입니다. `VideoFxConfig` 클래스는 자체 검증을 수행하지 않습니다. 다음 단계에서 검증이 수행됩니다. 다음 예제는 유효한 `VideoFxConfig`를 보여줍니다. ``` const videoFxConfig: VideoFxConfig = { backgroundBlur: { isEnabled: false, strength: 'medium' }, backgroundReplacement: { isEnabled: false, backgroundImageURL: 'space.jpg', defaultColor: undefined, } } ``` 다음 표에는 `VideoFxProcessor` 객체에 지정할 수 있는 `VideoFxConfig` 속성이 나열되어 있습니다. **배경 흐림 필터 속성** | 속성 | Type | 설명 | | --- | --- | --- | | `isEnabled` | `boolean` | `true`인 경우 필터가 배경을 흐리게 합니다. | | `strength` | `string` | 흐림 정도를 결정합니다. 유효한 값: `low` \$1 `medium` \$1 `high`. | **배경 교체필터 속성** | 속성 | Type | 설명 | | --- | --- | --- | | `isEnabled` | `boolean` | `true`인 경우 필터가 배경 을 대체합니다. | | `backgroundImageURL` | `string` | 배경 이미지의 URL입니다. 이 필터는 현재 화면의 크기에 맞게 이미지 크기를 동적으로 조정합니다. `https://...`와 같은 문자열 또는 `data:image/jpeg;base64`와 같은 데이터 URL을 사용할 수 있습니다. | | `defaultColor` | `string` | 16진수 색상 문자열(예: `000000` 또는 `FFFFFF`) 또는 문자열(예: `black` 또는 `white`)입니다. 이미지 URL을 지정하지 않으면 프로세서는 `defaultColor`를 배경으로 사용합니다. `defaultColor`를 지정하지 않으면 프로세서의 기본값은 검은색입니다. | # Amazon Chime SDK용 VideoFxProcessor 객체 생성 `VideoFxProcessor` 객체를 생성할 때 AWS 서버는 런타임 자산을 다운로드하거나 브라우저 캐시가 자산을 로드합니다. 네트워크 또는 CSP 구성으로 인해 자산에 대한 액세스가 차단되는 경우 `VideoFx.create` 작업에서 예외가 발생합니다. 생성된 VideoFXProcessor는 비운영 프로세서로 구성되어 비디오 스트림에 영향을 주지 않습니다. ``` let videoFxProcessor: VideoFxProcessor | undefined = undefined; try { videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig); } catch (error) { logger.warn(error.toString()); } ``` `VideoFxProcessor.create`도 `backgroundReplacement.backgroundImageURL`에서 이미지를 로드하려고 시도합니다. 이미지를 로드하지 못하면 프로세서에서 예외가 발생합니다. 또한 잘못된 구성, 지원되지 않는 브라우저 또는 저전력 하드웨어와 같은 다른 이유로 인해 프로세서에서 예외가 발생할 수 있습니다. # Amazon Chime SDK용 VideoFxProcessor 객체 구성 다음 표에는 구성할 수 있는 `VideoFxProcessor` 속성이 나열되어 있습니다. 표 아래의 예제는 일반적인 런타임 구성을 보여줍니다. **배경 흐림** 배경 흐림에는 다음 속성이 있습니다. | 속성 | Type | 설명 | | --- | --- | --- | | `isEnabled` | `boolean` | `true`인 경우 필터가 배경을 흐리게 합니다. | | `strength` | `string` | 흐림 정도를 결정합니다. 유효한 값: `low` \$1 `medium` \$1 `high`. | **배경 교체** 배경 교체에는 다음 파라미터가 사용됩니다. | 속성 | Type | 설명 | | --- | --- | --- | | `isEnabled` | `boolean` | `true`인 경우 필터가 배경을 대체합니다. | | `backgroundImageURL` | `string` | 배경 이미지의 URL입니다. 이 필터는 현재 화면의 크기에 맞게 이미지 크기를 동적으로 조정합니다. `https://...`와 같은 문자열 또는 `data:image/jpeg;base64`와 같은 데이터 URL을 사용할 수 있습니다. | | `defaultColor` | `string` | 16진수 색상 문자열(예: `000000` 또는 `FFFFFF`) 또는 문자열(예: `black` 또는 `white`)입니다. 이미지 URL을 지정하지 않으면 프로세서는 `defaultColor`를 배경으로 사용합니다. `defaultColor`를 지정하지 않으면 프로세서의 기본값은 검은색입니다. | **런타임 구성 변경** `videoFxProcessor.setEffectConfig` 파라미터를 사용하여 런타임에서 `VideoFxProcessor` 구성을 변경할 수 있습니다. 다음 예에서는 배경 교체를 활성화하고 배경 흐림을 비활성화하는 방법을 보여 줍니다. **참고** 한 번에 한 가지 유형의 배경 교체만 지정할 수 있습니다. `backgroundImageURL` 또는 `defaultColor` 의 값을 지정하되 둘 다 지정할 수는 없습니다. ``` videoFxConfig.backgroundBlur.isEnabled = false; videoFxConfig.backgroundReplacement.isEnabled = true; try { await videoFxProcessor.setEffectConfig(videoFxConfig); } catch(error) { logger.error(error.toString()) } ``` `setEffectConfig` 예외가 발생하는 경우 이전 구성이 계속 유효합니다. `setEffectConfig`는 `VideoFxProcessor.create`가 예외를 발생시키는 것과 유사한 조건에서 예외를 발생시킵니다. 다음 예제에서는 비디오가 실행되는 동안 배경 이미지를 변경하는 방법을 보여 줍니다. ``` videoFxConfig.backgroundReplacement.backgroundImageURL = "https://my-domain.com/my-other-image.jpg"; try { await videoFxProcessor.setEffectConfig(videoFxConfig); } catch(error) { logger.error(error.toString()) } ``` # Amazon Chime SDK용 VideoTransformDevice 객체 생성 다음 예제에서는 `VideoFxProcessor`를 포함하는 `VideoTransformDevice` 객체를 만드는 방법을 보여 줍니다. ``` // assuming that logger and videoInputDevice have already been set const videoTransformDevice = new DefaultVideoTransformDevice( logger, videoInputDevice, [videoFxProcessor] ); ``` # Amazon Chime SDK의 비디오 입력 시작 다음 예제에서는 `VideoTransformDevice` 객체를 사용하여 비디오 입력을 시작하는 방법을 보여 줍니다. ``` // assuming that meetingSession has already been created await meetingSession.audioVideo.startVideoInput(videoTransformDevice); meetingSession.audioVideo.start(); meetingSession.audioVideo.startLocalVideoTile(); ``` # Amazon Chime SDK의 리소스 사용률 튜닝 `VideoFxProcessor`를 생성할 때 선택적 `processingBudgetPerFrame` 파라미터를 제공하고 필터가 사용하는 CPU 및 GPU의 양을 제어할 수 있습니다. ``` let videoFxProcessor: VideoFxProcessor | undefined = undefined; const processingBudgetPerFrame = 50; try { videoFxProcessor = await VideoFxProcessor.create(logger, videoFxConfig, processingBudgetPerFrame); } catch (error) { logger.warn(error.toString()); } ``` `VideoFxProcessor`는 프레임을 처리하는 데 시간이 필요합니다. 소요 시간은 디바이스, 브라우저, 브라우저 또는 디바이스에서 실행 중인 기타 항목에 따라 달라집니다. 프로세서는 *예산* 개념을 사용하여 각 프레임을 처리하고 렌더링하는 데 사용되는 시간을 목표로 삼습니다. 처리 시간은 밀리초 단위입니다. 예산 사용 방법의 예로 1초는 1000ms입니다. 초당 15프레임의 비디오 캡처를 목표로 하면 총 예산은 1000ms/15fps = 66ms가 됩니다. 위 예와 같이 `processingBudgetPerFrame` 파라미터에 값 `50`을 제공하여 예산의 50%, 즉 33ms로 예산을 설정할 수 있습니다. 그런 다음 `VideoFxProcessor`가 지정된 예산 내에서 프레임 처리를 시도합니다. 프로세싱이 예산을 초과할 경우 프로세서는 예산 범위 내에서 시각적 품질을 떨어뜨립니다. 프로세서는 계속해서 시각적 품질을 최소한으로 낮추다가 그 시점에서 품질 저하를 중단합니다. 이 처리 시간은 지속적으로 측정되므로 다른 앱이 종료되어 CPU를 확보하는 등 더 많은 리소스를 사용할 수 있게 되면 프로세서는 예산에 도달하거나 최대 화질에 도달할 때까지 화질을 다시 높입니다. `processingBudgetPerFrame`에 값을 제공하지 않으면 `VideoFxProcessor` 기본값은 `50`입니다. # Amazon Chime SDK의 배경 필터 예시 다음 예에서는 필터를 구현하는 방법을 보여 줍니다. ``` 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); } ```