將視訊通話整合至您的自訂客服人員桌面

對於自訂客服人員桌面，您需要進行任何變更以支援視訊通話。以下是高層級的步驟。

注意

如果您將 CCP 直接嵌入到自訂客服人員應用程式中，請確保在使用 Amazon Connect Streams JS 啟動 CCP 時，將 allowFramedVideoCall 設為 true。

1. 使用 Amazon Connect Streams JS 以檢查傳入的聯絡人是否是 WebRTC 聯絡人。使用聯絡子類型 "connect:WebRTC"，如下列程式碼範例所示：

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

2. 您可以使用 contact contact.getName() 中的名稱欄位，擷取客戶顯示名稱。

如果您的客戶已啟用視訊處理，以下是視訊處理的附加步驟：

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

2. 若要檢查客服人員是否有處理視訊通話的視訊權限：

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

3. 若要接受視訊通話，聯絡人必須有視訊功能，且客服人員必須有視訊權限。

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

4. 要加入視訊工作階段，請致電 getVideoConnectionInfo：

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

5. 若要建立視訊 UI 並加入視訊會議工作階段，請參閱：

   • Amazon Chime 適用於開 JavaScript啟的 SDK GitHub

   • Amazon Chime SDK 反應組件庫 GitHub

6. 為了簡單起見，下列程式碼片段會使用 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();
       }
   }    

7. 要呈現視頻網格，請使用 Amazon Chime SDK React 組件庫VideoTileGrid中的或使用自定義 UI 行為RemoteVideoTileProvider。

8. 要渲染視頻預覽，您可以使用VideoPreview和CameraSelection組件。若要選擇或變更攝影機視訊，您可以使用 meetingManager.selectVideoInputDevice 或 meetingManager.startVideoInput ，如果會議進行中。

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

9. 若要實作背景模糊，請參閱useBackgroundBlur。

10. 有關如何構建自定義視頻體驗的示例代碼，請參閱此 Amazon Chime SDK 示例：Amazon Chime React Meeting 演示。