View a markdown version of this page

使用 Amazon Connect Streams JS 將視訊通話和螢幕共用整合至您的自訂客服桌面 - Amazon Connect
新增對影片的支援新增對螢幕共用的支援

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

使用 Amazon Connect Streams JS 將視訊通話和螢幕共用整合至您的自訂客服桌面

本主題適用於開發人員。對於自訂客服桌面，您需要進行變更以支援視訊通話和螢幕共用。以下是高層級的步驟。

注意

如果您將 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.getPermissions().includes('videoContact');
}

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

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

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

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

  7. 若要呈現影片網格，請使用 Amazon Chime SDK React Components Library 中的 VideoTileGrid，或使用 RemoteVideoTileProvider 自訂 UI 行為。

  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 示範。

新增對螢幕共用的支援

注意

如果您在自訂客服應用程式中直接使用現成的 CCP，請確保在使用 Amazon Connect Streams JS 啟動 CCP 時，將 allowFramedScreenSharing 和 allowFramedScreenSharingPopUp 設為 true。

將 allowFramedScreenSharing 設定為 true 會在一個視窗或索引標籤中僅對一個 CCP 啟用螢幕共用按鈕。當客服選擇螢幕共用按鈕時，將 allowFramedScreenSharingPopUp 設定為 true 會在個別的視窗中啟動螢幕共用應用程式。如需更多詳細資訊，請參閱 Amazon Connect Streams JS 文件。

請完成下列步驟，在您的自訂客服桌面上啟用螢幕共用。

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

  2. 檢查客服是否具有視訊許可。

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

  3. 檢查客服是否可以為符合資格的聯絡人啟動螢幕共用工作階段。

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

  4. 呼叫 startScreenSharing 以啟動螢幕共用工作階段。這會將 ScreenSharingActivated 新增至聯絡人，讓您可以在聯絡人記錄中搜尋聯絡人。

    contact.startScreenSharing();

  5. 呼叫 getVideoConnectionInfo 以加入工作階段。如果客服已加入視訊工作階段來處理視訊，您可以略過該步驟。

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

  6. 使用 Amazon Chime SDK React 元件庫加入工作階段。如需程式碼片段，請參閱新增對影片的支援中的步驟 6。

  7. 使用來自 Amazon Chime SDK React 元件的相同 VideoTileGrid 來渲染螢幕共用視訊圖磚。如需詳細資訊，請參閱 useContentShareState 和 useContentShareControls

  8. 結束工作階段時呼叫 stopScreenSharing。

    contact.stopScreenSharing();

  9. 您可以透過訂閱下列回呼來接收螢幕共用活動的事件：

    initScreenSharingListeners() {
    this.contact.onScreenSharingStarted(() => {
        // Screen sharing session started
    });

    this.contact.onScreenSharingStopped(() => {
        // Screen sharing session ended
    });

    this.contact.onScreenSharingError((error) => {
        // Screen sharing session error occurred
    });
  }
}