ビデオ通話をカスタムエージェントデスクトップに統合する

カスタムエージェントデスクトップの場合、ビデオ通話をサポートするように変更を加える必要があります。高レベルのステップは、次のとおりです。

注記

をカスタムエージェントアプリケーションCCPに直接埋め込む場合は、Amazon Connect Streams JS CCPを使用して を開始するときに、 allowFramedVideoCallが true に設定されていることを確認します。 Amazon Connect

1. Amazon Connect Streams JS を使用して、着信問い合わせがウェブRTC問い合わせであるかどうかを確認します。次のコード例のとおり "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 を作成してビデオ会議セッションに参加するには、次を参照してください。

   • のAmazon Chime SDK 用 JavaScript GitHub

   • でのAmazon Chime SDKコンポーネントライブラリの対応 GitHub

6. わかりやすくするために、次のコードスニペットでは React コンポーネントライブラリの例 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();
       }
   }    

7. ビデオグリッドをレンダリングするには、React コンポーネントライブラリVideoTileGridの Amazon Chime SDK を使用するか、 を使用して UI の動作をカスタマイズしますRemoteVideoTileProvider。

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 demo」のサンプルを参照してください。