此页面由 Cloud Translation API 翻译。

Meet 插件快速入门

本指南介绍了如何通过创建主舞台和侧边栏来设置和运行示例 Google Meet 插件。本页中的“Hello World”示例也可在 GitHub 上找到，它们是使用基本 JavaScript 或 Next.js TypeScript 构建的完整 Meet 插件。

Meet 插件 SDK 的主界面和侧边栏。 — Meet Web 插件的主舞台和侧边面板。

安装并导入 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 以 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 体验。
启动 activity。这样，其他人就可以加入您的插件，并可选择在主舞台中打开您的插件。

以下代码示例展示了会话如何创建侧边栏客户端，以及侧边栏客户端如何在主舞台中启动 activity：

基本 JS + Webpack

在名为 main.js 的新文件中，定义一个函数，用于创建插件会话、侧边栏客户端，并在点击 ID 为 'start-activity' 的按钮时启动 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 的新文件中，定义用于启动 activity 的按钮，并在文档加载时从 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 来显示侧边栏。此页面会在加载时创建插件会话和侧边栏客户端，并在用户点击按钮时启动 activity：

'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：您在下一步中创建的主要阶段网址。

创建主舞台页面

主舞台是主要焦点区域，如果需要更大的操作空间，您可以在其中显示插件。主舞台会在 activity 启动后打开。如需在主舞台中访问 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 上的基本 JS 示例部署到 GitHub Pages 上的 SidePanel.html 和 MainStage.html 相同。

Next.js

运行 Next：

next dev

前往 http://localhost:3000/sidepanel 或 http://localhost:3000/mainstage。这些代码应与将 GitHub 上的 Next.js 示例部署到 GitHub Pages 上的 SidePanel.html 和 MainStage.html 的代码相同。

部署 Meet 插件

按照部署 Meet 插件中的说明设置插件部署。

运行示例

前往 Meet。
点击活动。
在您的插件部分，您应该会看到您的插件。选择该图标即可运行该插件。

添加更多功能

现在，您已经有了基本的侧边栏和主屏幕，接下来可以开始向您的插件添加其他功能了：

我们建议您使用 GitHub 上的 Meet 插件示例作为构建这些功能的参考。