기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# JavaScript용 Amazon Chime SDK 클라이언트 라이브러리 사용
이 안내서는 JavaScript용 Amazon Chime SDK 클라이언트 라이브러리의 개념적 개요와 중요한 서버 및 클라이언트 구성 요소에 대한 예제 코드를 제공합니다.
**Topics**
+ [Amazon Chime SDK 애플리케이션의 구성 요소 이해](components.md)
+ [JavaScript용 Amazon Chime SDK 클라이언트 라이브러리의 주요 개념 이해](key-concepts.md)
+ [Amazon Chime SDK의 서비스 아키텍처 이해](service-architecture-java.md)
+ [Amazon Chime SDK의 웹 애플리케이션 아키텍처 이해](web-architecture.md)
+ [Amazon Chime SDK의 서버 애플리케이션 아키텍처](server-app-architecture.md)
+ [Amazon Chime SDK 미디어 컨트롤 플레인 이해](media-control-plane-java.md)
+ [Amazon Chime SDK 미디어 데이터 플레인 이해](media-data-plane.md)
+ [Amazon Chime SDK의 웹 애플리케이션 구성 요소 아키텍처 이해](web-app-comp-arch-java.md)
+ [Amazon Chime SDK용 서버 애플리케이션 구축](build-server-app.md)
+ [Amazon Chime SDK용 클라이언트 애플리케이션 구축](build-client-app.md)
+ [Amazon Chime SDK용 클라이언트 애플리케이션에 백그라운드 필터 통합](background-filters.md)
# Amazon Chime SDK 애플리케이션의 구성 요소 이해
Amazon Chime SDK 애플리케이션에 실시간 오디오, 비디오, 화면 공유 기능을 내장하려면 다음 구성 요소를 사용합니다.
+ **JavaScript용 Amazon Chime SDK 클라이언트** 라이브러리는 브라우저 또는 Electron 웹 애플리케이션에 통합되는 클라이언트 측 SDK입니다. [JavaScript NPM용 Amazon Chime SDK 패키지](https://www.npmjs.com/package/amazon-chime-sdk-js)를 종속 항목으로 추가하면 됩니다. 이 패키지는 [https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) 및 [https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API) API를 활용하여 회의에 참여하고 오디오, 비디오를 교환하고 다른 참석자와 콘텐츠를 공유합니다. 이를 통해 다양한 유형의 미디어를 관리하고 해당 리소스를 애플리케이션의 사용자 인터페이스에 바인딩할 수 있는 제어 화면을 제공합니다.
+ ** AWS SDK**, 서버 애플리케이션이 웹 애플리케이션의 회의 요청을 인증하고 승인하는 데 사용하는 Amazon Chime SDK API입니다. AWS SDK는 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html) 및 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html)와 같은 API 작업을 제공하여 회의 및 참석자 리소스를 생성하고 관리할 수 있습니다.
다른 AWS 리소스와 마찬가지로 AWS Identity and Access Management (IAM) 서비스는 이러한 작업에 대한 액세스를 구성합니다. AWS SDK는 [ 여러 프로그래밍 언어로](https://aws.amazon.com/tools/) 제공되며 서버 애플리케이션에서 AWS SDK Chime API를 호출하는 복잡성을 제거합니다. 애플리케이션이 현재 서버 애플리케이션을 사용하지 않는 경우 [ 데모/서버리스](https://github.com/aws/amazon-chime-sdk-js/tree/master/demos/serverless) 폴더에 포함된 CloudFormation 템플릿으로 시작할 수 있습니다. 이 데모에서는 AWS SDK Chime API를 사용하는 AWS Lambda기반 서버리스 애플리케이션을 구축하는 방법을 보여줍니다.
+ **Amazon Chime SDK 미디어 서비스**는 JavaScript용 Amazon Chime SDK 클라이언트 라이브러리가 회의에 연결하는 데 사용하는 오디오, 비디오, 신호를 제공합니다. TURN 릴레이를 사용한 오디오 믹싱, 비디오 포워딩, NAT 트래버설을 지원하는 미디어 서비스는 전 세계적으로 제공됩니다. Amazon Chime 서비스 팀은 이러한 서비스를 배포, 모니터링, 관리합니다. 미디어 서비스는 단일 IP 주소 범위(99.77.128.0/18)에서 호스팅되며 IT 관리자는 포트 TCP/443 및 UDP/3478을 사용하여 방화벽 구성을 간소화할 수 있습니다. 마지막으로 [이러한 서비스는AWS 글로벌 클라우드 인프라](https://aws.amazon.com/about-aws/global-infrastructure/)를 활용합니다.
# JavaScript용 Amazon Chime SDK 클라이언트 라이브러리의 주요 개념 이해
회의와 사용자를 생성하고 관리하는 방법을 완전히 이해하려면 다음 개념을 이해해야 합니다.
**[https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Meeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Meeting.html)** – 다자간 미디어 세션입니다. 모든 회의에는 고유한 회의 식별자가 있습니다. 지원되는 AWS 리전 중 하나에서 회의를 생성할 수 있습니다. 회의를 생성하면 미디어 URL 목록이 반환됩니다. 이러한 데이터는 회의에 참여하는 데 필요한 주요 데이터이므로 회의에 참여하려는 모든 사용자에게 해당 데이터를 배포해야 합니다.
**[https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Attendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_Attendee.html)** – 다자간 미디어 세션에 참여하려는 사용자입니다. 모든 참석자는 고유한 식별자, 개발자 시스템의 사용자에게 참석자를 매핑하기 위해 전달할 수 있는 외부 사용자 식별자, 회의에 대한 액세스 권한을 부여하는 서명된 참여 토큰을 가지고 있습니다.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/meetingsession.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/meetingsession.html)** 및 [https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html](https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html) – 회의에서 각 사용자의 세션을 나타내는 JavaScript용 Amazon Chime SDK 클라이언트 라이브러리의 루트 객체입니다. 웹 애플리케이션은 MeetingSession을 인스턴스화하고 적절한 회의 및 참석자 정보로 구성하는 것으로 시작합니다.
**[https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html](https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html)** – 회의 세션에 참여하는 데 필요한 회의 및 참석자 데이터를 저장합니다. 이 데이터는 서버 애플리케이션에서 수행한 `CreateMeeting` 및 `CreateAttendee` API 직접 호출의 응답입니다. 서버 애플리케이션은 이 데이터를 웹 애플리케이션에 전달하고, 웹 애플리케이션은 이를 사용하여 `MeetingSession`을 인스턴스화합니다.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/devicecontroller.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/devicecontroller.html)**(DefaultDeviceController) – 사용자 시스템에서 사용 가능한 오디오 및 비디오 디바이스 목록을 열거하는 데 사용됩니다. 회의 중에 디바이스 컨트롤러를 사용하여 활성 디바이스를 전환할 수도 있습니다.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html)**(DefaultAudioVideoFacade) - 회의에 전원을 공급하는 키 인터페이스입니다. 회의를 시작하고, 제어하고, 종료하는 API를 제공합니다. 또한 참여 또는 퇴장, 음소거 또는 음소거 해제 사용자, 활발히 말하는 사용자, 연결 상태가 좋지 않은 사용자를 추적하여 참석자 명단 등 사용자 경험을 변화시키는 주요 이벤트를 파악하는 API도 제공합니다. 아울러 이러한 API를 사용하여 오디오 제어 HTML 요소를 회의의 오디오 출력에 바인딩하고 선택한 오디오 출력 디바이스를 통해 재생할 수 있습니다.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/activespeakerdetectorfacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/activespeakerdetectorfacade.html)**(DefaultActiveSpeakerDetector) - 활성 스피커 이벤트를 구독하는 API입니다. 시간이 경과함에 따라 마이크 볼륨을 기준으로 정렬된 참석자 목록을 주기적으로 반환합니다. 필요에 따라 액티브 화자 정책을 재정의하고 조정할 수 있습니다.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/contentsharecontroller.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/contentsharecontroller.html)**(DefaultContentShareController) - 콘텐츠 공유를 시작-중지하고 일시 중지-일시 중지 해제하는 API입니다. 또한 라이프사이클 이벤트를 수신하여 콘텐츠 공유 상태를 추적할 수 있는 API도 제공합니다.
**[https://aws.github.io/amazon-chime-sdk-js/interfaces/logger.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/logger.html)**[https://aws.github.io/amazon-chime-sdk-js/interfaces/logger.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/logger.html) – 콘솔 로그를 활용하거나 로거 객체를 전달하여 현재 로깅 구현을 재정의하고 Amazon Chime SDK에서 다양한 수준의 로그를 가져오는 데 사용되는 인터페이스입니다.
# Amazon Chime SDK의 서비스 아키텍처 이해
이 상위 아키텍처 다이어그램은 [JavaScript용 Amazon Chime SDK 클라이언트 라이브러리의 주요 개념 이해](key-concepts.md)에 나열된 구성 요소가 다른 AWS 서비스와 상호 작용하고 작동하는 방식을 보여줍니다.
![\[JavaScript용 Amazon Chime SDK 클라이언트 라이브러리가 다른 AWS 서비스와 상호 작용하는 방식을 보여주는 다이어그램입니다.\]](http://docs.aws.amazon.com/ko_kr/chime-sdk/latest/dg/images/architecture-1.png)
# Amazon Chime SDK의 웹 애플리케이션 아키텍처 이해
콘텐츠 전송 네트워크에서 웹 애플리케이션을 제공하고 사용자가 브라우저에서 URL로 이동할 때 해당 애플리케이션을 로드할 수 있습니다. 사용자가 컴퓨터에 설치하는 플랫폼 네이티브 Electron 애플리케이션으로 래핑할 수도 있습니다.
웹 애플리케이션은 새 회의 또는 기존 회의에 참여하기 위해 서버 애플리케이션에 REST 요청을 보냅니다. 일반적으로 요청에는 애플리케이션이 다른 API 요청에 사용하는 인증 토큰 또는 쿠키가 들어 있습니다. 또한 서버에 리전 힌트를 보내도록 웹 클라이언트를 디자인할 수 있습니다. 그러면 서버가 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html)에 MediaRegion 파라미터를 제공할 때 이 힌트를 사용할 수 있습니다. 웹 애플리케이션은 [ https://nearest-media-region.l.chime.aws ](https://nearest-media-region.l.chime.aws/) 엔드포인트에 HTTP GET 요청을 보내 가장 가까운 미디어 서비스 리전을 결정할 수 있습니다.
# Amazon Chime SDK의 서버 애플리케이션 아키텍처
서버는 클라이언트로부터 요청을 받으면 먼저 사용자가 회의를 시작하거나 회의에 참여할 권한이 있는지 확인합니다. 서버는 선택한 언어로 된 임베디드 AWS SDK를 사용하여 전역 미디어 컨트롤 플레인에 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html) 및 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html) API를 호출합니다. 이를 통해 지원되는 AWS 리전 중 하나에 회의 및 참석자를 생성합니다. 이러한 요청을 하려면 서비스에 적절한 IAM 사용자 또는 역할이 필요합니다. 따라서 IAM 사용자 및 역할에는 [ AmazonChimeSDK ](https://docs.aws.amazon.com/chime-sdk/latest/ag/security_iam_id-based-policy-examples.html) 정책이 필요합니다.
# Amazon Chime SDK 미디어 컨트롤 플레인 이해
Amazon Chime SDK 미디어 컨트롤 플레인은 us-east-1에서 호스팅되는 글로벌 플랫폼으로, 데이터 플레인 전반에서 회의 및 참석자 리소스를 생성하고 관리하는 데 사용되는 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html) 및 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html) API를 제공합니다. 자격 증명을 검증하고 세션이 요청 리전의 데이터 영역에 부트스트랩되도록 합니다.
또한 컨트롤 플레인은 [ Amazon EventBridge, Amazon Simple Queueing Service(SQS) 또는 Amazon Simple Notification Service(SNS)와 같은 알림 메커니즘으로 Amazon Chime SDK 이벤트를 ](https://docs.aws.amazon.com/chime-sdk/latest/ag/automating-chime-with-cloudwatch-events.html) 트리거합니다.는 서비스를 AWS 지속적으로 모니터링하고 로드 증가에 따라 자동으로 확장됩니다. EventBridge API는 불투명한 사용자 식별자만 허용하고 사용자 데이터는 허용하지 않도록 설계되었으므로 데이터 주권 요구 사항을 준수합니다.
# Amazon Chime SDK 미디어 데이터 플레인 이해
모든 컨트롤 플레인 리전을 사용하여 모든 AWS 리전에서 회의를 생성할 수 있습니다. 미디어 데이터 영역은 모든 AWS 리전에서 사용할 수 있습니다. 여기에는 오디오 믹싱 서비스, 비디오 포워딩 서비스, TURN 서비스, SIP(세션 시작 프로토콜) 상호 운용성 서비스가 포함됩니다. 서비스는 지속적으로 모니터링되며 부하 증가에 따라 자동으로 확장되도록 설계되었습니다. 자세히 알아보려면 [Amazon Chime SDK 미디어 리전](https://docs.aws.amazon.com/chime-sdk/latest/dg/chime-sdk-meetings-regions.html)을 참조하세요.
리전 및 가용 영역에 대한 자세한 내용은 [리전 및 가용 영역](https://aws.amazon.com/about-aws/global-infrastructure/regions_az/)을 참조하세요.
# Amazon Chime SDK의 웹 애플리케이션 구성 요소 아키텍처 이해
이 다이어그램은 Amazon Chime SDK 웹 클라이언트 애플리케이션의 아키텍처를 보여줍니다.
![\[Amazon Chime SDK 웹 애플리케이션의 아키텍처를 보여주는 다이어그램입니다.\]](http://docs.aws.amazon.com/ko_kr/chime-sdk/latest/dg/images/architecture-2.png)
웹 애플리케이션은 일반적으로 애플리케이션 비즈니스 로직 계층으로 구동되는 HTML 및 CSS 사용자 인터페이스 계층으로 구성됩니다. 일반 HTML 및 JavaScript로 웹 애플리케이션을 빌드하거나 React 및 Angular와 같은 UI 프레임워크를 사용할 수 있습니다.
웹 애플리케이션의 비즈니스 로직 레이어는 JavaScript API 세트를 통해 JavaScript용 Amazon Chime SDK 클라이언트 라이브러리와 상호 작용합니다. [https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html](https://aws.github.io/amazon-chime-sdk-js/classes/defaultmeetingsession.html)은 SDK의 루트 객체입니다. 서버 애플리케이션을 빌드하는 경우 [https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html](https://aws.github.io/amazon-chime-sdk-js/classes/meetingsessionconfiguration.html)을 사용하여 회의 및 참석자 정보로 애플리케이션을 초기화하고 회의에 참여합니다. 또한 DefaultMeetingSession은 [https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html](https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html)를 노출합니다. 이를 사용하면 비즈니스 로직 계층이 조치를 취하고 세션의 기본 상태가 변경될 때 사용자 인터페이스를 업데이트하는 콜백을 등록할 수 있습니다.
JavaScript용 Amazon Chime SDK 클라이언트 라이브러리는 오픈 소스이며 필요에 따라 재정의할 수 있는 사용자 지정 가능한 구성 요소 세트를 갖추고 있습니다. 기본 구현을 사용하면 데모 Meetingv2 애플리케이션과 같은 완전한 통합 커뮤니케이션 애플리케이션을 구축할 수 있습니다. JavaScript용 Amazon Chime SDK 클라이언트 라이브러리는 다른 두 라이브러리에 종속되어 있습니다.
+ 브라우저 유형 및 기능 식별을 위한 [ Browser-Detect ](https://www.npmjs.com/package/browser-detect).
+ 미디어 세션에 참여하는 데 필요한 신호 명령과 응답을 인코딩 및 디코딩하는 [ ProtoBufJs ](https://www.npmjs.com/package/protobufjs).
또한 Amazon Chime SDK는 브라우저 또는 Electron 애플리케이션에 따라 디바이스 관리 API와 오디오-비디오 세션을 위한 WebRTC 구현을 제공합니다.
JavaScript용 원본 Amazon Chime SDK 클라이언트 라이브러리는 TypeScript에 있지만, TypeScript 컴파일러를 사용하여 이를 JavaScript로 컴파일할 수 있습니다. 그런 다음 Webpack과 같은 모듈 번들러를 사용하여 번들링할 수 있습니다. 모범 사례로 NPM 레지스트리에서 JavaScript용 Amazon Chime SDK 클라이언트 라이브러리를 설치한 다음 CommonJS 환경에서 사용합니다. AWS 또한 [ HTML에 스크립트 태그로 직접 포함하려는 경우 Amazon Chime SDK를 축소된 JS 파일로 번들링하기 위한 롤업 스크립트](https://github.com/aws/amazon-chime-sdk-js/tree/master/demos/singlejs)를 제공합니다.
# Amazon Chime SDK용 서버 애플리케이션 구축
다음 섹션의 정보는 Amazon Chime SDK 서버 애플리케이션을 구축하는 방법을 설명합니다. 각 섹션은 필요에 따라 예제 코드를 제공하며, 이 코드를 필요에 맞게 조정할 수 있습니다.
**Topics**
+ [Amazon Chime SDK의 IAM 사용자 또는 역할 생성하기](create-iam-users-roles.md)
+ [Amazon Chime AWS SDK에 대한 APIs를 호출하도록 SDK 구성](invoke-apis.md)
+ [Amazon Chime SDK용 회의 생성](create-meeting.md)
+ [Amazon Chime SDK용 참석자 생성](create-attendee.md)
+ [Amazon Chime SDK 클라이언트에 전송](send-response-to-client.md)
# Amazon Chime SDK의 IAM 사용자 또는 역할 생성하기
사용자를 IAM 사용자 또는 사용 사례에 적합한 역할로 생성합니다. 그런 다음 해당 사용자에게 다음 정책을 할당합니다. 이렇게 하면 서버 애플리케이션에 내장된 AWS SDK에 필요한 권한을 확보할 수 있습니다. 그러면 미팅 및 참석자 리소스에 대한 라이프사이클 작업을 수행할 수 있습니다.
```
// Policy ARN: arn:aws:iam::aws:policy/AmazonChimeSDK
// Description: Provides access to Amazon Chime SDK operations
{
"Version": "2012-10-17",
"Statement": [
{
"Action": [
"chime:CreateMeeting",
"chime:DeleteMeeting",
"chime:GetMeeting",
"chime:ListMeetings",
"chime:CreateAttendee",
"chime:BatchCreateAttendee",
"chime:DeleteAttendee",
"chime:GetAttendee",
"chime:ListAttendees"
],
"Effect": "Allow",
"Resource": "*"
}
]}
```
# Amazon Chime AWS SDK에 대한 APIs를 호출하도록 SDK 구성
이 코드 샘플은 AWS SDK에 자격 증명을 전달하고 리전 및 엔드포인트를 설정하는 방법을 보여줍니다.
```
AWS.config.credentials = new AWS.Credentials(accessKeyId, secretAccessKey, null);
const chime = new AWS.Chime({ region: 'us-east-1' });
chime.endpoint = new AWS.Endpoint('https://service.chime.aws.amazon.com/console');
```
# Amazon Chime SDK용 회의 생성
[https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateMeeting.html) API 직접 호출은 개발자가 고유성 컨텍스트에서 전달할 수 있도록 허용하는 필수 파라미터 `ClientRequestToken`을 허용합니다. 또한 회의를 위해 선택할 미디어 서비스 데이터 영역 리전을 나타내는 `MediaRegion`, 회의 호스트를 나타내는 불투명한 식별자를 전달하는 데 사용되는 `MeetingHostId`(해당하는 경우), 회의 수명 주기 이벤트 수신을 위한 `NotificationsConfiguration` 등과 같은 선택적 파라미터도 허용합니다. 기본적으로 Amazon EventBridge는 이벤트를 제공합니다. 선택적으로 `NotificationsConfiguration`에서 SQS 대기열 ARN 또는 SNS 주제 ARN을 전달하여 이벤트를 수신할 수도 있습니다. API는 고유한 `MeetingId`, `MediaRegion`, 미디어 URL 세트가 있는 `MediaPlacement` 객체를 포함하는 회의 객체를 반환합니다.
```
meeting = await chime.createMeeting({
ClientRequestToken: clientRequestToken,
MediaRegion: mediaRegion,
MeetingHostId: meetingHostId,
NotificationsConfiguration: {
SqsQueueArn: sqsQueueArn,
SnsTopicArn: snsTopicArn
}
}).promise();
```
# Amazon Chime SDK용 참석자 생성
회의를 생성한 후 미디어 세션에 참여하려는 각 사용자를 나타내는 참석자 리소스를 생성합니다. [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_CreateAttendee.html) API는 다음을 사용합니다.
+ 사용자를 추가하려는 회의의 `MeetingId`.
+ ID 시스템의 불투명한 사용자 식별자일 수 있는 `ExternalUserId`.
예를 들어 AD(Active Directory)를 사용하는 경우 이 ID는 AD에 있는 사용자의 객체 ID일 수 있습니다. `ExternalUserId`는 클라이언트 SDK에서 참석자 이벤트를 수신할 때 클라이언트 애플리케이션에 다시 전달되므로 매우 유용합니다. 이를 통해 클라이언트 애플리케이션은 누가 회의에 참석했거나 나갔는지 알 수 있으며 서버 애플리케이션에서 해당 사용자에 대한 표시 이름, 이메일 또는 사진 등의 추가 정보를 검색할 수 있습니다.
`CreateAttendee` API를 직접적으로 호출하면 `Attendee` 객체가 생성됩니다. 이 객체에는 서비스에서 생성하는 고유한 `AttendeeId`, 전달된 `ExternalUserId`, 참석자가 회의 기간 동안 또는 [https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_DeleteAttendee.html](https://docs.aws.amazon.com/chime-sdk/latest/APIReference/API_meeting-chime_DeleteAttendee.html) API가 참석자를 삭제할 때까지 회의에 액세스할 수 있도록 하는 서명된 `JoinToken`이 포함되어 있습니다.
```
attendee = await chime.createAttendee({
MeetingId: meeting.MeetingId,
ExternalUserId: externalUserId,
}).promise();
```
# Amazon Chime SDK 클라이언트에 전송
회의 및 참석자 리소스를 생성한 후에는 서버 애플리케이션이 회의 및 참석자 객체를 인코딩하여 클라이언트 애플리케이션으로 다시 전송해야 합니다. 클라이언트가 JavaScript용 Amazon Chime SDK 클라이언트 라이브러리를 부트스트랩하고 참석자가 웹 또는 Electron 기반 애플리케이션에서 회의에 성공적으로 참여할 수 있도록 하려면 이러한 정보가 필요합니다.
# Amazon Chime SDK용 클라이언트 애플리케이션 구축
클라이언트 애플리케이션을 구축하려면 GitHub의 [Amazon Chime JavaScript SDK API 개요](https://aws.github.io/amazon-chime-sdk-js/modules/apioverview.html)에 나열된 단계를 따르세요. 개요에서는 필요에 따라 예제 코드를 제공합니다.
# 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);
}
```