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. 영상 미리 보기를 렌더링하려면 VideoPreviewCameraSelection 구성 요소를 사용할 수 있습니다. 카메라 영상을 선택하거나 변경하려면 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를 참조하세요.

화면 공유에 대한 지원 추가

참고

CCP를 사용자 지정 에이전트 애플리케이션에 직접 내장하는 경우 Amazon Connect Streams JS를 사용하여 CCP를 시작할 때 allowFramedScreenSharingallowFramedScreenSharingPopUp이 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. Amazon Chime SDK React Components에서 동일한 VideoTileGrid를 사용하여 화면 공유 비디오 타일을 렌더링합니다. 자세한 내용은 useContentShareStateuseContentShareControls를 참조하세요.

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