В этом руководстве описывается, как настроить и запустить пример дополнения Google Meet, создав основную сцену и боковую панель. Примеры «Hello World» на этой странице также доступны на GitHub в виде полных надстроек Meet, созданных с использованием базового JavaScript или Next.js TypeScript .
Установите и импортируйте SDK
Вы можете получить доступ к SDK с помощью npm или gstatic.
НПМ (рекомендуется)
Если в вашем проекте используется npm, вы можете следовать инструкциям для пакета npm Meet Add-ons SDK .
Сначала установите пакет npm:
npm install @googleworkspace/meet-addons
После этого пакет Meet Add-ons SDK можно будет получить, импортировав интерфейс MeetAddonExport :
import {meet} from '@googleworkspace/meet-addons/meet.addons';
Для пользователей TypeScript определения TypeScript поставляются вместе с модулем.
gstatic
SDK надстроек Google Meet доступен в виде пакета JavaScript из gstatic — домена, который предоставляет статический контент.
Чтобы использовать SDK дополнений Meet, добавьте в свое приложение следующий тег сценария:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
SDK Meet Add-ons доступен через интерфейс MeetAddon по адресу window.meet.addon .
Создать страницу боковой панели
На боковой панели отображаются установленные дополнения, которые вы можете выбрать и использовать. После того как вы выберете надстройку, iframe загрузит URL-адрес боковой панели, указанный вами в манифесте надстройки . Это должно быть точкой входа вашего приложения и должно выполнять как минимум следующие действия:
Укажите, что загрузка дополнения завершена. Во время загрузки дополнения Meet отображает экран загрузки. Когда сеанс надстройки устанавливается путем вызова метода
createAddonSession() , Meet воспринимает это как сигнал надстройки о том, что загрузка завершилась и пользователь может взаимодействовать со сторонним контентом. Ваша надстройка не должна вызывать методcreateAddonSession()до тех пор, пока ваш контент не загрузится.Создайте клиент боковой панели. Чтобы получить доступ к SDK надстроек Meet на боковой панели, необходимо создать экземпляр интерфейса
MeetSidePanelClient. Это обеспечивает контроль над вашим основным интерфейсом SDK дополнений Meet.Начните деятельность. Это позволит другим присоединиться к вашему дополнению и при необходимости откроет ваше дополнение на основном этапе.
В следующем примере кода показано, как сеанс создает клиент боковой панели и как клиент боковой панели запускает действие на основном этапе:
Базовый JS + веб-пакет
В новом файле с именем main.js определите функцию, которая создает дополнительный сеанс, клиент боковой панели, и запускает действие при нажатии кнопки с идентификатором '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>
Вам также потребуется связать SDK надстроек Meet с вашим main.js и разместить его в библиотеке. Мы рекомендуем сделать это, установив веб-пакет и используя опцию library в файле webpack.config.js :
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 : URL-адрес основной сцены, который вы создадите на следующем шаге.
Создайте главную страницу сцены
Основная сцена — это основная зона внимания, где вы можете отобразить надстройку, если требуется большее рабочее пространство. Основная сцена открывается сразу после начала мероприятия. Чтобы получить доступ к функциям Meet Add-ons SDK на основной стадии, необходимо использовать интерфейс MeetMainStageClient .
В следующем примере кода показан пример главной страницы сцены, на которой отображается пользовательский div с надписью «Hello, world!»:
Базовый JS + веб-пакет
Добавьте следующую функцию в уже созданный файл 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 и отображает пользовательское содержимое «привет, мир»:
<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 для отображения основной сцены. Эта страница создает дополнительный сеанс и клиент боковой панели при загрузке и отображает пользовательский контент «привет, мир»:
'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 + веб-пакет
Запустите веб-пакет, чтобы объединить файл main.js с SDK дополнений Meet:
npx webpack
Откройте файл SidePanel.html и файл MainStage.html в любом браузере. Это должно выглядеть так же, как развертывание примера Basic JS на GitHub в SidePanel.html и MainStage.html на страницах GitHub.
Next.js
Запустить дальше:
next dev
Перейдите по адресу http://localhost:3000/sidepanel или http://localhost:3000/mainstage . Они должны выглядеть так же, как развертывание примера Next.js на GitHub в SidePanel.html и MainStage.html на страницах GitHub.
Развертывание дополнения Meet
Настройте развертывание надстройки, следуя инструкциям по развертыванию надстройки Meet .
Запустите образец
Зайдите в раздел «Встречи» .
Нажмите Действия
.В разделе Ваши дополнения вы должны увидеть свое дополнение. Выберите его, чтобы запустить дополнение.
Добавить больше функций
Теперь, когда у вас есть базовая боковая панель и основная сцена, вы можете приступить к добавлению других функций в свое дополнение:
- Совместная работа с использованием дополнения Meet
- Сообщения между основной сценой и боковой панелью
- Продвижение дополнения через демонстрацию экрана
Вам рекомендуется использовать примеры надстроек Meet на GitHub в качестве справочных материалов для создания этих функций.
,В этом руководстве описывается, как настроить и запустить пример дополнения Google Meet, создав основную сцену и боковую панель. Примеры «Hello World» на этой странице также доступны на GitHub в виде полных надстроек Meet, созданных с использованием базового JavaScript или Next.js TypeScript .
Установите и импортируйте SDK
Вы можете получить доступ к SDK с помощью npm или gstatic.
НПМ (рекомендуется)
Если в вашем проекте используется npm, вы можете следовать инструкциям для пакета npm Meet Add-ons SDK .
Сначала установите пакет npm:
npm install @googleworkspace/meet-addons
После этого пакет Meet Add-ons SDK можно будет получить, импортировав интерфейс MeetAddonExport :
import {meet} from '@googleworkspace/meet-addons/meet.addons';
Для пользователей TypeScript определения TypeScript поставляются вместе с модулем.
gstatic
SDK надстроек Google Meet доступен в виде пакета JavaScript из gstatic , домена, который предоставляет статический контент.
Чтобы использовать SDK дополнений Meet, добавьте в свое приложение следующий тег сценария:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
SDK Meet Add-ons доступен через интерфейс MeetAddon по адресу window.meet.addon .
Создать страницу боковой панели
На боковой панели отображаются установленные дополнения, которые вы можете выбрать и использовать. После того как вы выберете надстройку, iframe загрузит URL-адрес боковой панели, указанный вами в манифесте надстройки . Это должно быть точкой входа вашего приложения и должно выполнять как минимум следующие действия:
Укажите, что загрузка дополнения завершена. Во время загрузки дополнения Meet отображает экран загрузки. Когда сеанс надстройки устанавливается путем вызова метода
createAddonSession() , Meet воспринимает это как сигнал надстройки о том, что загрузка завершилась и пользователь может взаимодействовать со сторонним контентом. Ваша надстройка не должна вызывать методcreateAddonSession()до тех пор, пока ваш контент не загрузится.Создайте клиент боковой панели. Чтобы получить доступ к SDK надстроек Meet на боковой панели, необходимо создать экземпляр интерфейса
MeetSidePanelClient. Это обеспечивает контроль над основным интерфейсом SDK дополнений Meet.Начните деятельность. Это позволит другим присоединиться к вашему дополнению и при необходимости откроет ваше дополнение на основном этапе.
В следующем примере кода показано, как сеанс создает клиент боковой панели и как клиент боковой панели запускает действие на основном этапе:
Базовый JS + веб-пакет
В новом файле с именем main.js определите функцию, которая создает дополнительный сеанс, клиент боковой панели, и запускает действие при нажатии кнопки с идентификатором '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>
Вам также потребуется связать SDK надстроек Meet с вашим main.js и разместить его в библиотеке. Мы рекомендуем сделать это, установив веб-пакет и используя опцию library в файле webpack.config.js :
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 : URL-адрес основной сцены, который вы создадите на следующем шаге.
Создайте главную страницу сцены
Основная сцена — это основная зона внимания, где вы можете отобразить надстройку, если требуется большее рабочее пространство. Основная сцена открывается сразу после начала мероприятия. Чтобы получить доступ к функциям Meet Add-ons SDK на основной стадии, необходимо использовать интерфейс MeetMainStageClient .
В следующем примере кода показан пример главной страницы сцены, на которой отображается пользовательский div с надписью «Hello, world!»:
Базовый JS + веб-пакет
Добавьте следующую функцию в уже созданный файл 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 и отображает пользовательское содержимое «привет, мир»:
<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 для отображения основной сцены. Эта страница создает дополнительный сеанс и клиент боковой панели при загрузке и отображает пользовательский контент «привет, мир»:
'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 + веб-пакет
Запустите веб-пакет, чтобы объединить файл main.js с SDK дополнений Meet:
npx webpack
Откройте файл SidePanel.html и файл MainStage.html в любом браузере. Это должно выглядеть так же, как развертывание примера Basic JS на GitHub в SidePanel.html и MainStage.html на страницах GitHub.
Next.js
Запустить дальше:
next dev
Перейдите по адресу http://localhost:3000/sidepanel или http://localhost:3000/mainstage . Они должны выглядеть так же, как развертывание примера Next.js на GitHub в SidePanel.html и MainStage.html на страницах GitHub.
Развертывание дополнения Meet
Настройте развертывание надстройки, следуя инструкциям по развертыванию надстройки Meet .
Запустите образец
Зайдите в раздел «Встречи» .
Нажмите Действия
.В разделе Ваши дополнения вы должны увидеть свое дополнение. Выберите его, чтобы запустить дополнение.
Добавить больше функций
Теперь, когда у вас есть базовая боковая панель и основная сцена, вы можете приступить к добавлению других функций в свое дополнение:
- Совместная работа с использованием дополнения Meet
- Сообщения между основной сценой и боковой панелью
- Продвижение дополнения через демонстрацию экрана
Вам рекомендуется использовать примеры надстроек Meet на GitHub в качестве справочных материалов для создания этих функций.