

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 针对您的 Amazon Connect Web 通话小部件的其他自定义设置
<a name="more-customizations-web-calling-widget"></a>

您可以在 Web 通话小部件中添加以下额外的自定义设置：
+ 将[背景模糊](#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>

使用此自定义项来控制小部件的全屏行为。您可以通过两种方式启用全屏：
+ 向控件添加全屏按钮。客户可以使用该按钮来开启和关闭全屏模式。

  要添加全屏按钮，请将 `fullscreen.displayButton` 设置为 `ENABLED`。

或
+ 将小部件设置为在加载时进入全屏模式。

  要在加载时启用全屏模式，请将 `fullscreen.fullscreenOnLoad` 设置为 `ENABLED`。

当客户需要专注于小部件时（例如在进行屏幕共享期间），使用全屏模式特别有帮助。

您可以单独使用这两个选项，也可以组合使用。

## 选择默认摄像头
<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>

以下示例展示如何为 Web 通话实现可选的自定义功能。有关这些选项的详细说明，请参阅[支持的选项和限制](#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/zh_cn/connect/latest/adminguide/images/fullscreenmode.png)


下图展示在全屏模式下，这些自定义功能的外观效果。

![全屏模式下的自定义功能。](http://docs.aws.amazon.com/zh_cn/connect/latest/adminguide/images/nonfullscreenmode.png)


## 支持的选项和限制
<a name="supported-options-web-calling"></a>

下表列出了支持的自定义设置字段和推荐的值限制。


| 自定义布局选项 | Type | 值 | 说明 | 
| --- | --- | --- | --- | 
| `videoFilter.backgroundBlur.option` | 字符串 | `ENABLED_ON_BY_DEFAULT` \| `ENABLED_OFF_BY_DEFAULT` | 设置您的客户的视频图块背景模糊。默认情况下，当您的客户启用视频时，背景模糊过滤器将应用于视频图块。如果您不希望默认启用该过滤器，可以将其设置为 `ENABLED_OFF_BY_DEFAULT`，您的客户仍然可以在小部件的首选页面中手动启用该过滤器。 | 
| `fullscreen.displayButton` | 字符串 | `ENABLED` | 在小部件的右上角添加一个按钮，使其在浏览器中全屏显示。默认情况下，此按钮不会添加到小部件中，如果要添加此按钮，可以将其设置为 `ENABLED`。 | 
| `fullscreen.fullscreenOnLoad` | 字符串 | `ENABLED` | 使小部件在浏览器中全屏显示。默认情况下，该小部件将锚定在网页的右下角，将其设置为 `ENABLED` 将使该小部件在浏览器中全屏显示。 | 
| `devices.defaultCamera` | 字符串 | `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` | 布尔值 | `true` \| `false` | 如果最终客户使用 [Authenticate Customer](authenticate-customer.md) 流块进行身份验证，则将该值设置为 `true` 会将显示名称复制到语音联系。默认值为 `false`。 | 
| `videoTile.localVideoObjectFit` | 字符串 | `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` | 字符串 | `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)。 该属性仅适用于小部件中座席视频的显示高度和宽度。  | 