透過分享螢幕畫面向使用者宣傳外掛程式

透過螢幕分享功能宣傳外掛程式。

本頁說明如何在使用 Google Meet 分享分頁畫面時，在其他網頁上放置少量程式碼，向使用者宣傳外掛程式。

exposeToMeetWhenScreensharing() 方法可讓網站在其分頁進行螢幕分享時，將資訊傳送至 Meet。如果使用者已安裝外掛程式，當他們在簡報橫幅上點選「開始活動」時，系統就會在 Meet 外掛程式體驗中使用這項資訊。如果使用者在分享螢幕畫面時未安裝外掛程式，系統會提示使用者安裝外掛程式。

AddonScreenshareInfo 物件包含五項屬性，可根據用途新增：

  • additionalData：外掛程式可用來進行本身初始化的資訊。只有在 startActivityOnOpen 屬性為 true 且可使用 ActivityStartingState 存取時，才能設定此屬性。詳情請參閱「取得活動啟動狀態」。

  • cloudProjectNumber：必要。Google Cloud 專案的專案編號。

  • mainStageUrl：外掛程式啟動後，主階段開啟的網址 (例如 https://www.example.com)。網址必須與外掛程式資訊清單中指定的網址屬於相同的來源。

  • sidePanelUrl：外掛程式啟動後，側邊面板開啟的網址 (例如 https://www.example.com)。網址必須與外掛程式資訊清單中指定的網址屬於相同的來源。

  • startActivityOnOpen：必填。當使用者從簡報橫幅啟動外掛程式時，是否立即在 Meet 中啟動活動外掛程式體驗。如果使用 mainStageUrl 屬性，則要求為 true。

安裝及匯入 SDK

您可以使用 npm 或 gstatic 存取 SDK。

如果您的專案使用 npm，請按照 Meet 外掛程式 SDK npm 套件的操作說明操作。

首先，安裝 npm 套件：

npm install @googleworkspace/meet-addons

接著，只要匯入 MeetAddonScreenshareExport 介面，即可使用 Meet 外掛程式 SDK：

import {meet} from '@googleworkspace/meet-addons/meet.addons.screenshare';

對於 TypeScript 使用者，TypeScript 定義會與模組一併封裝。

gstatic

Google Meet 外掛程式 SDK 可透過 gstatic 提供的 JavaScript 套件取得，gstatic 是提供靜態內容的網域。

如要使用 Meet 外掛程式 SDK，請在應用程式中加入下列指令碼標記：

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.screenshare.js"></script>

您可以透過 window.meet.addon 下方的 MeetAddon 介面存取 Meet 外掛程式 SDK。

範例：不啟動活動就載入側邊面板

在以下程式碼範例中，使用者會在畫面上透過外掛程式分享網頁，該外掛程式必須在活動開始前調整資源權限。基於這項規定，外掛程式應在側邊面板中啟動，而非為所有使用者啟動活動。

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

更改下列內容：

  • CLOUD_PROJECT_NUMBER：字串。Cloud 專案的專案編號。
  • SIDE_PANEL_URL：字串。側邊面板的網址。

當 Meet 通話畫面中的使用者分享網頁時，他們會在 Meet 中看到簡報橫幅。按一下橫幅上的按鈕，即可在側邊面板中開啟指定雲端專案編號的加購項目。由於 startActivityOnOpen 屬性設為 false，啟動活動按鈕會處於停用狀態，直到 ActivityStartingState 設定為止。詳情請參閱「使用活動啟動狀態」。

活動啟動後，系統會提示通話中的其他使用者啟動或安裝外掛程式。

GitHub 上的 「Animation」範例外掛程式包含這個範例，是完整外掛程式的一部分。當與外掛程式相關聯的網頁應用程式顯示索引頁面時，系統會提示呈現者安裝或設定外掛程式。

範例：在主畫面中載入

在下列程式碼範例中，如果使用者在 Meet 中分享含有下列程式碼的網頁畫面，系統就會提示使用者啟動外掛程式：

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    mainStageUrl: MAIN_STAGE_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

更改下列內容：

  • CLOUD_PROJECT_NUMBER：字串。Google Cloud 專案的專案編號。
  • MAIN_STAGE_URL：字串。主畫面的網址。

當 Meet 通話畫面中的使用者分享網頁時，他們會在 Meet 中看到簡報橫幅。點選橫幅上的按鈕，即可在主畫面中開啟指定雲端專案編號的加購項目。系統會載入 mainStageUrl 屬性，並使用 additionalData 屬性設定外掛程式的活動啟動狀態。系統會立即提示通話中的其他使用者安裝或啟動外掛程式。

範例：在側邊面板中載入

在以下程式碼範例中，使用者畫面會與附加元件共用頁面，而附加元件希望從側邊面板啟動，而非主畫面：

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    sidePanelUrl: SIDE_PANEL_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

更改下列內容：

  • CLOUD_PROJECT_NUMBER：字串。Cloud 專案的專案編號。
  • SIDE_PANEL_URL：字串。側邊面板的網址。

當 Meet 通話畫面中的使用者分享網頁時，他們會在 Meet 中看到簡報橫幅。按一下橫幅上的按鈕，即可在側邊面板中開啟指定雲端專案編號的加購項目。系統會載入 sidePanelUrl 屬性，並使用 additionalData 屬性設定外掛程式的活動啟動狀態。通話中的其他使用者會立即收到安裝或啟動外掛程式的提示。

起源比對

系統會將 mainStageUrl 屬性和 sidePanelUrl 屬性中提供的來源與 Cloud 專案編號外掛程式資訊清單中的來源進行比對。如果一切相符，使用者即可啟動外掛程式。

此外，啟動螢幕分享的網站來源必須列在外掛程式資訊清單的 addOnOrigins 欄位中。

詳情請參閱「外掛程式安全性」。