使用 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 组件库中的示例。

    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 组件库中的，或者使用自定义界面行为RemoteVideoTileProvider。VideoTileGrid

  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 demo。

增加对屏幕共享的支持

注意

如果您直接在自定义代理应用程序中使用 out-of-box CCP，请确保allowFramedScreenSharing在使用 Amazon Connect Streams JS 启动 CCP 时将其设置为 true。allowFramedScreenSharingPopUp

将 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. 使用 Amazon Chime SDK React Components 中的相同VideoTileGrid内容来渲染屏幕共享视频磁贴。有关更多信息，请参阅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
    });
  }
}