翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Connect ウェブ通話ウィジェットの追加のカスタマイズ
<a name="more-customizations-web-calling-widget"></a>

ウェブ通話ウィジェットには、次のカスタマイズを追加できます。
+ 顧客のビデオタイルに[背景ぼかし](#background-blur)を適用する。
+ ウィジェットを[全画面表示](#fullscreen-mode)に設定する。
+ [デフォルトのカメラデバイス](#choose-default-camera)を選択する。
+ コンテナに合わせて[ビデオのサイズを変更](#resize-video)する。

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

**Topics**
+ [背景ぼかし](#background-blur)
+ [全画面表示モード](#fullscreen-mode)
+ [デフォルトのカメラデバイスを選択する](#choose-default-camera)
+ [ビデオのサイズ変更](#resize-video)
+ [カスタマイズオブジェクトを設定する](#configure-customization-object-web)
+ [サポートされているオプションと制約](#supported-options-web-calling)

## 背景ぼかし
<a name="background-blur"></a>

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

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

## 全画面表示モード
<a name="fullscreen-mode"></a>

このカスタマイズは、ウィジェットの全画面表示動作を制御するために使用します。全画面表示を有効にするには、次の 2 つの方法があります。
+ ウィジェットに全画面表示ボタンを追加します。顧客はボタンを使用して全画面表示のオンとオフを切り替えることができます。

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

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

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

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

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

## デフォルトのカメラデバイスを選択する
<a name="choose-default-camera"></a>

このカスタマイズにより、顧客がウィジェットでビデオを有効にしたときのデフォルトのカメラデバイスを、前面カメラまたは背面カメラのオプションから選択できます。この機能は、リモートで製品を診断する場合などに便利です。顧客は背面カメラを使用して製品をエージェントに見せることができます。

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

## ビデオのサイズ変更
<a name="resize-video"></a>

このカスタマイズは、顧客とエージェントの両方のビデオタイルをウィジェットでサイズ変更する方法を制御します。例えば、ビデオフレームをビデオタイル全体に収まるようにサイズ変更したり、ビデオフレームのアスペクト比がビデオタイルと一致しない場合は、空白部分をそのまま残してビデオタイルに合わせて拡大/縮小したりできます。
+ 顧客のビデオのサイズを変更するには、`videoTile.localVideoObjectFit` を目的の値に設定します。
+ エージェントのビデオのサイズを変更するには、`videoTile.remoteVideoObjectFit` を目的の値に設定します。

詳細については、「[サポートされているオプションと制約](#supported-options-web-calling)」を参照してください。

## カスタマイズオブジェクトを設定する
<a name="configure-customization-object-web"></a>

次の例は、ウェブ通話のオプションのカスタマイズを実装する方法を示しています。これらのオプションの詳細な説明については、「[サポートされているオプションと制約](#supported-options-web-calling)」を参照してください。

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

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

次の図は、全画面表示モードでない場合にカスタマイズがどのように表示されるかを示しています。

![全画面表示モードでない場合のカスタマイズ。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/fullscreenmode.png)


次の図は、全画面表示モードの場合にカスタマイズがどのように表示されるかを示しています。

![全画面表示モードの場合のカスタマイズ。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/nonfullscreenmode.png)


## サポートされているオプションと制約
<a name="supported-options-web-calling"></a>

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


| カスタムレイアウトオプション | タイプ | 値 | 説明 | 
| --- | --- | --- | --- | 
| `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` | 顧客がビデオを有効にしたときのデフォルトのカメラデバイスを設定します。これは、モバイルまたはタブレットのユースケースを対象としています。デフォルトでは、デフォルトのカメラが選択されています ([詳細](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices))。詳細については、Mozilla デベロッパードキュメントの「[MediaDevices: enumerateDevices() メソッド](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)」を参照してください。値を `Front\|Back` に設定すると、使用可能な場合は対応するカメラが選択されます。 | 
| `copyDisplayNameFromAuthenticatedChat` | boolean | `true` \| `false` | エンドユーザーがフローの [[顧客を認証]](authenticate-customer.md) ブロックを使用して認証されている場合、値を `true` に設定すると、表示名が音声コンタクトにコピーされます。デフォルトは `false` です。 | 
| `videoTile.localVideoObjectFit` | string | `fill` \| `contain` \| `cover` \| `none` \| `scale-down` | ウィジェットの顧客のビデオタイルの [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) プロパティを設定します。デフォルトでは、ビデオ解像度の幅と高さによって値が決まります。高さが幅より大きい場合は `contain`、それ以外の場合は `cover` になります。各値の詳細については、Mozilla デベロッパードキュメントの「[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)」を参照してください。 この属性は、ウィジェット内での顧客のビデオの表示高さと表示幅にのみ適用されます。エージェントに送信された顧客のビデオの高さと幅は変更されません。  | 
| `videoTile.remoteVideoObjectFit` | string | `fill` \| `contain` \| `cover` \| `none` \| `scale-down` | ウィジェットの顧客のビデオタイルの [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) プロパティを設定します。デフォルトでは、ビデオ解像度の幅と高さによって値が決まります。高さが幅より大きい場合は `contain`、それ以外の場合は `cover` になります。各値の詳細については、Mozilla デベロッパードキュメントの「[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)」を参照してください。 この属性は、ウィジェット内でのエージェントのビデオの表示高さと表示幅にのみ適用されます。  |