영상 통화를 사용자 지정 에이전트 데스크톱에 통합

사용자 지정 에이전트 데스크톱의 경우 영상 통화를 지원하도록 변경해야 합니다. 다음은 대략적인 단계입니다.

참고

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.getPermission().includes('videoContact');
   }

4. 영상 세션에 합류하려면 getVideoConnectionInfo를 직접 호출합니다.

   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }

5. 영상 UI를 만들고 영상 회의 세션에 합류하려면 다음을 참조하세요.

   • Amazon Chime 온용 SDK JavaScript GitHub

   • Amazon Chime SDK 리액트 컴포넌트 라이브러리 온 GitHub

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 구성 요소 라이브러리의 를 사용하거나 를 사용하여 UI 동작을 사용자 지정합니다. VideoTileGridRemoteVideoTileProvider

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 데모를 참조하십시오.