本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 设置应用程序内通话、网络通话、视频通话和屏幕共享功能
<a name="inapp-calling"></a>

 Amazon Connect 应用内、网络和视频通话功能使您的客户无需离开您的网络或移动应用程序即可与您联系。您可以使用这些功能将上下文信息传递给 Amazon Connect。这使您能够根据客户的配置文件或其他信息（例如先前在应用程序中执行的操作）等属性，对客户体验进行个性化设置。

## 需要了解的重要事项
<a name="inapp-calling-important"></a>
+ 在视频通话或屏幕共享会话期间，即使客户处于等待状态，座席仍然能够看到客户的视频或屏幕共享。处理个人身份信息（PII）是客户的责任。如果您要更改此行为，可以构建一个自定义 CCP 和通信小部件。有关更多信息，请参阅 [将应用内通话、Web 通话、视频通话和屏幕共享原生集成到您的应用程序中](config-com-widget2.md)。

## 通信小部件：将聊天、语音和视频全部配置到一个地方
<a name="one-page"></a>

要设置应用内通话、网络通话和视频通话，您可以使用**通信小部件**页面。它支持聊天、语音、视频和屏幕共享。下图显示了为所有这些选项配置页面时的**通信选项**部分。

![\[“创建通信小部件”页面的“通信选项”部分。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/comm-widget-all.png)


## 多用户应用内通话、Web 通话和视频通话
<a name="multi-user"></a>

您最多可以在一个正在进行的或预定的 Web 通话、应用内通话或视频通话中再添加四名用户，达到总共六个参与者：座席、第一个用户和四个其他参与者（用户或座席）。

例如，为了帮助完成一项抵押贷款交易，您可以让座席和客户、客户的配偶、一名翻译，甚至一位主管（也就是另一位座席）同时加入通话，以快速解决任何问题。

要了解如何启用多用户 Web、应用程序内和视频通话，请参阅[启用多用户应用内通话、Web 通话和视频通话](enable-multiuser-inapp.md)。

## 如何设置应用程序内通话、网络通话、视频通话和屏幕共享
<a name="inapp-options"></a>

有两种方法可以将 Amazon Connect 应用程序内通话、网络通话和视频通话以及屏幕共享嵌入到您的网站或移动应用程序中：
+ 选项 1：[配置 out-of-the-box通信小部件](config-com-widget1.md)。您可以使用界面生成器自定义字体和颜色，并保护控件，使其只能从您的网站启动。
+ 选项 2：[将应用程序内通话、网络通话和视频通话原生集成到您的移动应用程序中](config-com-widget2.md)。选择此选项可从头开始构建通信小部件并将其与您的移动应用程序或网站集成。使用 Amazon Connect APIs 和 S Amazon Chime DK 客户端 APIs 以原生方式集成到您的移动应用程序或网站中。

**注意**  
如果您有定制的座席桌面，则无需为了 Amazon Connect 应用内和 Web 通话功能而对该桌面进行任何修改。但是，您需要[集成视频通话和屏幕共享](integrate-video-calling-for-agents.md)。

# 在 Amazon Connect 中配置 out-of-the-box通信小工具
<a name="config-com-widget1"></a>

使用此选项为桌面和移动[浏览器](connect-supported-browsers.md#browsers-inapp)创建通信小部件。在此过程结束时，Amazon Connect 会生成一个自定义 HTML 代码片段，您可以将其复制到网站的源代码中。

1. 使用 Amazon Connect 管理员帐户或在其安全配置文件中具有 “**渠道和流程**”、“**通信” 控件-“创建**” 权限的用户帐户登录管理网站。

1. 在 Amazon Connect左侧导航菜单中，选择**频道**、**通信小部件**。

1. 此向导将引导您完成以下三个步骤。

## 步骤 1：选择沟通渠道
<a name="widgetdetails"></a>

1. 在**通信小部件**页面上，输入通信小部件的**名称**和**描述**。
**注意**  
在 Amazon Connect 实例中创建的每个通信小部件的名称都必须是唯一的。

1. 在**通信选项**部分，选择客户如何与您的小部件互动。下图显示了允许客户进行网络通话、视频通话和屏幕共享的选项。  
![\[通信小部件页面配置了网络通话、视频通话和屏幕共享功能。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/comm-widget-page-call.png)

1. 在**网络通话**部分，选择是否为客户启用视频和屏幕共享体验。上图显示了客户可以查看座席视频、打开他们的视频以及允许座席和客户共享屏幕的选项。有关设置屏幕共享限制的信息，请参阅 [启用屏幕共享的网址限制](screen-sharing-url-restriction.md)。

1. 选择 **保存并继续**。

## 步骤 2：自定义小部件
<a name="customizewidget"></a>

当您选择这些选项时，小部件预览会自动更新，以便您看到客户的体验效果。

![\[通信小部件的预览。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/netra-call-preview.png)


**定义小部件访问按钮样式**

1. 通过输入十六进制值（[HTML 颜色代码](https://htmlcolorcodes.com/)）来选择按钮背景的颜色。

1. 选择**白色**或**黑色**作为图标颜色。无法自定义图标颜色。

**自定义显示名称和样式**

1. 提供标题消息和颜色以及小部件背景颜色的值。

1. **徽标 URL**：从 Amazon S3 存储桶或其他在线来源向徽标横幅插入一个 URL。
**注意**  
如果该徽标来自 Amazon S3 存储桶以外的在线来源，则自定义页面中的通信小部件预览将不会显示徽标。只有当您的页面上安装了自定义通信小部件后，徽标才会显示。

   横幅的格式必须为 .svg、.jpg 或 .png。图像可以是 280 px（宽）x 60 px（高）。任何大于这些尺寸的图像都将被缩放，以适应 280x60 徽标组件空间。

   1. 有关如何将文件（如徽标横幅等）上传到 S3 的说明，请参阅《Amazon Simple Storage Service 用户指南》**中的[上传对象](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html)。

   1. 确保正确设置了图像权限，以便通信小部件访问图像。有关如何公开访问 S3 对象的信息，请参阅《设置网站访问权限》**主题中的[第 2 步：添加存储桶策略](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site)。

## 步骤 3：为小部件添加您的域
<a name="widgetdomain"></a>

通过此步骤，您可以保护通信小部件，使其只能从您的网站启动。

1. 输入您要放置通信小部件的网站域。通信小部件仅会在此步骤中选择的网站上加载。

   选择**添加域**，添加最多 50 个域。  
![\[“添加域”选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-add-domain.png)
**重要**  
仔细检查您的网站 URLs 是否有效且不包含错误。请添加以 https:// 为开头的完整 URL。
建议您在生产网站和应用程序中使用 https://。

1. 在**为您的通信小部件请求添加安全性**下，要获得最快的设置体验，请选择**否，我会跳过**。

   建议选择**是**，以便验证用户是否经过身份验证。有关更多信息，请参阅 [在 Amazon Connect 中为应用程序内通话、网络通话和视频通话提供客户体验的个性化体验](optional-widget-steps.md)。

1. 选择 **保存并继续**。

   成功了！您的小部件已创建。复制生成的代码，然后将其粘贴到网站中要显示通信小部件的每个页面上。

## 让您的座席能够进行应用内通话、网络通话、视频通话和屏幕共享
<a name="agent-cx-cw"></a>

要使座席能够使用视频通话和屏幕共享，请为其安全配置文件分配**联系人控制面板（CCP）**、**视频通话- 访问**权限。

 Amazon Connect 代理工作区支持 Amazon Connect 应用内通话、网络通话、视频通话以及屏幕共享。您可以使用与电话和聊天相同的配置、路由、分析和座席应用程序。要开始，唯一的步骤就是为座席的安全配置文件授予视频通话和屏幕共享权限。

对于自定义座席桌面，无需更改 Amazon Connect 应用程序内呼叫和 Web 呼叫。启用具有视频通话权限的座席安全配置文件，然后按照以下指南将视频通话和屏幕共享集成到座席桌面。

## 客户端设备如何发起应用内通话或网络通话
<a name="diagram-option1"></a>

下图显示了客户端设备（移动应用程序或浏览器）发起应用内通话或网络通话的事件顺序。

![\[显示客户端设备如何发起通话的概念图。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. （可选）您可以传递在网站上捕获的属性，并使用 JSON Web 令牌（JWT）对其进行验证。

1. 客户点击您的网站或移动应用中的通信小部件。

1. 通信控件 Amazon Connect 通过传递 JWT 中包含的属性来启动 Web 调用。

1. 联系到达流，被路由，然后进入队列。

1. 座席接受该联系。

1. （可选）如果为客户和座席启用了视频，他们就可以开始播放视频了。

## 更多信息
<a name="cw-more-resources"></a>

有关应用内通话、网络通话和视频通话功能要求的更多信息，请参阅以下主题：
+ [Amazon Connect 中应用程序、网络通话和视频通话对座席工作站的要求](videocalling-networking-requirements.md)
+ [提供应用内、网络和视频通话功能的受支持的浏览器和移动操作系统](connect-supported-browsers.md#browsers-inapp) 

# 将应用内通话、Web 通话、视频通话和屏幕共享原生集成到您的应用程序中
<a name="config-com-widget2"></a>

将 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)、[Andro](https://github.com/aws/amazon-chime-sdk-android) id 或的 Amazon Chime 客户端库加入通话[JavaScript](https://github.com/aws/amazon-chime-sdk-js)。

有关创建额外参与者的信息，请参阅[启用多用户应用内通话、Web 通话和视频通话](enable-multiuser-inapp.md)。

有关示例应用程序，请参阅以下 Github 存储库：[amazon-connect-in-app-调用](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples)示例。

**Topics**
+ [客户端设备如何发起应用内通话或网络通话](#diagram-option2)
+ [开始使用](#diagram-option2-gs)
+ [选项步骤](#optional-steps)

## 客户端设备如何发起应用内通话或网络通话
<a name="diagram-option2"></a>

下图显示了客户端设备（移动应用程序或浏览器）发起应用内通话或网络通话的事件顺序。

![\[显示客户端设备如何发起通话的概念图。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/netra-gs-diagram.png)


1. 客户使用客户端应用程序（网站或应用程序）发起应用内通话或网络通话。

1. 客户端应用程序（网站或移动应用程序）或 Web 服务器使用 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 接收用于通过 API 发送 DTMF 的[SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)。`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) APIs。

## 开始使用
<a name="diagram-option2-gs"></a>

以下是入门的高级步骤：

1. 使用 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API 创建联系人。该 API 会返回 Amazon Chime SDK 客户端加入通话所需的全部详细信息。

1. 使用返回的配置来实例化 Amazon Chime 软件开发工具包`MeetingSessionConfiguration`客户端对象。[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

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();
     ```

## 选项步骤
<a name="optional-steps"></a>

有关其他操作和全面的 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 音
<a name="send-dtmf-tones"></a>

要向通话发送 DTMF，需要两个 Amazon Connect 参与 APIs 者服务：[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)

**注意**  
`contentType`因为 SendMessage API 必须是`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)用发送 DTMF 数字。

### 选择音频设备
<a name="select-audio-devices"></a>

要选择音频 input/output 设备，您可以使用适用于安卓和 iOS 的 Amazon Chime SDK 客户端中的方法或适用于 iOS 的本机 [iOS 功能](https://developer.apple.com/documentation/avkit/avroutepickerview)。

**iOS/安卓**

```
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);
```

### 将音频静音和取消静音
<a name="mute-unmute-audio"></a>

对于静音和取消静音，请使用 `meetingSession.audioVideo.realtimeLocalMute()` 和 `meetingSession.audioVideo.realtimeLocalUnmute()`。

**iOS/安卓**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### 开始自拍视频
<a name="start-self-video"></a>

要开始自拍视频，请使用 `meetingSession.audioVideo.startLocalVideo()`。有关如何枚举和选择特定设备的更多信息，请参阅客户端库 API 指南。

**iOS/安卓**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### 停止自拍视频
<a name="stop-self-video"></a>

要停止自拍视频，请使用 `meetingSession.audioVideo.stopLocalVideo()`。

**iOS/安卓**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### 启用座席视频
<a name="enable-agent-video"></a>

要允许在应用程序中接收和加载座席的视频，请使用 `meetingSession.audioVideo.startRemoteVideo()`。您还需要实现视频图块观察器，并将视频图块绑定到显示视图。

**iOS/安卓**

```
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 指南，获取关于实现视频图块的完整详细信息。

### 禁用座席视频
<a name="disable-agent-video"></a>

要禁止在应用程序中接收和加载座席的视频，请使用 `meetingSession.audioVideo.stopRemoteVideo()`。

**iOS/安卓**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### 使用数据消息
<a name="use-data-messages"></a>

如果您需要将任何状态从座席端发送给最终用户，则可以使用[数据消息](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional)。例如，当客户处于暂停状态时，您可以向客户的应用程序发送一条数据消息以显示一条消息，让他们知道他们处于暂停状态，并且他们的 video/screen 共享仍在发送中，或者您可以关闭共 video/screen 享。

**iOS/安卓**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### 监听停止事件
<a name="listen-for-stop-events"></a>

您可以通过 `audioVideoDidStop` 观察器来监听某个联系的参与结束所触发的事件。具体的状态码可能因平台而异。

#### 呼叫已达到容量
<a name="call-reaches-capacity"></a>

当超过 6 人尝试加入通话时，超出的人员将收到以下错误消息，并且在其他人离开之前无法加入。
+ **iOS：**`MeetingSessionStatusCode.audioCallAtCapacity` 或 `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android：**`MeetingSessionStatusCode.AudioCallAtCapacity` 或 `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` 或 `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### 参与者已从通话中被移除
<a name="participant-removed-from-call"></a>

当座席将某位参与者从通话中移除，但其他参与者的联系仍在继续，他们将收到以下状态码。请注意，如果移除参与者导致联系结束，则他们将收到此状态或联系结束状态。
+ **iOS：**`MeetingSessionStatusCode.audioServerHungup` 或 `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android：**`MeetingSessionStatusCode.AudioServerHungup` 或 `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` 或 `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### 联系结束
<a name="contact-ends"></a>

当所有参与者的实际联系完全结束时，他们将收到以下状态码。
+ **iOS：**`MeetingSessionStatusCode.audioCallEnded`
+ **Android：**`MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# 启用多用户应用内通话、Web 通话和视频通话
<a name="enable-multiuser-inapp"></a>

Amazon Connect 支持在现有通话中添加其他用户以加入应用内通话、网络通话和视频通话。您最多可以在一个正在进行的或预定的应用内通话、Web 通话或视频通话中再添加四名用户，达到总共六个参与者：座席、第一个用户和四个其他参与者（用户或座席）。

## 如何将参与者添加到多用户通话中
<a name="how-to-add-participants"></a>

1. 要启用多用户通话，您需要从 Amazon Connect 控制台启用[增强的多方联系人监控](monitor-conversations.md)。

1. 完成后，您可以利用现有 Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API 创建联系人，并将此联系人路由给代理。

1. 要添加其他参与者，请先创建一个`ContactId`从 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API 响应传入 API 的[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)参与者。 [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)在原始呼叫者连接到代理之前，不会成功。可以在 `ParticipantDetails.ParticipantCapabilities` 字段中为参与者设置视频和屏幕共享功能。

1. 成功[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)完成后，它将返回[参与者令牌](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials)。此令牌可以在`Type`设置为的请求中使用`WEBRTC_CONNECTION`。[CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)响应中包含[ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)哪些可用来加入会议的 [Amazon Chime SDK 客户端库](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html)为创建的其他参与者创建的会议。按照[集成说明](config-com-widget2.md)进行操作，以允许您的应用程序最终用户加入会议。
**注意**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)如果代理尚未连接到联系人，则返回 Bad Request 错误。有关用户可能试图在连接座席之前加入的业务应用程序，请参阅[处理并发用户加入](#handling-concurrent-joins)。

1. 其他客户可以在[CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)退货后随时连接。参与者加入后，[所有其他语音和录音行为都与多方通话功能类似](multi-party-calls.md)。如果请求中启用了新参与者的视频和屏幕共享功能，则他们可以启用他们的视频和屏幕共享。[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)
**注意**  
任何时候总共只有 6 名参与者（客户和座席）可以加入正在进行的通话中。如果在加入会议过程中发生了添加超出限制的额外参与者的操作，则 Amazon Chime SDK 客户端库会返回一个状态码，指示该通话已满员。

1. 在参与者连接到通话之后，如果他们正常断开连接，或者非正常断开连接持续了一段预配置的时间，则他们的参与者凭证将不再有效。如果客户端库`onAudioVideoDidStop`旁听者收到指示与会者不再有效的状态码，则应用程序可以触发[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)与[CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)您的业务后端的新呼叫以重新加入该呼叫。

1. 每增加一个用户连接， Amazon Connect 就会创建一个新的联系人和[联系人记录](ctr-data-model.md)。所有其他联系人均已 PreviousContactId 设置为 InitialContactId （即由 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API 创建的联系人），以便将其追踪到原始联系人。每个联系记录具有以下特点：
   + 有一个**” InitiationMethod “:” WEBR** TC\$1API”
   + 包含以下分段属性：

     ```
        "SegmentAttributes": {
           "connect:Subtype": {
             "ValueString": "connect:WebRTC"
           }
         },
     ```

   此外，每个联系记录都包含 `CreateParticipant` 中提供的显示名称。对于任何额外用户联系，不会填充座席信息。这是为了避免座席信息重复。

   下图说明了在网络、应用程序内或视频通话中添加多个参与者和代理的场景中，如何映射上一个和下一个联系 IDs 人。  
![\[该图显示了如何映射多方 IDs WebRTC 呼叫的联系人\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## 处理并发用户加入
<a name="handling-concurrent-joins"></a>

企业可能希望创建允许用户以任何顺序、在任何时间加入的应用程序。例如，您的应用程序可能会向多个用户发送一封包含外部预约 ID 的链接的电子邮件，该链接应在预定时间被用户用于加入通话。为实现此行为，业务后端必须确保：
+ 第一个加入的用户会触发 StartWebRTCContact 请求。
+ 所有其他用户都使用 CreateParticipant 和， CreateParticipantConnection但**仅在第一个用户连接到代理之后**。

本节描述一个可能的实现，该实现假设您的业务后端包含一个存储（如 DynamoDB），用于保存关于预约会议的元数据。请注意，预约不是示例实现的功能 Amazon Connect，而是其中的一项功能。

当用户导航到该页面时，他们应该向后端发送一个请求。后端检查：
+ 用户是否能够开始预约，以及时间是否正确。
+  Amazon Connect 联系人是否已通过呼叫创建[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)。

**如果尚未创建联系人**，则客户应使用自定义[流程](connect-contact-flows.md)调用 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API，并提供一个[属性，该属性](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes)表示预计将加入呼叫的相应座席的座席队列。该流应包含一个[设置工作队列](set-working-queue.md)数据块，该数据块配置为使用属性中提供的座席队列。然后，该流应以[转接到队列](transfer-to-queue.md)数据块来终止。在调用 API 之前，后端应以原子方式更新存储区，将调用从“无”状态移至“正在创建”状态，并处理任何并发修改异常。

[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)应将来自的凭证退还给客户，他们应立即加入通话。应在业务存储中将该联系标记为“已创建”，并保存其联系 ID。**此业务 API 需要在所有可能加入的参会者之间实现同步**。这可以通过使用数据库提供的原子操作来实现。

**如果联系处于“正在创建”状态**，则应该将该状态返回给额外用户，显示相关信息，并在短暂等待后重新尝试加入。

**如果联系人已创建**：他们应检索联系人 ID，然后调用 [DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API。业务后端应查找 **`Contact.AgentInfo.ConnectedToAgentTimestamp`** 字段。如果该字段不存在，则表示第一个用户尚未连接到座席，并且额外用户应显示相关信息，在短暂等待后重新尝试。

如果该字段存在，则后端应调用 [CreateParticipant[CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)，然后调用 get [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)，如前几节所述。

后端工作流应看起来像下面这样。

![\[处理并发用户加入的后端流示图\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/multiparty-backend-flow.png)


您可以参阅 [Amazon Connect 应用程序内调用示例](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web) GitHub 进行实施。

**座席不会使用同一个网站加入**。座席应在[联系人控制面板](launch-ccp.md)中将其状态设置为**可用**。当第一个客户加入时，系统会自动呼叫座席。

## 计费
<a name="multiuser-billing"></a>

额外参与者的计费方式与通话中初始客户和任何座席的现有计费方式相同。音频、视频和屏幕共享都会产生各自的、按参与者计费的费用。

## 等待行为
<a name="multiuser-hold-behavior"></a>

在视频通话或屏幕共享会话期间，即使参与者处于等待状态，座席也能看到该参与者的视频或共享的屏幕。参与者有责任相应地处理个人身份信息。如果使用原生的 CCP 应用程序，当任何非座席参与者被置于等待时，座席的视频将被禁用。如果您要更改此行为，可以构建一个自定义 CCP 和通信小部件。

有关更多信息，请参阅 [将应用内通话、Web 通话、视频通话和屏幕共享原生集成到您的应用程序中](config-com-widget2.md)。

## 限制
<a name="multiuser-limitations"></a>

在创建额外的应用内通话、Web 通话、视频通话和屏幕共享参与者时，存在以下限制：
+ 如果原始联系在创建时将客户的视频能力设置为**无**，则额外参与者无法将其视频能力设置为**发送**。

# 在 Amazon Connect 中为应用程序内通话、网络通话和视频通话提供客户体验的个性化体验
<a name="optional-widget-steps"></a>

本主题中的步骤是可选的，但建议使用。它们使您能够根据客户之前在应用中执行的操作来个性化他们的体验。此选项可在发起新通话时为您提供更多控制选项，包括将上下文信息作为属性传递。

 完成这些步骤后，您需要与网站管理员合作设置您的 Web 服务器，以便为新呼叫发放 JSON Web 令牌 (JWTs)

1. 如果您已经创建了通信小部件，请在**通信小部件**页面上，选择要编辑的小部件。

1. 在**域和安全性**部分中选择**编辑**。

1. 在**为您的通信小部件请求添加安全性**下，选择**是**。  
![\[“是”选项。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. 选择 **保存并继续**。Amazon Connect 会创建该小部件以及以下内容：
   + Amazon Connect 在下一页提供了 44 个字符的安全密钥，你可以用它来创建。 JWTs
   + Amazon Connect 在通信小部件嵌入脚本中添加了一个回调函数，用于在通话启动时检查 JWT。

     您必须在嵌入式代码段中设置回调函数，如以下示例所示。

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   在下一步中，您将获得一个安全密钥，用于在您的网站上发起的所有通话。请您的网站管理员将您的 Web 服务器设置为 JWTs 使用此安全密钥发布。

1. 选择 **保存并继续**。

1. 复制自定义 HTML 代码片段并将其插入网站的源代码中。

## 替代方法：直接从代码片段中传递联系属性
<a name="pass-attrib-from-code"></a>

**注意**  
虽然这些属性的作用域使用 `HostedWidget-` 前缀，但它们在客户端仍是可变的。如果您需要在联系人流中使用 PII 或不可变数据，请使用 JWT 设置。

以下示例介绍了如何在不启用小部件安全性的情况下直接从代码片段中传递联系属性。

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...
  
  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### 在联系流中使用属性
<a name="contact-flow-usage-voice"></a>

[检查联系属性](check-contact-attributes.md)流数据块通过**用户定义**的命名空间来访问这些属性，如下图所示。您可以使用流数据块添加分支逻辑。完整路径是 `$Attribute.HostedWidget-attributeName`。

![\[此图显示了流数据块分支到“有效”和“无效”提示。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## 复制通信小部件代码和安全密钥
<a name="copy-widget-script4"></a>

在此步骤中，您要确认选择并复制通信小部件的代码，并将其嵌入到您的网站中。您也可以复制用于创建的密钥 JWTs。

### 安全密钥
<a name="widget-security-key4"></a>

使用此 44 个字符的安全密钥从您的 Web 服务器生成 JSON 网络令牌。如果需要更改，您也可以更新或轮换密钥。当您执行此操作时，Amazon Connect 会为您提供一个新密钥，同时保留以前的密钥，直到您替换它。部署新密钥后，您可以返回 Amazon Connect 并删除之前的密钥。

![\[安全密钥。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-security-key.png)


当客户与您网站上的“开始通话”图标进行交互时，通信小部件会向 Web 服务器请求 JWT。提供 JWT 后，小部件会将其包含在最终客户向 Amazon Connect 发出的通话中。然后，Amazon Connect 会使用密钥解密令牌。如果成功，则确认了 JWT 是由您的 Web 服务器发出的，Amazon Connect 会将通话路由到您的联络中心座席。

#### JSON Web 令牌的详细信息
<a name="jwts4"></a>
+ 算法：**HS256**
+ 声明：
  + **订阅**:*widgetId*

    将 `widgetId` 替换为您自己的 widgetId。要查找您的 widgetId，请参阅示例 [通信小部件脚本](add-chat-to-website.md#chat-widget-script)。
  + **iat**：\$1按时发放。
  + **exp**：\$1有效期（最长 10 分钟）。

  \$1有关日期格式的信息，请参阅以下互联网工程任务组 (IETF) 文档：[JSON Web 令牌 (JWT)](https://tools.ietf.org/html/rfc7519)，第 5 页。

下面的代码片段举例说明了如何使用 Python 生成 JWT：

```
payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

#### 通信小部件脚本
<a name="chat-widget-script4"></a>

下图显示了您在网站上嵌入 JavaScript 的内容示例，您希望客户能够在这些网站上致电您的联络中心。该脚本会在网站右下角显示小部件。

下图显示了一个在哪里可以找到 widgetId 的示例。

![\[通信小部件脚本。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-code.png)


网站加载时，客户会首先看到**开始**图标。他们选择此图标后，通信小部件将打开，客户就可以呼叫您的座席了。

要随时更改通信小部件，请选择**编辑**。

**注意**  
保存的更改将在几分钟内更新客户体验。保存之前，请确认您的小部件配置。

![\[小部件预览上的编辑链接。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/chatwidget-call-edit.png)


要更改网站上的小部件图标，您将收到一个新的代码片段，用于直接更新您的网站。

# 针对您的 Amazon Connect Web 通话小部件的其他自定义设置
<a name="more-customizations-web-calling-widget"></a>

您可以在 Web 通话小部件中添加以下额外的自定义设置：
+ 将[背景模糊](#background-blur)应用于客户的视频图块。
+ 将小部件设置为[全屏](#fullscreen-mode)。
+ 选择[默认摄像头](#choose-default-camera)。
+ [调整视频大小](#resize-video)以适合其容器。

以下各节解释自定义设置的详细信息、使用案例以及如何配置它们。您可以通过配置 `WebCallingCustomizationObject` 来管理这些自定义设置。

**Topics**
+ [背景模糊](#background-blur)
+ [全屏模式](#fullscreen-mode)
+ [选择默认摄像头](#choose-default-camera)
+ [调整视频大小](#resize-video)
+ [配置自定义设置对象](#configure-customization-object-web)
+ [支持的选项和限制](#supported-options-web-calling)

## 背景模糊
<a name="background-blur"></a>

此自定义项用于控制客户视频的背景模糊行为。启用后，当视频处于活动状态时，客户的背景会被模糊处理。这有助于保护其在视频通话中可能暴露在背景里的个人信息或私人空间。

要启用背景模糊，请在 `WebCallingCustomizationObject` 中将 `videoFilter.backgroundBlur.option` 设置为 `ENABLED_ON_BY_DEFAULT`。

## 全屏模式
<a name="fullscreen-mode"></a>

使用此自定义项来控制小部件的全屏行为。您可以通过两种方式启用全屏：
+ 向控件添加全屏按钮。客户可以使用该按钮来开启和关闭全屏模式。

  要添加全屏按钮，请将 `fullscreen.displayButton` 设置为 `ENABLED`。

或
+ 将小部件设置为在加载时进入全屏模式。

  要在加载时启用全屏模式，请将 `fullscreen.fullscreenOnLoad` 设置为 `ENABLED`。

当客户需要专注于小部件时（例如在进行屏幕共享期间），使用全屏模式特别有帮助。

您可以单独使用这两个选项，也可以组合使用。

## 选择默认摄像头
<a name="choose-default-camera"></a>

此自定义项允许小部件在客户启用视频时选择默认的摄像头，提供前置或后置摄像头的选项。例如，此功能在远程诊断设备时非常有用。客户可以使用后置摄像头向座席展示设备。

要将后置摄像头设为默认，请将 `devices.defaultCamera` 设置为 `Back`。

## 调整视频大小
<a name="resize-video"></a>

此自定义项控制客户和座席的视频图块在小部件内的缩放方式。例如，视频帧可以调整为填满整个视频图块，或者按比例缩放以适配视频图块（如果视频帧的宽高比与视频图块不匹配，则会留下空白区域）。
+ 要为客户调整视频大小，请将 `videoTile.localVideoObjectFit` 设置为目标值。
+ 要为座席调整视频大小，请将 `videoTile.remoteVideoObjectFit` 设置为目标值。

有关更多信息，请参阅 [支持的选项和限制](#supported-options-web-calling)。

## 配置自定义设置对象
<a name="configure-customization-object-web"></a>

以下示例展示如何为 Web 通话实现可选的自定义功能。有关这些选项的详细说明，请参阅[支持的选项和限制](#supported-options-web-calling)。

您可以实现以下示例中显示的部分或全部字段。当您没有实现某些自定义时，系统将对这些缺失的字段使用默认行为。

```
amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        },
        copyDisplayNameFromAuthenticatedChat: true
});
```

下图展示在非全屏模式下，这些自定义功能的外观效果。

![\[非全屏模式下的自定义功能。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/fullscreenmode.png)


下图展示在全屏模式下，这些自定义功能的外观效果。

![\[全屏模式下的自定义功能。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/nonfullscreenmode.png)


## 支持的选项和限制
<a name="supported-options-web-calling"></a>

下表列出了支持的自定义设置字段和推荐的值限制。


| 自定义布局选项 | Type | 值 | 说明 | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  字符串  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  设置您的客户的视频图块背景模糊。默认情况下，当您的客户启用视频时，背景模糊过滤器将应用于视频图块。如果您不希望默认启用该过滤器，可以将其设置为 `ENABLED_OFF_BY_DEFAULT`，您的客户仍然可以在小部件的首选页面中手动启用该过滤器。 | 
|  `fullscreen.displayButton`  |  字符串  |  `ENABLED`  |  在小部件的右上角添加一个按钮，使其在浏览器中全屏显示。默认情况下，此按钮不会添加到小部件中，如果要添加此按钮，可以将其设置为 `ENABLED`。 | 
|  `fullscreen.fullscreenOnLoad`  |  字符串  |  `ENABLED`  |  使小部件在浏览器中全屏显示。默认情况下，该小部件将锚定在网页的右下角，将其设置为 `ENABLED` 将使该小部件在浏览器中全屏显示。 | 
|  `devices.defaultCamera`  |  字符串  |  `Front` \$1 `Back`  | 设置客户启用视频时的默认摄像头。这适用于手机或平板电脑使用案例。默认情况下，默认摄像头处于选中状态（[细节](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)）。（有关更多信息，请参阅 Mozilla 开发者[MediaDevices文档中的:EnumerateDevices () 方法](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)。） 将其设置为 `Front\|Back` 时，它会选择相应的摄像头（如果有）。 | 
|  `copyDisplayNameFromAuthenticatedChat`  |  布尔值  |  `true` \$1 `false`  | 如果最终客户使用 [Authenticate Customer](authenticate-customer.md) 流块进行身份验证，则将该值设置为 `true` 会将显示名称复制到语音联系。默认值为 `false`。 | 
|  `videoTile.localVideoObjectFit`  |  字符串  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  在小部件中设置客户的视频图块的 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性。默认情况下，该值由视频分辨率的宽度和高度决定：如果高度大于宽度，则为 `contain`，否则为 `cover`。有关每个值的详细描述，请参阅 Mozilla 开发者文档中的 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。  此属性仅适用于小部件中客户视频的显示高度和宽度。客户发送给座席的视频的高度和宽度保持不变。  | 
|  `videoTile.remoteVideoObjectFit`  |  字符串  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | 在小部件中设置客户的视频图块的 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 属性。默认情况下，该值由视频分辨率的宽度和高度决定：如果高度大于宽度，则为 `contain`，否则为 `cover`。有关每个值的详细描述，请参阅 Mozilla 开发者文档中的 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)。  该属性仅适用于小部件中座席视频的显示高度和宽度。  | 

# 使用 Amazon Connect Streams JS 将视频通话和屏幕共享集成到您的自定义座席桌面中
<a name="integrate-video-calling-for-agents"></a>

本主题适用于开发人员。对于自定义座席桌面，您需要进行更改以支持视频通话和屏幕共享。以下是高级步骤。

**注意**  
如果您将 CCP 直接嵌入到自定义座席应用程序中，请确保在使用 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 启动 CCP 时，`allowFramedVideoCall` 设置为 true。

1. 使用 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 来检查传入的联系是否是 WebRTC 联系。使用联系子类型 `"connect:WebRTC"`，如以下代码示例所示：

   `contact.getContactSubtype() === "connect:WebRTC"`

1. 您可以使用 ` contact contact.getName()` 中的名称字段检索客户显示名称。

## 添加对视频的支持
<a name="support-video"></a>

完成以下步骤，在客户启用视频处理功能时添加对该功能的支持。

1. 要检查联系人是否具有视频功能，请执行以下操作：

   ```
   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()
   ```

1. 要检查座席是否具有处理视频通话的视频权限，请执行以下操作：

   `agent.getPermissions().includes('videoContact');`

1. 要接受视频通话，联系人必须具有视频功能，并且座席必须具有视频权限。

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. 要加入视频会话，请调用 `getVideoConnectionInfo`：

   ```
   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. 要构建视频 UI 并加入视频会议会话，请参阅：
   + Amazon Chime 适用于 JavaScript on [的 SDK](https://github.com/aws/amazon-chime-sdk-js) GitHub 
   + [Amazon Chime SDK React 组件库](https://github.com/aws/amazon-chime-sdk-component-library-react)已开启 GitHub

1. 为简单起见，以下代码片段使用了 Amazon Chime SDK React 组件库中的示例。

   ```
   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }
   ```

1. 要渲染视频网格，请使用 Amazon Chime SDK React 组件库中的，或者使用自定义界面行为[RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page)。[VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)

1. 要渲染视频预览，可以使用[VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)和[CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)组件。要选择或更改摄像头视频，您可以使用 `meetingManager.selectVideoInputDevice` 或 `meetingManager.startVideoInput `（如果会议正在进行中）。

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. 要实现背景模糊，请参阅[useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page)。

1. 有关如何构建自定义视频体验的代码示例，请参阅此 Amazon Chime SDK 示例：[Amazon Chime React Meeting demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting)。

## 增加对屏幕共享的支持
<a name="support-screen-sharing"></a>

**注意**  
如果您直接在自定义代理应用程序中使用 out-of-box CCP，请确保`allowFramedScreenSharing`在使用 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 启动 CCP 时将其设置为 true。`allowFramedScreenSharingPopUp`  
将 `allowFramedScreenSharing` 设置为 true 时，只能在一个窗口或标签页中的一个 CCP 上启用屏幕共享按钮。将 `allowFramedScreenSharingPopUp` 设置为 true 时，当座席选择屏幕共享按钮时，屏幕共享应用程序会在单独的窗口中启动。有关详细信息，请参阅 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 文档。

要启用自定义座席桌面上的屏幕共享，请完成以下步骤。

1. 检查联系人是否具有屏幕共享功能。

   ```
   // Return true if any connection has screen sharing send capability
   contact.hasScreenShareCapability()
   
   // Return true if the agent connection has screen sharing send capability
   contact.canAgentSendScreenShare()
   
   // Return true if customer connection has screen sharing send capability
   contact.canCustomerSendScreenShare()
   ```

1. 检查座席是否具有视频权限。

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. 检查座席是否可以为符合条件的联系人启动屏幕共享会话。

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. 调用 `startScreenSharing` 以启动屏幕共享会话。这将 `ScreenSharingActivated` 添加到联系中，使您可以在[联系记录](ctr-data-model.md)中进行搜索。

   ```
   contact.startScreenSharing();
   ```

1. 调用 `getVideoConnectionInfo` 以加入会话。如果座席已加入视频会话处理视频，则可以跳过此步骤。

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. 通过使用 Amazon Chime SDK React Components Library 加入会话。有关代码片段，请参见 [添加对视频的支持](#support-video) 中的步骤 6。

1. 使用 Amazon Chime SDK React Components 中的相同[VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)内容来渲染屏幕共享视频磁贴。有关更多信息，请参阅[useContentShare状态](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page)和[useContentShare控件](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. 会话结束时调用 `stopScreenSharing`。

   ```
   contact.stopScreenSharing();
   ```

1. 您可以通过订阅以下回拨来接收屏幕共享活动的事件：

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```

# 启用屏幕共享的网址限制
<a name="screen-sharing-url-restriction"></a>

您可以管理 URLs 允许您的客户和代理在联系期间共享的内容。这使您能够实现增强的安全性和隐私性。当客户或座席共享未列入许可名单的网址时，他们会收到一条错误消息，屏幕共享视频会自动暂停并变黑。

**重要**  
支持以下浏览器：  
Chrome 浏览器版本 109 及更高版本
Edge 版本 109 及更高版本
座席和客户只能共享浏览器选项卡。他们无法共享窗口或整个屏幕。如果您启用此功能，而客户或座席使用不支持的浏览器、窗口或整个屏幕，他们将收到一条错误消息。

要启用屏幕共享的网址限制，请完成以下步骤。

## 步骤 1：创建允许 URLs 列表
<a name="step1-url-restriction"></a>

您可以使用预定义的属性配置允许 URLs 的列表。完成以下步骤。

1. 在 Amazon Connect 管理网站中，选择****路由****、**预定义属性**、**添加预定义属性**。

1. 在**添加预定义属性**部分的**预定义属性**框中，添加以下内容之一。
   + 要为客户屏幕共享创建允许列表，请输入 `screensharing:customer-allowed-urls`。
   + 要为座席屏幕共享创建允许列表，请输入 `screensharing:agent-allowed-urls`。

1. 在**值**框中，输入允许的网址。它可以是格式完整的网址，也可以是用于子字符串匹配的字符串模式，例如 ` https://mycompany` 或 ` /mytransactions`。下表列出了有效格式的示例。    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. 保存列表。将 URLs 显示在 “**预定义属性**” 页面上，如以下示例所示。  
![\[预定义属性页面。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## 步骤 2：向您的网站列表添加脚本
<a name="step2-url-restriction"></a>

您需要在网站中嵌入一个脚本，这样页面的网址就可以显示给捕获应用程序。您可以从 Amazon Connect 托管的亚马逊 CloudFront 终端节点上的文件中获取捕获处理程序。按照以下说明进行操作。

1. 在 Amazon Connect 管理网站中，选择 “**频道**”、“**沟通” 小部件**。在通信小部件摘要页面上，查找小部件脚本。从 `s.src` 属性获取端点，如以下示例所示。  
![\[小部件脚本。\]](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   终端节点可以位于与您的 Amazon Connect 实例不同的 AWS 区域。为了获得最佳性能，建议使用与 Amazon Connect 实例相同的区域。

1. 将以下占位符 `${endpoint}` 替换为上一步中的值。复制整个代码片段并将其粘贴到网站的顶层。

   ```
   <script type="text/javascript" src='${endpoint}/amazon-connect-url-restriction.js'></script>
   ```