本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 將應用程式內、Web、視訊通話和螢幕共用原生整合至您的應用程式
將應用程式內、Web、視訊通話和螢幕共用原生整合至您的應用程式

若要將 Amazon Connect 應用程式內、Web、視訊通話和螢幕共用與您的應用程式整合：

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 用戶端程式庫加入呼叫。

如需建立其他參與者的相關資訊，請參閱[啟用多使用者應用程式內、Web 和視訊通話](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)

## 用戶端裝置如何啟動應用程式內或網路通話
用戶端裝置如何啟動應用程式內或網路通話

下圖顯示用戶端裝置 (行動應用程式或瀏覽器) 啟動應用程式內或網路通話的事件順序。

![\[顯示用戶端裝置如何啟動通話的概念圖表。\]](http://docs.aws.amazon.com/zh_tw/connect/latest/adminguide/images/netra-gs-diagram.png)


1. 您的客戶使用用戶端應用程式 (網站或應用程式) 來啟動應用程式內或網路通話。

1. 客戶端應用程式 (網站或行動應用程式) 或 網路伺服器使用 Amazon Connect [StartWebRtcContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API 以啟動傳遞任何屬性或背景到 Amazon Connect的聯絡人。

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 音調

若要將 DTMF 傳送到通話，需要兩個 Amazon Connect 參與者服務 API：分別是 [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)。

**注意**  
SendMessage API 的 `contentType` 必須是 `audio/dtmf`。

1. 調用 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) 以擷取 `ConnectionToken`。(需要 `ParticipantToken` 呼叫此 API。您可以在 [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) 以傳送 DT以傳送 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`