使用 Amazon Connect Streams JS 将视频通话和屏幕共享集成到您的定制代理桌面 - Amazon Connect
添加对视频的支持添加对屏幕共享的支持

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

使用 Amazon Connect Streams JS 将视频通话和屏幕共享集成到您的定制代理桌面

本主题适用于开发人员。对于自定义座席桌面，您需要进行更改以支持视频通话和屏幕共享。以下是高级步骤。

注意

如果您将CCP直接嵌入到自定义代理应用程序中，请确保在CCP使用 Amazon allowFramedVideoCall Connect Streams JS 启动时将其设置为 true。

  1. 使用 Amazon Connect Streams JS 来检查传入的联系人是否是网络RTC联系人。使用联系子类型 "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 演示。

添加对屏幕共享的支持

注意

如果您 out-of-boxCCP直接在自定义代理应用程序中使用，请确保allowFramedScreenSharing在CCP使用 Amazon Connect Streams JS 启动时将其设置为 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 组件库加入会议。有关代码片段，请参阅中的步骤 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
    });
  }
}