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

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

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

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

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

Доступ к SDK можно получить через npm или gstatic.

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

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

Сначала установите пакет 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 позволяла импортировать экспорт пакета совместного использования экрана .

гстатический

SDK для дополнений Google Meet доступен в виде JavaScript-пакета на gstatic , домене, предоставляющем статический контент.

Чтобы использовать SDK дополнений Meet, добавьте следующий тег <script> в ваше приложение:

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

SDK для дополнений Meet доступен через интерфейс MeetAddon по адресу window.meet.addon .

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

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

Укажите, что загрузка дополнения завершена. Meet отображает экран загрузки во время загрузки дополнения. Когда сессия дополнения устанавливается путем вызова метода createAddonSession () , Meet рассматривает это как сигнал от дополнения о завершении загрузки и о том, что пользователь может взаимодействовать с контентом стороннего разработчика. Ваше дополнение не должно вызывать метод createAddonSession() до тех пор, пока контент не будет полностью загружен.
Создайте клиент для боковой панели. Для доступа к SDK дополнений Meet в боковой панели необходимо создать экземпляр интерфейса MeetSidePanelClient . Это обеспечит управление основным интерфейсом SDK дополнений Meet.
Запустите активность. Это позволит другим пользователям присоединиться к вашему дополнению и, при желании, откроет ваше дополнение на главной сцене.

Приведённый ниже пример кода показывает, как сессия создаёт клиентскую боковую панель и как эта боковая панель запускает активность на главном экране:

Базовый JavaScript + Webpack

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

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

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

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

Базовый JavaScript + 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.

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

Для запуска локально выполните следующие действия:

Базовый JavaScript + Webpack

Запустите webpack, чтобы объединить ваш файл main.js с SDK дополнений Meet:

npx webpack

Откройте файлы SidePanel.html и MainStage.html в любом браузере. Результат должен выглядеть так же, как при развертывании базового примера JavaScript на 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.

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

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

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

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

Перейти к встрече .
Нажмите кнопку «Инструменты совещания». .
В разделе «Ваши дополнения» вы должны увидеть свое дополнение. Выберите его, чтобы запустить дополнение.

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

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

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

Краткое руководство по дополнениям Meet Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

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

гстатический

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

Базовый JavaScript + Webpack

Next.js

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

Базовый JavaScript + Webpack

Next.js

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

Базовый JavaScript + Webpack

Next.js

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

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

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

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