기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 인앱, 웹 및 영상 통화 및 화면 공유를 애플리케이션에 네이티브 방식으로 통합
Amazon Connect 인앱, 웹, 영상 통화 및 화면 공유를 애플리케이션과 통합하는 방법:
1. Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 사용하여 연락처를 생성합니다.
1. 그런 다음 API 직접 호출에서 반환된 세부 정보를 사용하여 [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) 또는 [JavaScript](https://github.com/aws/amazon-chime-sdk-js)용 Amazon Chime 클라이언트 라이브러리를 사용하여 통화에 조인합니다.
추가 참가자 생성에 대한 자세한 내용은 [다중 사용자 인앱, 웹 및 영상 통화 활성화](enable-multiuser-inapp.md) 섹션을 참조하세요.
샘플 애플리케이션에 대한 다음 GitHub 리포지토리는 [amazon-connect-in-app-calling-examples](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples) 섹션을 참조하세요.
**Topics**
+ [클라이언트 디바이스가 인앱 또는 웹 통화를 시작하는 방법](#diagram-option2)
+ [시작하기](#diagram-option2-gs)
+ [선택적 단계](#optional-steps)
## 클라이언트 디바이스가 인앱 또는 웹 통화를 시작하는 방법
다음 다이어그램은 클라이언트 디바이스(모바일 애플리케이션 또는 브라우저)가 인앱 또는 웹 통화를 시작하는 이벤트 순서를 보여 줍니다.
1. 고객은 클라이언트 애플리케이션(웹 사이트 또는 애플리케이션)을 사용하여 인앱 또는 웹 통화를 시작합니다.
1. 클라이언트 애플리케이션(웹 사이트 또는 모바일 애플리케이션) 또는 웹 서버는 Connect Customer [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 사용하여 속성 또는 맥락을 Connect Customer에 전달하는 연락을 시작합니다.
1. 클라이언트 애플리케이션은 2단계의 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)에서 반환된 세부 정보를 사용하여 통화에 참여합니다.
1. (선택 사항) 클라이언트는 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) API를 사용하여 [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html) API를 통해 DTMF를 보내는 데 사용되는 `ConnectionToken`을 수신합니다.
1. 연락이 흐름에 도달하고 흐름를 기반으로 라우팅되어 대기열에 배치됩니다.
1. 에이전트가 이 연락을 수락합니다.
1. (선택 사항) 고객과 에이전트가 영상을 사용할 수 있도록 설정한 경우, 고객과 에이전트는 영상을 시작할 수 있습니다.
1. (선택 사항 - 다이어그램에 표시되지 않음) [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html) 및 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) API를 사용하여 추가 참가자를 추가할 수 있습니다.
## 시작하기
시작하기 위한 대략적인 단계는 다음과 같습니다.
1. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 사용하여 연락을 생성합니다. API는 Amazon Chime SDK 클라이언트가 통화에 조인하는 데 필요한 세부 정보를 반환합니다.
1. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)에서 반환한 구성을 사용하여 Amazon Chime SDK 클라이언트 `MeetingSessionConfiguration` 객체를 인스턴스화합니다.
1. 2단계에서 생성한 `MeetingSessionConfiguration`으로 Amazon Chime SDK 클라이언트 `DefaultMeetingSession`을 인스턴스화하여 클라이언트 회의 세션을 생성합니다.
+ iOS
```
let logger = ConsoleLogger(name: "logger")
let meetingSession = DefaultMeetingSession(
configuration: meetingSessionConfig,
logger: logger
)
```
+ Android
```
val logger = ConsoleLogger()
val meetingSession = DefaultMeetingSession(
configuration = meetingSessionConfig,
logger = logger,
context = applicationContext
)
```
+ JavaScript
```
const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
const deviceController = new DefaultDeviceController(logger);
const configuration = new MeetingSessionConfiguration(
meetingResponse,
attendeeResponse
);
const meetingSession = new DefaultMeetingSession(
configuration,
logger,
deviceController
);
```
1. `meetingSession.audioVideo.start()` 메서드를 사용하여 WebRTC 연락에 오디오로 합류합니다.
+ iOS/Android
```
meetingSession.audioVideo.start()
```
+ JavaScript
```
await meetingSession.audioVideo.start();
```
1. `meetingSession.audioVideo.stop()` 메서드를 사용하여 WebRTC 연락을 끊습니다.
+ iOS/Android
```
meetingSession.audioVideo.stop()
```
+ JavaScript
```
meetingSession.audioVideo.stop();
```
## 선택적 단계
추가 작업 및 포괄적인 API 설명서는 플랫폼별 API 개요 가이드를 참조하세요.
+ **iOS**: [API 개요](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [API 개요](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**: [API 개요](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)
### DTMF 톤 전송
통화에 DTMF를 보내려면 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) 및 [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)라는 두 개의 Amazon Connect 참가자 서비스 API가 각각 필요합니다.
**참고**
SendMessage API `contentType`은 `audio/dtmf`여야 합니다.
1. [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)을 간접 호출하여 `ConnectionToken`을 검색합니다. 이 API를 호출하려면 `ParticipantToken`이 필요합니다. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) 응답에서 찾을 수 있습니다.
1. `ConnectionToken`을 사용하여 [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)를 호출하여 DTMF 숫자를 전송합니다.
### 오디오 디바이스 선택
오디오 입력/출력 디바이스를 선택하려면 Android 및 iOS용 Amazon Chime SDK 클라이언트의 메서드 또는 iOS용 [네이티브 iOS 기능](https://developer.apple.com/documentation/avkit/avroutepickerview)을 사용할 수 있습니다.
**iOS/Android**
```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```
**JavaScript**
```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```
### 오디오 음소거 및 음소거 해제하기
음소거 및 음소거 해제의 경우 `meetingSession.audioVideo.realtimeLocalMute()` 및 `meetingSession.audioVideo.realtimeLocalUnmute()`를 사용합니다.
**iOS/Android**
```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```
**JavaScript**
```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```
### 셀프 비디오 시작
셀프 비디오를 시작하려면 `meetingSession.audioVideo.startLocalVideo()`를 사용합니다. 특정 디바이스를 열거하고 선택하는 방법에 대한 자세한 내용은 클라이언트 라이브러리 API 가이드를 참조하세요.
**iOS/Android**
```
meetingSession.audioVideo.startLocalVideo()
```
**JavaScript**
```
meetingSession.audioVideo.startLocalVideoTile();
```
### 셀프 비디오 중지
셀프 비디오를 중지하려면 `meetingSession.audioVideo.stopLocalVideo()`를 사용합니다.
**iOS/Android**
```
meetingSession.audioVideo.stopLocalVideo()
```
**JavaScript**
```
meetingSession.audioVideo.stopLocalVideoTile();
```
### 에이전트 비디오 활성화
애플리케이션 내에서 에이전트의 영상을 수신하고 로드할 수 있도록 하려면 `meetingSession.audioVideo.startRemoteVideo()`를 사용합니다. 또한 비디오 타일 관찰자를 구현하고 비디오 타일을 바인딩하여 뷰를 표시해야 합니다.
**iOS/Android**
```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```
**JavaScript**
```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```
전체 비디오 타일 구현 세부 정보는 플랫폼별 SDK 가이드를 참조하세요.
### 에이전트 비디오 비활성화
애플리케이션 내에서 에이전트의 영상을 수신하고 로드하도록 허용하지 않으려면 `meetingSession.audioVideo.stopRemoteVideo()`를 사용합니다.
**iOS/Android**
```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```
**JavaScript**
```
meetingSession.audioVideo.unbindVideoElement(tileId);
```
### 데이터 메시지 사용
에이전트 측에서 최종 사용자에게 상태를 전송해야 하는 경우 [데이터 메시지](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional)를 사용할 수 있습니다. 예를 들어 고객이 대기 중인 경우 고객의 애플리케이션에 데이터 메시지를 보내 고객이 대기 중이고 비디오/화면 공유가 여전히 전송 중임을 알리는 메시지를 표시하거나 비디오/화면 공유를 끌 수 있습니다.
**iOS/Android**
```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```
**JavaScript**
```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```
### 중지 이벤트 수신 대기
연락처의 참가가 `audioVideoDidStop` 관찰자를 통해 종료될 때 이벤트를 수신할 수 있습니다. 특정 상태 코드는 플랫폼에 따라 다를 수 있습니다.
#### 통화가 용량에 도달함
6명 이상의 사용자가 통화에 조인하려고 하면 추가 참가자는 다음 오류를 수신하고 다른 참가자가 나갈 때까지 조인할 수 없습니다.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` 또는 `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`
#### 통화에서 참가자 제거됨
에이전트가 참가자를 통화에서 제거했지만 다른 참가자에 대해 연락처가 계속되면 다음 상태 코드를 받게 됩니다. 참가자 제거로 인해 연락처가 종료되는 경우 이 상태 또는 연락처 종료 상태가 수신됩니다.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` 또는 `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`
#### 연락처 종료
실제 연락처가 모든 참가자에 대해 완전히 종료되면 다음 상태 코드를 받게 됩니다.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`