步驟 4. 設定您的網站以與 Amazon AppStream 2.0 整合 - Amazon 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

URL 您使用 AppStream 2.0 主控台、 CreateStreamingURLAPI動作或 create-streaming-url AWS CLI命令建立的串流。此參數有大小寫之分。

類型：字串

必要：是

userInterfaceConfig

產生使用者界面元素初始狀態的組態。組態為金鑰值配對。

金鑰 指定初始化內嵌 AppStream 2AppStream.Embed.Options.HIDDEN_ELEMENTS.0 串流工作階段時最初隱藏的使用者介面物件。之後您可以使用 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]}
 };