本指南介绍了如何通过创建主屏幕和侧边栏来设置和运行示例 Google Meet 插件。本页面上的 “Hello World”示例也可在 GitHub 上找到，它们是使用 基本 JavaScript 或 Next.js TypeScript构建的完整 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 以 JavaScript 软件包的形式提供，该软件包来自 gstatic，这是一个提供静态内容的网域。
如需使用 Meet 插件 SDK，请将以下脚本标记添加到您的应用：
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
Meet 插件 SDK 可通过 MeetAddon 接口使用，位于 window.meet.addon 下。
创建侧边栏页面
侧边栏会显示已安装的插件，您可以选择并使用这些插件。选择插件后， 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
并使用 library 选项
在您的 webpack.config.js 文件中完成此操作：
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 插件，该插件是您在第一步中部署的应用在 Meet 中的 iframe。
运行示例
前往 Meet。
点击会议工具按钮
。在您的插件 部分，您应该会看到您的插件。选择该插件以运行它。
添加更多功能
现在您已拥有基本的侧边栏和主屏幕，可以开始向插件添加其他功能：
我们建议您使用 GitHub 上的示例 Meet 插件 作为构建这些功能的参考。