翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
ビデオ通話をカスタムエージェントデスクトップに統合する
カスタムエージェントデスクトップの場合、ビデオ通話をサポートするように変更を加える必要があります。高レベルのステップは、次のとおりです。
注記
をカスタムエージェントアプリケーションCCPに直接埋め込む場合は、Amazon Connect Streams JS allowFramedVideoCall
が true に設定されていることを確認します。
-
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 を作成してビデオ会議セッションに参加するには、次を参照してください。
-
のAmazon Chime SDK 用 JavaScript
GitHub -
でのAmazon Chime SDKコンポーネントライブラリの反応
GitHub
-
-
簡単にするために、次のコードスニペットは 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
」を参照してください。