Amazon Connect ウェブ通話ウィジェットの追加カスタマイズ

PDFRSS

ウェブ通話ウィジェットには、次のカスタマイズを追加できます。

• 顧客のビデオタイルに背景ぼかしを適用します。

• ウィジェットを全画面表示に設定します。

• デフォルトのカメラデバイスを選択します。

• ビデオのサイズをコンテナに合わせて変更します。

以下のセクションでは、カスタマイズの詳細、そのユースケース、および設定方法について説明します。これらのカスタマイズを管理するには、 を設定しますWebCallingCustomizationObject。

背景ぼかし

このカスタマイズは、顧客のビデオの背景ぼかし動作を制御します。有効にすると、ビデオがアクティブになると、顧客の背景がぼかされます。これにより、ビデオ通話中に背景に表示される可能性のある個人情報やプライベートスペースを保護することができます。

背景ぼかしを有効にするには、 ENABLED_ON_BY_DEFAULTで videoFilter.backgroundBlur.optionを に設定しますWebCallingCustomizationObject。

全画面表示モード

このカスタマイズを使用して、ウィジェットの全画面動作を制御します。全画面表示を有効にするには、次の 2 つの方法があります。

• ウィジェットに全画面表示ボタンを追加します。顧客は ボタンを使用して全画面表示のオンとオフを切り替えることができます。

  全画面表示ボタンを追加するには、 fullscreen.displayButton を に設定しますENABLED。

または

• ロード時にウィジェットを全画面表示に設定します。

  ロード時に全画面表示を有効にするには、 fullscreen.fullscreenOnLoadを に設定しますENABLED。

画面共有時など、お客様がウィジェットに集中する必要がある場合は、特に全画面モードを使用することをお勧めします。

これら 2 つのオプションは、個別に使用することも、組み合わせて使用することもできます。

デフォルトのカメラデバイスを選択する

このカスタマイズにより、顧客がビデオを有効にしたときにウィジェットでデフォルトのカメラデバイスを選択し、前面カメラまたは背面カメラのオプションを提供できます。この機能は、アプライアンスのリモート診断などに役立ちます。顧客はバックカメラを使用してアプライアンスをエージェントに表示できます。

バックカメラをデフォルトとして選択するには、 devices.defaultCameraを に設定しますBack。

ビデオのサイズ変更

このカスタマイズにより、ウィジェットで顧客とエージェントの両方のビデオタイルのサイズを変更する方法が制御されます。例えば、動画フレームのサイズを変更して動画タイル全体を埋めたり、動画タイルに合わせてスケーリングして、動画フレームのアスペクト比が動画タイルと一致しない場合は空白のままにしたりできます。

• お客様のビデオのサイズを変更するには、 videoTile.localVideoObjectFitをターゲット値に設定します。

• エージェントのビデオのサイズを変更するには、 videoTile.remoteVideoObjectFit をターゲット値に設定します。

詳細については、「サポートされているオプションと制約」を参照してください。

カスタマイズオブジェクトを設定する

次の例は、ウェブ呼び出しのオプションカスタマイズを実装する方法を示しています。これらのオプションの詳細については、「」を参照してくださいサポートされているオプションと制約。

次の例に示すフィールドの一部またはすべてを実装できます。カスタマイズを実装しない場合、欠落しているフィールドにはデフォルトの動作が使用されます。

amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        }
}); 

次の図は、全画面表示モードでない場合のカスタマイズの外観を示しています。

次の図は、フルスクリーンモードの場合のカスタマイズの外観を示しています。

サポートされているオプションと制約

サポートされているカスタマイズフィールドと推奨される値の制約は、次の表のとおりです。

カスタムレイアウトオプション	タイプ	値	説明
videoFilter.backgroundBlur.option	string	ENABLED_ON_BY_DEFAULT | ENABLED_OFF_BY_DEFAULT	顧客の動画タイルの背景ぼかしを設定します。デフォルトでは、顧客がビデオを有効にすると、背景ぼかしフィルターがビデオタイルに適用されます。デフォルトでフィルターを有効にしない場合は、 に設定できENABLED_OFF_BY_DEFAULT、顧客はウィジェットの設定ページでフィルターを手動で有効にできます。
fullscreen.displayButton	string	ENABLED	ウィジェットの右上隅にボタンを追加して、ブラウザで全画面表示にします。デフォルトでは、このボタンはウィジェットに追加されません。このボタンを追加する場合は、 に設定できますENABLED。
fullscreen.fullscreenOnLoad	string	ENABLED	ブラウザでウィジェットを全画面表示します。デフォルトでは、ウィジェットはウェブページの右下隅に固定され、 に設定すると、ブラウザでウィジェットENABLEDが全画面表示になります。
devices.defaultCamera	string	Front | Back	顧客がビデオを有効にするときに、デフォルトのカメラデバイスを設定します。これはモバイルまたはタブレットのユースケース用です。デフォルトでは、デフォルトのカメラが選択されています (詳細）。（詳細については、Mozilla デベロッパードキュメントの MediaDevices: enumerateDevices() メソッドを参照してください。） に設定するとFront|Back、使用可能な場合は対応するカメラが選択されます。
videoTile.localVideoObjectFit	string	fill | contain | cover | none | scale-down	ウィジェットで顧客のビデオタイルの object-fit プロパティを設定します。デフォルトでは、値はビデオ解像度の幅と高さによって決まります。高さが幅より大きい場合は 、containそれ以外の場合は になりますcover。各値の詳細な説明については、Mozilla デベロッパードキュメントの「object-fit」を参照してください。 注記 この属性は、ウィジェット内の顧客のビデオの表示高さと幅にのみ適用されます。エージェントに送信された顧客の動画の高さと幅は変更されません。
videoTile.remoteVideoObjectFit	string	fill | contain | cover | none | scale-down	ウィジェットで顧客のビデオタイルの object-fit プロパティを設定します。デフォルトでは、値はビデオ解像度の幅と高さによって決まります。高さが幅より大きい場合は 、containそれ以外の場合は になりますcover。各値の詳細については、Mozilla 開発者ドキュメントの「object-fit」を参照してください。 注記 この属性は、ウィジェット内のエージェントのビデオの表示高さと幅にのみ適用されます。