翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# 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 での SDK for JavaScript](https://github.com/aws/amazon-chime-sdk-js) 
   + GitHub の [Amazon Chime SDK React コンポーネントライブラリ](https://github.com/aws/amazon-chime-sdk-component-library-react) 

1. わかりやすくするために、次のコードスニペットでは 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();
       }
   }
   ```

1. ビデオグリッドをレンダリングするには、 Amazon Chime SDK React コンポーネントライブラリの [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 会議のデモ](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 に設定すると、1 つのウィンドウまたはタブ内の 1 つの 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 コンポーネントから同じ [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
       });
     }
   }
   ```