此页面由 Cloud Translation API 翻译。

Meet 插件快速入门

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

Meet Add-ons SDK 主舞台和侧边栏。 — Meet Web 加载项的主舞台和侧边栏。

安装并导入 SDK

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

npm（推荐）

如果您的项目使用 npm，可以按照 Meet 加载项 SDK npm 软件包中的说明操作。

首先，安装 npm 软件包：

npm install @googleworkspace/meet-addons

然后，通过导入 MeetAddonExport 接口即可使用 Meet Add-ons SDK：

import {meet} from '@googleworkspace/meet-addons/meet.addons';

对于 TypeScript 用户，TypeScript 定义与模块打包在一起。 TypeScript 用户应在项目的 tsconfig.json 中将 moduleResolution 设置为 "bundler"，以便 package.json“exports”规范能够导入屏幕共享软件包导出。

gstatic

Google Meet Add-ons SDK 以 JavaScript 软件包的形式提供，可从 gstatic（一个提供静态内容的网域）获取。

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

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

Meet Add-ons SDK 可通过 window.meet.addon 下的 MeetAddon 接口获取。

创建侧边栏页面

侧边栏会显示已安装的插件，您可以选择并使用这些插件。选择插件后，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 插件

部署插件需要执行两个步骤：

首先，您必须使用自己喜欢的任何部署解决方案，将本快速入门中的代码部署到您拥有的网站。GitHub 上的官方 Google Meet 加载项示例使用 GitHub 工作流部署到 GitHub Pages，但您也可以使用 Firebase Hosting 等工具。
部署应用后，您必须按照部署 Meet 插件中的说明设置插件的部署。按照该部署指南操作会创建最终的 Meet 加载项，该加载项是您在第 1 步中部署的应用在 Meet 中的 iframe。

运行示例

前往 Meet。
点击会议工具按钮。
在您的插件部分，您应该会看到自己的插件。选择该插件即可运行它。

添加更多功能

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

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

Meet 插件快速入门 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

安装并导入 SDK

npm（推荐）

gstatic

创建侧边栏页面

基本 JS + Webpack

Next.js

创建主舞台页面

基本 JS + Webpack

Next.js

运行示例

基本 JS + Webpack

Next.js

部署 Meet 插件

运行示例

添加更多功能

Meet 插件快速入门