Krótki przewodnik po dodatkach do Meet

Z tego przewodnika dowiesz się, jak skonfigurować i uruchomić przykładowy dodatek Google Meet, tworząc główną część ekranu i panel boczny. Przykłady „Hello World” na tej stronie są też dostępne na GitHubie jako kompletne dodatki Meet utworzone w podstawowym JavaScript lub Next.js TypeScript.

Główna część ekranu i panel boczny pakietu SDK dodatków do Meet.
Główna część ekranu i panel boczny dodatku Meet Web Add-on.

Instalowanie i importowanie pakietu SDK

Dostęp do pakietu SDK możesz uzyskać za pomocą npm lub gstatic.

Jeśli Twój projekt korzysta z npm, możesz postępować zgodnie z instrukcjami dotyczącymi pakietu npm Meet add-ons SDK.

Najpierw zainstaluj pakiet npm:

npm install @googleworkspace/meet-addons

Następnie pakiet Meet add-ons SDK będzie dostępny po zaimportowaniu interfejsu MeetAddonExport:

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

W przypadku użytkowników TypeScript definicje TypeScript są spakowane z modułem. Użytkownicy TypeScript powinni ustawić moduleResolution na "bundler" w pliku tsconfig.json projektu, aby specyfikacja „exports” w pliku package.json "exports" spec umożliwiała importowanie eksportu pakietu udostępniania ekranu.

gstatic

Pakiet Google Meet add-ons SDK jest dostępny jako pakiet JavaScript z gstatic, domeny, która udostępnia treści statyczne.

Aby korzystać z pakietu Meet add-ons SDK, dodaj do aplikacji ten tag skryptu:

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

Pakiet Meet add-ons SDK jest dostępny za pomocą interfejsu MeetAddon w window.meet.addon.

Tworzenie strony panelu bocznego

W panelu bocznym wyświetlają się zainstalowane dodatki, które możesz wybrać i używać. Gdy wybierzesz dodatek, element iframe wczyta adres URL panelu bocznego określony wmanifeście dodatku. Powinien to być punkt wejścia do aplikacji, który powinien co najmniej:

  1. wskazywać, że wczytywanie dodatku zostało zakończone. Podczas wczytywania dodatku Meet wyświetla ekran wczytywania. Gdy sesja dodatku zostanie nawiązana przez wywołanie metody createAddonSession(), Meet traktuje to jako sygnał z dodatku, że wczytywanie zostało zakończone i że użytkownik może wchodzić w interakcję z treściami osób trzecich. Dodatek nie powinien wywoływać metody createAddonSession() , dopóki nie skończy się wczytywanie treści.

  2. utworzyć klienta panelu bocznego. Aby uzyskać dostęp do pakietu Meet add-ons SDK w panelu bocznym, musisz utworzyć instancję MeetSidePanelClient interfejsu. Umożliwia to kontrolowanie głównego pakietu Meet add-ons SDK.

  3. rozpocząć aktywność. Umożliwia to innym osobom dołączenie do Twojego dodatku i opcjonalnie otwiera dodatek w głównej części ekranu.

Poniższy przykładowy kod pokazuje, jak sesja tworzy klienta panelu bocznego i jak klient panelu bocznego rozpoczyna aktywność w głównej części ekranu:

Podstawowy JS + Webpack

W nowym pliku o nazwie main.js zdefiniuj funkcję, która tworzy sesję dodatku, klienta panelu bocznego i rozpoczyna aktywność po kliknięciu przycisku o identyfikatorze '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
            });
        });
}

W nowym pliku o nazwie SidePanel.html zdefiniuj przycisk, który uruchamia aktywność, i wywołaj funkcję z pliku main.js podczas wczytywania dokumentu:

<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>

Musisz też spakować pakiet Meet add-ons SDK z plikiem main.js i udostępnić je w bibliotece. Zalecamy, aby zainstalować webpack i użyć opcji library w pliku webpack.config.js:

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

Next.js

Dodaj nową Page, aby wyświetlić panel boczny. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz rozpoczyna aktywność po kliknięciu przycisku:

'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>
        </>
    );
}

Zastąp te elementy:

  • CLOUD_PROJECT_NUMBER: numer projektu Google Cloud.

  • MAIN_STAGE_URL: adres URL głównej części ekranu, który utworzysz w następnym kroku.

Tworzenie strony głównej części ekranu

Główna część ekranu to główny obszar, w którym możesz wyświetlać dodatek, jeśli potrzebujesz większej przestrzeni roboczej. Główna część ekranu otwiera się po rozpoczęciu aktywności. Aby uzyskać dostęp do funkcji pakietu Meet add-ons SDK w głównej części ekranu, musisz użyć interfejsu MeetMainStageClient.

Poniższy przykładowy kod pokazuje przykład strony głównej części ekranu, która renderuje niestandardowy element div, aby wyświetlić tekst „Hello, world!”:

Podstawowy JS + Webpack

Dodaj tę funkcję do utworzonego już pliku main.js, aby główna część ekranu mogła sygnalizować, że wczytywanie zostało zakończone:

/**
 * 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();
}

Następnie dodaj nowy plik MainStage.html, który wywołuje nową funkcję initializeMainStage i wyświetla niestandardową treść „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

Dodaj Page, aby wyświetlić główną część ekranu. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz wyświetla niestandardową treść „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>
        </>
    );
}

Zastąp CLOUD_PROJECT_NUMBER numerem projektu Google Cloud.

Uruchamianie przykładu

Aby uruchomić lokalnie:

Podstawowy JS + Webpack

Uruchom webpack, aby spakować plik main.js wraz z pakietem Meet add-ons SDK:

npx webpack

Otwórz pliki SidePanel.html i MainStage.html w dowolnej przeglądarce. Powinno to wyglądać tak samo jak wdrożenie podstawowego przykładu JS na GitHubie do plików SidePanel.html i MainStage.html w GitHub Pages.

Next.js

Uruchom Next:

next dev

Otwórz adres http://localhost:3000/sidepanel lub http://localhost:3000/mainstage. MainStage.html

Wdrażanie dodatku Meet

Wdrażanie dodatku to proces dwuetapowy:

  1. Najpierw musisz wdrożyć kod z tego przewodnika Szybki start w witrynie, której jesteś właścicielem, za pomocą dowolnego rozwiązania do wdrażania. Oficjalne przykładowe dodatki Google Meet na GitHubie są wdrażane za pomocą przepływu pracy GitHub do GitHub Pages, ale możesz też używać narzędzi takich jak Hosting Firebase.

  2. Po wdrożeniu aplikacji musisz skonfigurować wdrożenie dodatku, postępując zgodnie z instrukcjami w artykule Wdrażanie dodatku Meet. Zgodnie z tym przewodnikiem wdrażania tworzony jest ostateczny dodatek Meet, który jest elementem iframe w Meet aplikacji wdrożonej w kroku 1.

Uruchamianie przykładu

  1. Otwórz Meet.

  2. Kliknij przycisk narzędzi do spotkań Ikona narzędzi obsługi spotkania..

  3. W sekcji Twoje dodatki powinien być widoczny Twój dodatek. Aby uruchomić dodatek, wybierz go.

Dodawanie kolejnych funkcji

Teraz, gdy masz już podstawowy panel boczny i główną część ekranu, możesz zacząć dodawać do dodatku inne funkcje:

Zachęcamy do korzystania z przykładowych dodatków Meet na GitHubie jako odniesienia do tworzenia tych funkcji.