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

Meet 外掛程式快速入門導覽課程

本指南將說明如何建立主畫面和側邊面板，設定及執行範例 Google Meet 外掛程式。您也可以在 GitHub 上找到本頁的「Hello World」範例，這些範例是使用基本 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 定義會與模組一併封裝。

gstatic

Google Meet 外掛程式 SDK 可透過 gstatic 提供的 JavaScript 套件取得，gstatic 是提供靜態內容的網域。

如要使用 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 相同。

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 外掛程式範例，以便建構這些功能。