本指南說明如何建立主畫面和側邊面板，設定及執行 Google Meet 附加元件範例。本頁的「Hello World」範例也已發布至 GitHub，做為以基本 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 定義會與模組一起封裝。
TypeScript 使用者應在專案的 tsconfig.json 中將 moduleResolution 設為 "bundler"，以便 tsconfig.json package.json「exports」規格可匯入螢幕分享套件匯出內容。
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 上將 Basic JS 範例部署至 GitHub Pages 的 SidePanel.html 和 MainStage.html 相同。SidePanel.htmlMainStage.html
Next.js
執行下一個：
next dev
前往 http://localhost:3000/sidepanel 或 http://localhost:3000/mainstage。這些內容應與在 GitHub 上部署 Next.js 範例至 GitHub Pages 的 SidePanel.html 和 MainStage.html 相同。
部署 Meet 外掛程式
部署外掛程式的程序分為兩個步驟：
首先，您必須使用偏好的部署解決方案，將本快速入門導覽課程中的程式碼部署至您擁有的網站。GitHub 上的官方 Google Meet 外掛程式範例是透過 GitHub 工作流程部署至 GitHub Pages，但您也可以使用 Firebase 託管 等工具。
部署應用程式後，請按照「部署 Meet 增益集」一文中的操作說明，設定增益集的部署作業。按照該部署指南操作，即可建立最終的 Meet 外掛程式，該外掛程式是您在步驟 1 中部署的應用程式，位於 Meet 的 iframe 中。
執行範例
前往 Meet。
按一下會議工具按鈕
。「你的外掛程式」部分應會顯示你的外掛程式。選取該外掛程式即可執行。
新增其他功能
現在您已具備基本側邊面板和主要視訊畫面，可以開始為外掛程式新增其他功能：
建議您使用 GitHub 上的 Meet 外掛程式範例，做為建構這些功能的參考。