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

Meet 外掛程式快速入門

本指南將說明如何建立主畫面和側邊面板，設定及執行範例 Google Meet 外掛程式。本頁的「Hello World」範例也提供 GitHub 完整 Meet 外掛程式，這些外掛程式是使用基本 JavaScript 或 Next.js TypeScript 建構而成。

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 相同。

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 外掛程式，該外掛程式是您在第一步中部署的應用程式在 Meet 中的 iframe。

執行範例

前往 Meet。
按一下「活動」圖示。
在「您的外掛程式」部分，您應該會看到外掛程式。選取該選項即可執行外掛程式。

新增其他功能

有了基本的側邊面板和主要視訊畫面後，您可以開始在外掛程式中新增其他功能：

建議您參考 GitHub 上的 Meet 範例外掛程式，以便建構這些功能。