本頁面由 Cloud Translation API 翻譯而成。

Meet 外掛程式快速入門

本指南說明如何建立主畫面和側邊面板，設定及執行 Google Meet 外掛程式範例。本頁的「Hello World」範例也已發布至 GitHub，做為以基本 JavaScript 或 Next.js TypeScript 建構的完整 Meet 外掛程式。

Meet 外掛程式 SDK 的主要視訊畫面和側邊面板。 — 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」規格啟用匯入螢幕分享套件匯出。

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.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 外掛程式

部署外掛程式的程序分為兩個步驟：

首先，您必須使用偏好的部署解決方案，將本快速入門導覽課程中的程式碼部署至您擁有的網站。GitHub 上的官方 Google Meet 外掛程式範例是透過 GitHub 工作流程部署至 GitHub Pages，但您也可以使用 Firebase Hosting 等工具。
部署應用程式後，請按照「部署 Meet 增益集」一文中的操作說明，設定增益集的部署作業。按照該部署指南操作，即可建立最終的 Meet 外掛程式，也就是您在步驟一中部署的應用程式在 Meet 中的 iframe。

執行範例

前往 Meet。
按一下會議工具按鈕。
「你的外掛程式」部分應會顯示你的外掛程式。選取即可執行外掛程式。

新增其他功能

現在您已具備基本側邊面板和主要視訊畫面，可以開始為外掛程式新增其他功能：

建議您使用 GitHub 上的 Meet 外掛程式範例，做為建構這些功能的參考。

Meet 外掛程式快速入門 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

安裝及匯入 SDK

npm (建議)

gstatic

建立側邊面板頁面

基本 JS + Webpack

Next.js

建立主舞台頁面

基本 JS + Webpack

Next.js

執行範例

基本 JS + Webpack

Next.js

部署 Meet 外掛程式

執行範例

新增其他功能

Meet 外掛程式快速入門