本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。
使用 Amazon Connect Streams JS 将视频通话和屏幕共享集成到您的自定义座席桌面中
本主题适用于开发人员。对于自定义座席桌面,您需要进行更改以支持视频通话和屏幕共享。以下是高级步骤。
注意
如果您将 CCP 直接嵌入到自定义座席应用程序中,请确保在使用 Amazon Connect Streams JSallowFramedVideoCall
设置为 true。
-
使用 Amazon Connect Streams JS
来检查传入的联系是否是 WebRTC 联系。使用联系子类型 "connect:WebRTC"
,如以下代码示例所示:contact.getContactSubtype() === "connect:WebRTC"
-
您可以使用
contact contact.getName()
中的名称字段检索客户显示名称。
添加对视频的支持
完成以下步骤,在客户启用视频处理功能时添加对该功能的支持。
-
要检查联系人是否具有视频功能,请执行以下操作:
// 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()
-
要检查座席是否具有处理视频通话的视频权限,请执行以下操作:
agent.getPermissions().includes('videoContact');
-
要接受视频通话,联系人必须具有视频功能,并且座席必须具有视频权限。
function shouldRenderVideoUI() { return contact.getContactSubtype() === "connect:WebRTC" && contact.hasVideoRTCCapabilities() && agent.getPermissions().includes('videoContact'); }
-
要加入视频会话,请调用
getVideoConnectionInfo
:if (shouldRenderVideoUI()) { const response = await contact.getAgentConnection().getVideoConnectionInfo(); }
-
要构建视频 UI 并加入视频会议会话,请参阅:
-
Amazon Chime 适用于 JavaScript on 的 SDK
GitHub -
Amazon Chime SDK React 组件库
已开启 GitHub
-
-
为简单起见,以下代码片段使用了 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(); } }
-
要渲染视频网格,请使用 Amazon Chime SDK React 组件库中的,或者使用自定义界面行为RemoteVideoTileProvider
。VideoTileGrid -
要渲染视频预览,可以使用VideoPreview
和CameraSelection 组件。要选择或更改摄像头视频,您可以使用 meetingManager.selectVideoInputDevice
或meetingManager.startVideoInput
(如果会议正在进行中)。const meetingManager = useMeetingManager(); const { isVideoEnabled } = useLocalVideo(); if (isVideoEnabled) { await meetingManager.startVideoInputDevice(current); } else { meetingManager.selectVideoInputDevice(current); }
-
要实现背景模糊,请参阅useBackgroundBlur
。 -
有关如何构建自定义视频体验的代码示例,请参阅此 Amazon Chime SDK 示例:Amazon Chime React Meeting demo
。
增加对屏幕共享的支持
注意
如果您直接在自定义代理应用程序中使用 out-of-box CCP,请确保allowFramedScreenSharing
在使用 Amazon Connect Streams JSallowFramedScreenSharingPopUp
将 allowFramedScreenSharing
设置为 true 时,只能在一个窗口或标签页中的一个 CCP 上启用屏幕共享按钮。将 allowFramedScreenSharingPopUp
设置为 true 时,当座席选择屏幕共享按钮时,屏幕共享应用程序会在单独的窗口中启动。有关详细信息,请参阅 Amazon Connect Streams JS
要启用自定义座席桌面上的屏幕共享,请完成以下步骤。
-
检查联系人是否具有屏幕共享功能。
// 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()
-
检查座席是否具有视频权限。
agent.getPermissions().includes('videoContact');
-
检查座席是否可以为符合条件的联系人启动屏幕共享会话。
fun canStartScreenSharingSession() { return contactgetContactSubtype() === "connect:WebRTC" && contact.hasScreenShareCapability() && agent.getPermissions().includes('videoContact'); }
-
调用
startScreenSharing
以启动屏幕共享会话。这将ScreenSharingActivated
添加到联系中,使您可以在联系记录中进行搜索。contact.startScreenSharing();
-
调用
getVideoConnectionInfo
以加入会话。如果座席已加入视频会话处理视频,则可以跳过此步骤。if (canStartScreenSharingSession) { contact.startScreenSharing(); const response = await contact.getAgentConnection().getVideoConnectionInfo(); }
-
通过使用 Amazon Chime SDK React Components Library 加入会话。有关代码片段,请参见 添加对视频的支持 中的步骤 6。
-
使用 Amazon Chime SDK React Components 中的相同VideoTileGrid
内容来渲染屏幕共享视频磁贴。有关更多信息,请参阅useContentShare状态 和useContentShare控件 -
会话结束时调用
stopScreenSharing
。contact.stopScreenSharing();
-
您可以通过订阅以下回拨来接收屏幕共享活动的事件:
initScreenSharingListeners() { this.contact.onScreenSharingStarted(() => { // Screen sharing session started }); this.contact.onScreenSharingStopped(() => { // Screen sharing session ended }); this.contact.onScreenSharingError((error) => { // Screen sharing session error occurred }); } }