使用 Amazon Connect Streams JS 將視訊通話和螢幕共用整合到您的自訂代理程式桌面 - Amazon Connect
新增對影片的支援新增螢幕共用支援

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

使用 Amazon Connect Streams JS 將視訊通話和螢幕共用整合到您的自訂代理程式桌面

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

注意

如果您CCP直接將 嵌入自訂代理程式應用程式中，請確定在使用 Amazon Connect Streams JS 啟動 CCP 時allowFramedVideoCall設定為 true。 Amazon Connect

  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. 為了簡化，下列程式碼片段使用 React Components Library 的範例 Amazon Chime SDK。

    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. 若要呈現影片網格，請使用 React Components Library VideoTileGrid中的 Amazon Chime SDK ，或使用 自訂 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 示範。

新增螢幕共用支援

注意

如果您CCP直接在自訂代理程式應用程式中使用 out-of-box，請確定當您CCP使用 Amazon Connect Streams JS 啟動 時， 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 Components Library 加入工作階段。如需程式碼片段，請參閱中的步驟 6新增對影片的支援。

  7. 使用 VideoTileGrid Amazon Chime SDK React Components 中的相同 來轉譯畫面共用影片動態磚。如需詳細資訊，請參閱useContentShare狀態和useContentShare控制項

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