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

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

以下部分提供有关如何配置网页以便托管嵌入式 AppStream 2.0 流式传输会话的信息。

导入 appstream-embed 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 接口对象

要在 JavaScript 中初始化 AppStream.Embed 接口对象，您必须添加创建 AppStream.Embed 对象的代码，该代码提供用于流式传输 URL 和用户界面配置的选项。这些选项以及您创建的 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 控制台、CreateStreamingURL API 操作或 create-streaming-url AWS CLI 命令创建的流式传输 URL。此参数区分大小写。

类型：字符串

必需：是

userInterfaceConfig

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

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

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

类型：映射（键：值）

必需：否

隐藏 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]}
 };