기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# Amazon Connect Streams JS를 사용하여 사용자 지정 에이전트 데스크톱에 영상 통화 및 화면 공유 통합
<a name="integrate-video-calling-for-agents"></a>

이 주제는 개발자를 위한 것입니다. 사용자 지정 에이전트 데스크톱의 경우 영상 통화 및 화면 공유를 지원하도록 변경해야 합니다. 다음은 대략적인 단계입니다.

**참고**  
CCP를 사용자 지정 에이전트 애플리케이션에 직접 내장하는 경우 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams)를 사용하여 CCP를 시작할 때 `allowFramedVideoCall`이 true로 설정되어 있는지 확인하세요.

1. [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams)를 사용하여 수신 연락이 WebRTC 연락인지 확인하세요. 다음 코드 예시와 같이 `"connect:WebRTC"`라는 연락 하위 유형을 사용하세요.

   `contact.getContactSubtype() === "connect:WebRTC"`

1. ` contact contact.getName()`의 이름 필드를 사용하여 고객 표시 이름을 검색할 수 있습니다.

## 비디오에 대한 지원 추가
<a name="support-video"></a>

다음 단계를 완료하여 고객이 비디오 처리를 활성화한 경우 비디오 처리에 대한 지원을 추가합니다.

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()
   ```

1. 에이전트에게 영상 통화를 처리할 수 있는 영상 권한이 있는지 확인하는 방법:

   `agent.getPermissions().includes('videoContact');`

1. 영상 통화를 수락하려면 연락에 영상 기능이 있어야 하고 에이전트에게는 영상 권한이 있어야 합니다.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

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

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

1. 영상 UI를 만들고 영상 회의 세션에 합류하려면 다음을 참조하세요.
   + GitHub의[Amazon Chime JavaScript용 SDK](https://github.com/aws/amazon-chime-sdk-js) 
   + GitHub의 [Amazon Chime SDK React Components Library](https://github.com/aws/amazon-chime-sdk-component-library-react) 

1. 간소화를 위해 다음 코드 조각은 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();
       }
   }
   ```

1. 비디오 그리드를 렌더링하려면 Amazon Chime SDK React Components Library의 [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)를 사용하거나 [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page)를 사용하여 UI 동작을 사용자 지정합니다.

1. 영상 미리 보기를 렌더링하려면 [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page) 및 [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page) 구성 요소를 사용할 수 있습니다. 카메라 영상을 선택하거나 변경하려면 `meetingManager.selectVideoInputDevice`를 사용하거나 회의가 진행 중인 경우 `meetingManager.startVideoInput `을 사용할 수 있습니다.

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. 배경 흐림 효과를 구현하려면 [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page)를 참조하세요.

1. 사용자 지정 영상 경험을 구축하는 방법에 대한 샘플 코드는 Amazon Chime SDK 샘플인 [Amazon Chime React Meeting demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting)를 참조하세요.

## 화면 공유에 대한 지원 추가
<a name="support-screen-sharing"></a>

**참고**  
CCP를 사용자 지정 에이전트 애플리케이션에 직접 내장하는 경우 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams)를 사용하여 CCP를 시작할 때 `allowFramedScreenSharing` 및 `allowFramedScreenSharingPopUp`이 true로 설정되어 있는지 확인하세요.  
`allowFramedScreenSharing`을 true로 설정하면 창 하나 또는 탭의 CCP 하나에서만 화면 공유 버튼이 활성화됩니다. `allowFramedScreenSharingPopUp`을 true로 설정하면 에이전트가 화면 공유 버튼을 선택할 때 별도의 창에서 화면 공유 앱이 시작됩니다. 자세한 지침은 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 설명서를 참조하세요.

다음 단계를 완료하여 사용자 지정 에이전트 데스크톱에서 화면 공유를 활성화합니다.

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()
   ```

1. 에이전트에 비디오 권한이 있는지 확인합니다.

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. 에이전트가 적격 연락처에 대한 화면 공유 세션을 시작할 수 있는지 확인합니다.

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. `startScreenSharing`을 직접적으로 호출하여 화면 공유 세션을 시작합니다. 이렇게 하면 연락처에 `ScreenSharingActivated`가 추가되어 [연락처 레코드](ctr-data-model.md) 에서 검색할 수 있습니다.

   ```
   contact.startScreenSharing();
   ```

1. `getVideoConnectionInfo`를 직접적으로 호출하여 세션에 참여합니다. 에이전트가 비디오를 처리하기 위해 비디오 세션에 참여한 경우 단계를 건너뛸 수 있습니다.

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Amazon Chime SDK React Components Library를 사용하여 세션에 참여합니다. 코드 스니펫은 [비디오에 대한 지원 추가](#support-video)의 6단계를 참조하세요.

1. Amazon Chime SDK React Components에서 동일한 [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)를 사용하여 화면 공유 비디오 타일을 렌더링합니다. 자세한 내용은 [useContentShareState](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) 및 [useContentShareControls](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page)를 참조하세요.

1. 세션을 종료할 때 `stopScreenSharing`을 직접적으로 호출합니다.

   ```
   contact.stopScreenSharing();
   ```

1. 다음 콜백을 구독하여 화면 공유 활동에 대한 이벤트를 수신할 수 있습니다.

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```