Amazon Connect Streams JS を使用して、ビデオ通話と画面共有をカスタムエージェントデスクトップに統合する

Amazon Connect Streams JS を使用して、受信したコンタクトが WebRTC コンタクトであるかどうかを確認します。次のコード例のとおり "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 を作成してビデオ会議セッションに参加するには、次を参照してください。

分かりやすいように、次のコードスニペットでは 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();
    }
}    

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

ビデオプレビューをレンダリングするには、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 SDK サンプルの Amazon Chime React 会議のデモを参照してください。