Amazon Connect Streams JS를 사용하여 사용자 지정 에이전트 데스크톱에 화상 통화 및 화면 공유 통합

Amazon Connect Streams JS를 사용하여 수신 연락처가 웹RTC 연락처인지 확인합니다. 다음 코드 예시와 같이 "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를 만들고 영상 회의 세션에 합류하려면 다음을 참조하세요.

간소화를 위해 다음 코드 조각은 React Components Library의 예제를 Amazon Chime SDK 사용합니다.

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

비디오 그리드를 렌더링하려면 React Components LibraryVideoTileGrid의 를 Amazon Chime SDK 사용하거나 를 사용하여 UI 동작을 사용자 지정합니다RemoteVideoTileProvider.

비디오 미리 보기를 렌더링하려면 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 React Meeting 데모 Amazon Chime SDK 샘플을 참조하세요.