Meet 插件快速入门

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

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

安装并导入 SDK

您可以使用 npm 或 gstatic 访问该 SDK。

如果您的项目使用 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 软件包。

如需使用 Meet Add-ons SDK，请将以下脚本标记添加到您的应用中：

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>

Meet 插件 SDK 可通过 window.meet.addon 下的 MeetAddon 接口获取。

创建侧边栏页面

侧边栏会显示您可以选择和使用的已安装插件。选择插件后 iframe 会加载您在 插件清单。 它应是应用的入口点，并且至少应执行以下操作：

  1. 表示插件加载已完成。 在加载插件时，Meet 会显示一个加载屏幕。当 插件会话 通过调用 createAddonSession() 确定 Meet 会将此视为来自 加载完成，并且用户 可以与第三方内容互动在内容加载完成之前，您的插件不应调用 createAddonSession() 方法。

  2. 创建侧边栏客户端。如需在侧边栏中访问 Meet 插件 SDK，您必须实例化 MeetSidePanelClient 接口。这样即可控制 Meet 插件主 SDK 体验。

  3. 启动 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 界面。

以下代码示例展示了一个主 Stage 页面，该页面呈现 自定义 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 示例的部署一样。 添加到 SidePanel.html 和 MainStage.html 。

Next.js

运行 Next：

next dev

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

部署 Meet 插件

按照 有关如何部署 Meet 插件的说明。

运行示例

  1. 前往 Meet。

  2. 点击活动 activity 的图标。。

  3. 在您的插件部分，您应该会看到您的插件。选择该图标即可运行该插件。

添加更多功能

现在您已经有了基本的侧边栏和主 Stage， 添加的功能：

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