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 Library VideoTileGridの 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 SDK「Amazon Chime React Meeting demo」を参照してください。