第 4 步。配置您的网站以便与 Amazon AppStream 2.0 集成 - 亚马逊 AppStream 2.0
导入 appstream 嵌 JavaScript 入文件初始化和配置 AppStream.Embed 接口对象在 AppStream 2.0 用户界面中隐藏项目的示例

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

第 4 步。配置您的网站以便与 Amazon AppStream 2.0 集成

以下各节提供有关如何配置您的网页以托管嵌入式 AppStream 2.0 流媒体会话的信息。

导入 appstream 嵌 JavaScript 入文件

  1. 在您计划嵌入 AppStream 2.0 直播会话的网页上，通过添加以下代码将 appstream-embed.js 文件导入网页：

    <script type="text/javascript" src="./appstream_embed.js"> </script>

  2. 接下来，创建一个空的容器 div。您设置的 div 的 ID 将传递给 AppStream 2.0 嵌入构造函数。然后将其用于为流式传输会话注入 iframe。要创建 div，请添加以下代码：

    <div id="appstream-container"> </div>

初始化和配置 AppStream.Embed 接口对象

要在中初始化AppStream.Embed接口对象 JavaScript，必须添加用于创建带有流媒体URL和用户界面配置选项的AppStream.Embed对象的代码。这些选项以及您创建的 div ID 存储在名为 appstreamOptions 的对象中。

以下示例代码显示了如何初始化 AppStream.Embed 接口对象。

var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };
 appstreamEmbed = new AppStream.Embed("appstream-container", appstreamOptions);

在代码中，替换 sessionURL 以及 userInterfaceConfig 用你自己的价值观。

注意

为指定的值 userInterfaceConfig 隐藏整个 AppStream 2.0 工具栏。示例中包含的此值可选。

sessionUrl

您使用 AppStream 2.0 控制台、CreateStreamingURLAPI操作或create-streaming-url AWS CLI命令创建的流媒体URL。此参数区分大小写。

类型：字符串

必需：是

userInterfaceConfig

生成用户界面元素初始状态的配置。该配置是一个键值对。

密钥指定了初始化嵌入式 AppStream 2.0 流式传输会话时最初隐藏的用户界面对象。AppStream.Embed.Options.HIDDEN_ELEMENTS以后，您可以使用 getInterfaceState 参数返回隐藏和可见对象。

该值是常量数组（工具栏按钮）。有关可以使用的常量列表，请参阅 使用 HIDDEN_ELEMENTS。

类型：地图 (key:value)

必需：否

在 AppStream 2.0 用户界面中隐藏项目的示例

本节中的示例说明了如何在嵌入式 AppStream 2.0 流式传输会话期间向用户隐藏 AppStream 2.0 用户界面中的项目。

示例 1：隐藏整个 AppStream 2.0 工具栏

要防止用户在嵌入式流媒体会话期间访问 AppStream 2.0 工具栏上的任何按钮，请使用AppStream.Embed.Elements.TOOLBAR常量。此常量允许您隐藏所有 AppStream 2.0 工具栏按钮。

var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.TOOLBAR]}
 };

示例 2：隐藏 AppStream 2.0 工具栏上的特定按钮

您可以显示 AppStream 2.0 工具栏，同时防止用户在嵌入式直播会话期间访问特定的工具栏按钮。要执行此操作，请为要隐藏的按钮指定常量。以下代码使用 AppStream.Embed.Elements.FILES_BUTTON 常量来隐藏 My Files (我的文件) 按钮。这样可以防止用户在嵌入式流式传输会话期间访问持久性存储选项。

var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode...',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.FILES_BUTTON]}
 };

示例 3：隐藏 AppStream 2.0 工具栏上的多个按钮

您可以显示 AppStream 2.0 工具栏，同时防止用户在嵌入式直播会话期间访问多个工具栏按钮。要执行此操作，请为要隐藏的按钮指定常量。以下代码使用 AppStream.Embed.Elements.END_SESSION_BUTTON 和 AppStream.Embed.Elements.FULLSCREEN_BUTTON 常量来隐藏 End Session (结束会话) 和 Fullscreen (全屏) 按钮。

注意

使用逗号分隔每个常量（前后无空格）。

var appstreamOptions = {
     sessionURL: 'https://appstream2.region.aws.amazon.com/authenticate?parameters=authenticationcode... (https://appstream2.region.aws.amazon.com/#/)',
     userInterfaceConfig:{[AppStream.Embed.Options.HIDDEN_ELEMENTS]:[AppStream.Embed.Elements.END_SESSION_BUTTON,AppStream.Embed.Elements.FULLSCREEN_BUTTON]}
 };