本指南將說明如何建立主畫面和側邊面板,設定及執行範例 Google Meet 外掛程式。您也可以在 GitHub 上找到本頁的「Hello World」範例,這些範例是使用 基本 JavaScript 或 Next.js TypeScript 建立的完整 Meet 外掛程式。
安裝及匯入 SDK
您可以使用 npm 或 gstatic 存取 SDK。
npm (建議)
如果您的專案使用 npm,請按照 Meet 外掛程式 SDK npm 套件的操作說明操作。
首先,安裝 npm 套件:
npm install @googleworkspace/meet-addons
接著,您可以匯入 MeetAddonExport
介面,即可使用 Meet 外掛程式 SDK:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
對於 TypeScript 使用者,TypeScript 定義會隨模組封裝。
gstatic
Google Meet 外掛程式 SDK 是
gstatic
的 JavaScript 套件,這是提供靜態內容的網域。
如要使用 Meet 外掛程式 SDK,請將下列指令碼標記新增至 應用程式:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
您可以透過 window.meet.addon
底下的 MeetAddon
介面取得 Meet 外掛程式 SDK。
建立側邊面板頁面
側邊面板會顯示 能選取及使用選取外掛程式後,iframe 會載入您在外掛程式資訊清單中指定的側邊面板網址。這應是應用程式的進入點,且至少應執行下列操作:
表示外掛程式載入已完成。Meet 顯示載入畫面時 正在載入外掛程式。當您透過呼叫
createAddonSession
() 方法建立外掛程式工作階段時,Meet 會將這項操作視為外掛程式傳送的信號,表示載入已完成,且使用者可以與第三方內容互動。你的加購內容 不應等到內容完成時再呼叫createAddonSession()
方法 載入中。建立側邊面板用戶端。如要存取側邊面板中的 Meet 外掛程式 SDK,您必須將
MeetSidePanelClient
介面例項化。這樣一來,您就能掌控主要 Meet 外掛程式 SDK 體驗。啟動活動。這樣一來,其他人就能加入 也可以視需要開啟
以下程式碼範例說明工作階段如何建立側邊面板用戶端,以及側邊面板用戶端如何在主要階段啟動活動:
基本 JS 和 Webpack
在名為 main.js
的新檔案中定義函式,以建立
外掛程式工作階段、側邊面板用戶端
使用者點選 ID 為 'start-activity'
的按鈕時的活動:
import { meet } from '@googleworkspace/meet-addons/meet.addons';
const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';
/**
* Prepares the Add-on Side Panel Client, and adds an event to launch the
* activity in the main stage when the main button is clicked.
*/
export async function setUpAddon() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
const sidePanelClient = await session.createSidePanelClient();
document
.getElementById('start-activity')
.addEventListener('click', async () => {
await sidePanelClient.startActivity({
mainStageUrl: MAIN_STAGE_URL
});
});
}
在名為 SidePanel.html
的新檔案中,定義用於啟動
活動,並在文件載入時從 main.js
呼叫函式:
<html>
<head>
<title>Meet Add-on Side Panel</title>
<script src="./main.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div>This is the Add-on Side Panel. Only you can see this.</div>
<button id="start-activity">Launch Activity in Main Stage.</button>
<script>
document.body.onload = () => {
// Library name (`helloWorld`) is defined in the webpack config.
// The function (`setUpAddon`) is defined in main.js.
helloWorld.setUpAddon();
};
</script>
</body>
</html>
您還必須將 Meet 外掛程式 SDK 與 main.js
捆綁,並在程式庫中公開這些項目。建議您安裝 webpack,並在 webpack.config.js
檔案中使用 library
選項:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
Next.js
新增 Page
以顯示側邊面板。本頁面會建立
外掛程式工作階段和側邊面板用戶端
在使用者點選按鈕時啟動活動:
'use client';
import { useEffect, useState } from 'react';
import {
meet,
MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();
// Launches the main stage when the main button is clicked.
async function startActivity(e: unknown) {
if (!sidePanelClient) {
throw new Error('Side Panel is not yet initialized!');
}
await sidePanelClient.startActivity({
mainStageUrl: 'MAIN_STAGE_URL'
});
}
/**
* Prepares the Add-on Side Panel Client.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
setSidePanelClient(await session.createSidePanelClient());
})();
}, []);
return (
<>
<div>
This is the Add-on Side Panel. Only you can see this.
</div>
<button onClick={startActivity}>
Launch Activity in Main Stage.
</button>
</>
);
}
更改下列內容:
CLOUD_PROJECT_NUMBER:Google Cloud 專案的專案編號。
MAIN_STAGE_URL:您在下一個步驟建立的主要階段網址。
建立主舞台頁面
主畫面是主要焦點區域,如果需要較大的作業空間,可以在這裡顯示外掛程式。活動開始後,主畫面會開啟。如要在主階段存取 Meet 外掛程式 SDK 功能,您必須使用 MeetMainStageClient
介面。
以下程式碼範例即為顯示
自訂 div
以表示「Hello, world!」:
基本 JS 和 Webpack
將下列函式新增至您先前建立的 main.js
檔案,因此
,主要階段可能表示影片已完成載入:
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on has
* successfully launched in the main stage.
*/
export async function initializeMainStage() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
await session.createMainStageClient();
}
接著新增 MainStage.html
檔案,以呼叫新的
initializeMainStage
函式並顯示自訂「hello, world」內容:
<html>
<body style="width: 100%; height: 100%; margin: 0">
<div>
This is the Add-on Main Stage. Everyone in the call can see this.
</div>
<div>Hello, world!</div>
<script>
document.body.onload = () => {
helloWorld.initializeMainStage();
};
</script>
</body>
</html>
Next.js
新增 Page
以顯示主畫面。這個頁面會在載入時建立外掛程式工作階段和側邊面板用戶端,並顯示自訂的「hello, world」內容:
'use client';
import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on
* has successfully launched in the main stage.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
await session.createMainStageClient();
})();
}, []);
return (
<>
<div>
This is the Add-on Main Stage.
Everyone in the call can see this.
</div>
<div>Hello, world!</div>
</>
);
}
將 CLOUD_PROJECT_NUMBER 替換為 Google Cloud 專案的專案編號。
執行範例
如要在本機執行,請按照下列步驟操作:
基本 JS 和 Webpack
執行 webpack 以將 main.js
檔案與
Meet 外掛程式 SDK:
npx webpack
在任何瀏覽器中開啟 SidePanel.html
檔案和 MainStage.html
檔案。這個指令應與 GitHub 上的基本 JS 範例部署相同
改為 SidePanel.html
和 MainStage.html
參閱相關文章
Next.js
接著執行:
next dev
前往 http://localhost:3000/sidepanel
或 http://localhost:3000/mainstage
。這些畫面應與 GitHub 上的 Next.js 範例部署至 GitHub Pages 上的 SidePanel.html 和 MainStage.html 相同。
部署 Meet 外掛程式
按照部署 Meet 外掛程式的操作說明,設定外掛程式的部署作業。
執行範例
前往 Meet。
按一下「活動」圖示 。
在「您的外掛程式」部分,您應該會看到外掛程式。選取該指令碼來執行 外掛程式。
新增其他功能
有了基本的側邊面板和主要階段後,您就可以開始新增其他 功能:
我們建議您使用 GitHub 上的 Meet 外掛程式範例 做為建構這些特徵的參考資源