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

# 使用 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
       });
     }
   }
   ```