本指南說明如何建立主畫面和側邊面板,設定及執行 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"
,以便 package.json「exports」規格啟用 screen sharing package export 的匯入作業。
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 Hosting 等工具。
部署應用程式後,請按照「部署 Meet 擴充功能」一文中的操作說明,設定擴充功能的部署作業。按照該部署指南操作,即可建立最終的 Meet 外掛程式,也就是您在步驟一中部署的應用程式,在 Meet 中的 iframe。
執行範例
前往 Meet。
按一下會議工具按鈕
。
「你的外掛程式」部分應會顯示你的外掛程式。選取該外掛程式即可執行。
新增其他功能
現在您已具備基本側邊面板和主要視訊畫面,可以開始為外掛程式新增其他功能:
建議您使用 GitHub 上的 Meet 外掛程式範例,做為建構這些功能的參考。