기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amazon Chime SDK용 애플리케이션에 백그라운드 필터 추가
<a name="add-filters"></a>

배경 필터를 추가하는 프로세스는 다음과 같은 광범위한 단계를 따릅니다.
+ 지원되는 브라우저를 확인하세요.
+ 사용하려는 구성으로 `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용 필터를 제공하기 전에 지원 여부 확인
<a name="support-check"></a>

Amazon Chime SDK는 지원되는 브라우저를 확인하고 필요한 자산을 다운로드하려고 시도하는 비동기 정적 메서드를 제공합니다. 그러나 디바이스 성능을 확인하지는 않습니다. 필터를 제공하기 전에 항상 사용자의 브라우저와 디바이스가 필터를 지원할 수 있는지 확인하는 것이 좋습니다.

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

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

# Amazon Chime SDK용 VideoFxConfig 객체 생성
<a name="create-videofxconfig"></a>

동일한 객체에서 `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 객체 생성
<a name="create-videofxprocessor"></a>

`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 객체 구성
<a name="configure-videofxprocessor"></a>

다음 표에는 구성할 수 있는 `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 객체 생성
<a name="create-video-transform"></a>

다음 예제에서는 `VideoFxProcessor`를 포함하는 `VideoTransformDevice` 객체를 만드는 방법을 보여 줍니다.

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

# Amazon Chime SDK의 비디오 입력 시작
<a name="start-video-input"></a>

다음 예제에서는 `VideoTransformDevice` 객체를 사용하여 비디오 입력을 시작하는 방법을 보여 줍니다.

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

# Amazon Chime SDK의 리소스 사용률 튜닝
<a name="tuning"></a>

`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`입니다.