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

# 使用 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 並加入視訊會議工作階段，請參閱：
   + GitHub 上[Amazon Chime 適用於 JavaScript](https://github.com/aws/amazon-chime-sdk-js) 的 SDK 
   + GitHub 上的 [Amazon Chime SDK React 元件程式庫](https://github.com/aws/amazon-chime-sdk-component-library-react) 

1. 為了簡化，下列程式碼片段使用 Amazon Chime SDK React Components Library 中的範例。

   ```
   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 Components Library 中的 [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)，或使用 [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page) 自訂 UI 行為。

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 示範](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting)。

## 新增對螢幕共用的支援
<a name="support-screen-sharing"></a>

**注意**  
如果您在自訂客服應用程式中直接使用現成的 CCP，請確保在使用 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 啟動 CCP 時，將 `allowFramedScreenSharing` 和 `allowFramedScreenSharingPopUp` 設為 true。  
將 `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 元件庫加入工作階段。如需程式碼片段，請參閱[新增對影片的支援](#support-video)中的步驟 6。

1. 使用來自 Amazon Chime SDK React 元件的相同 [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page) 來渲染螢幕共用視訊圖磚。如需詳細資訊，請參閱 [useContentShareState](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) 和 [useContentShareControls](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
       });
     }
   }
   ```