本頁說明如何在使用 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 (建議)
如果專案使用 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 套件取得,這是提供靜態內容的網域。
如要使用 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
屬性中提供的來源,會與提供的雲端專案編號附加元件資訊清單中的來源進行比較。如果所有項目都相符,使用者就會獲得啟動外掛程式的權限。
此外,啟動螢幕分享的網站來源必須列在外掛程式資訊清單的 addOnOrigins
欄位中。
詳情請參閱「外掛程式安全性」。