Краткое руководство по дополнениям Meet

В этом руководстве описывается, как настроить и запустить пример дополнения для Google Meet, создав главную сцену и боковую панель. Примеры «Hello World» на этой странице также доступны на GitHub в виде полноценных дополнений для Meet, созданных либо на базовом JavaScript , либо на Next.js TypeScript .

Основная сцена и боковая панель надстройки Meet Web.

Установите и импортируйте SDK

Доступ к SDK можно получить с помощью npm или gstatic.

npm (рекомендуется)

Если ваш проект использует npm, вы можете следовать инструкциям для пакета npm SDK дополнений Meet .

Сначала установите пакет npm:

npm install @googleworkspace/meet-addons

Затем SDK дополнений Meet становится доступен путем импорта интерфейса MeetAddonExport :

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

Для пользователей TypeScript определения TypeScript поставляются вместе с модулем. Пользователям TypeScript следует установить moduleResolution в "bundler" в файле tsconfig.json проекта, чтобы спецификация «exports» в package.json позволяла импортировать пакет для демонстрации экрана export .

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 доступен через интерфейс MeetAddon в window.meet.addon .

Примечание: Если вы используете TypeScript, вы также можете скачать последние версии типов по адресу https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts . Просто сохраните файл локально.

Создайте страницу боковой панели

На боковой панели отображаются установленные дополнения, которые вы можете выбрать и использовать. После выбора дополнения iframe загружает URL-адрес боковой панели , указанный в манифесте дополнения . Это должна быть точка входа вашего приложения, которая должна выполнять как минимум следующие действия:

1. Указывает на завершение загрузки дополнения. Meet отображает загрузочный экран во время загрузки дополнения. Когда сеанс дополнения устанавливается вызовом метода createAddonSession () , Meet воспринимает это как сигнал от дополнения о завершении загрузки и о том, что пользователь может взаимодействовать со сторонним контентом. Ваше дополнение не должно вызывать метод createAddonSession() до завершения загрузки контента.

2. Создайте клиентскую часть боковой панели. Для доступа к SDK дополнений Meet на боковой панели необходимо создать экземпляр интерфейса MeetSidePanelClient . Это обеспечивает управление основным SDK дополнений Meet.

3. Запустите активность. Это позволит другим присоединиться к вашему дополнению и при необходимости откроет его на главной сцене.

В следующем примере кода показано, как сеанс создает клиент боковой панели и как клиент боковой панели запускает действие на основном этапе:

Базовый JS + Webpack

В новом файле с именем main.js определите функцию, которая создает сеанс надстройки, клиент боковой панели и запускает активность при нажатии кнопки с идентификатором 'start-activity' :

Примечание: предполагается, что вы установили SDK дополнений Meet с помощью npm .

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 и разместить их в библиотеке. Мы рекомендуем установить Webpack и использовать опцию library в файле webpack.config.js :

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

Примечание: В этом примере используется маршрутизация приложения Next.js для добавления страницы в приложение Next.js. Подробнее о создании первой страницы в Next.js см. в официальной документации 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-адрес основного этапа, который вы создадите на следующем шаге.

Создать главную страницу сцены

Основная сцена — это основная область, где можно отобразить дополнение, если требуется большее рабочее пространство. Основная сцена открывается после начала действия. Для доступа к функциям SDK дополнений Meet на основной сцене необходимо использовать интерфейс MeetMainStageClient .

Важно: Обратите внимание, что ваше дополнение должно снова вызвать метод createAddonSession() после завершения загрузки контента. В противном случае дополнение не запустится на основном этапе.

В следующем примере кода показан пример главной страницы, на которой отображается пользовательский div с надписью «Привет, мир!»:

Базовый 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 с SDK дополнений Meet:

npx webpack

Откройте файлы SidePanel.html и MainStage.html в любом браузере. Это должно выглядеть так же, как и развёртывание примера Basic JS на GitHub в файлы SidePanel.html и MainStage.html на GitHub Pages.

Next.js

Выполнить далее:

next dev

Перейдите по адресу http://localhost:3000/sidepanel или http://localhost:3000/mainstage . Они должны выглядеть так же, как при развёртывании примера Next.js на GitHub в SidePanel.html и MainStage.html на GitHub Pages.

Примечание: В консоли Chrome DevTools при локальном запуске возникает ошибка « Missing required Meet SDK URL parameter: meet_sdk . Это ожидаемо, пока приложение не будет запущено в Meet, поскольку Meet обрабатывает передачу этого параметра URL. Подробнее об инструментах разработчика см. в статье «Управление инструментами разработчика для дополнений Meet» .

Разверните дополнение Meet

Развертывание надстройки — это двухэтапный процесс:

1. Сначала необходимо развернуть код из этого краткого руководства на принадлежащем вам веб-сайте, используя любое удобное для вас решение. Официальные примеры дополнений Google Meet на GitHub разворачиваются с помощью рабочего процесса GitHub на GitHub Pages, но вы также можете использовать такие инструменты, как Firebase Hosting .

2. После развертывания приложения необходимо настроить развертывание дополнения, следуя инструкциям по развертыванию дополнения Meet . Следуя этим инструкциям, вы создадите финальное дополнение Meet, представляющее собой iframe в Meet приложения, развернутого на первом этапе.

Запустите образец

1. Перейти к встрече .

2. Нажмите кнопку «Инструменты встречи» .

3. В разделе «Ваши дополнения» вы увидите своё дополнение. Выберите его, чтобы запустить.

Добавить больше функций

Теперь, когда у вас есть базовая боковая панель и главная сцена, вы можете начать добавлять другие функции в свое дополнение:

• Совместная работа с использованием дополнения Meet
• Сообщения между главной сценой и боковой панелью
• Продвижение дополнения

Вам предлагается использовать примеры дополнений Meet на GitHub в качестве справочных материалов для разработки этих функций.