Эта страница переведена с помощью Cloud Translation API.

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

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

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

Установите и импортируйте 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 на GitHub в качестве справочных материалов для создания этих функций.