Krótkie wprowadzenie do dodatków do Meet

W tym przewodniku opisano, jak skonfigurować i uruchomić przykładowy dodatek Google Meet, tworząc scenę główną i panel boczny. Przykłady „Hello World” na tej stronie są też dostępne na GitHubie jako kompletne dodatki do Meet utworzone za pomocą podstawowego JavaScriptu lub TypeScript Next.js.

Panel boczny i główna część ekranu pakietu SDK dodatków do Meet.
Główny obszar roboczy i panel boczny dodatku Meet na potrzeby korzystania z niego w przeglądarce

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 pakietu SDK dodatków Meet.

Najpierw zainstaluj pakiet npm:

npm install @googleworkspace/meet-addons

Następnie możesz zaimportować pakiet SDK dodatków Meet, korzystając z interfejsu MeetAddonExport:

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

W przypadku użytkowników TypeScript definicje TypeScript są pakowane z modułem.

gstatic

Pakiet SDK dodatków Google Meet jest dostępny jako pakiet JavaScripta z gstatic, domeny, która udostępnia treści statyczne.

Aby korzystać z pakietu SDK dodatków Meet, dodaj do aplikacji ten tag skryptu:

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

Pakiet SDK dodatków Meet jest dostępny w interfejsie MeetAddon w sekcji window.meet.addon.

Tworzenie strony panelu bocznego

W panelu bocznym wyświetlają się zainstalowane dodatki, które możesz wybrać i użyć. Po wybraniu dodatku w ramce iframe wczytuje się adres URL panelu bocznego, który określasz w pliku manifestu dodatku. Powinien to być punkt wejścia do aplikacji, który umożliwia co najmniej:

  1. Wskazuje, że wczytywanie dodatku zostało zakończone. Podczas wczytywania dodatku Meet wyświetla ekran wczytywania. Gdy sesja dodatku zostanie utworzona przez wywołanie metody createAddonSession(), Meet traktuje to jako sygnał od dodatku, że wczytywanie zostało zakończone i że użytkownik może wchodzić w interakcje z treściami innej firmy. Twój dodatek nie powinien wywoływać metody createAddonSession(), dopóki treści nie zostaną w pełni załadowane.

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

  3. Rozpocznij aktywność. Umożliwia to innym dołączanie do Twojego dodatku i opcjonalnie otwiera go na głównym etapie.

Poniższy przykładowy kod pokazuje, jak sesja tworzy klienta panelu bocznego i jak klient panelu bocznego uruchamia aktywność na etapie głównym:

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ż dołączyć pakiet SDK dodatków Meet do pakietu main.js i udostępnić go w bibliotece. Zalecamy zainstalowanie webpacka i użycie opcji library w pliku webpack.config.js:

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

Next.js

Dodaj nowy element Page, aby wyświetlić panel boczny. Ta strona tworzy sesję dodatku i klienta panelu bocznego po załadowaniu oraz uruchamia 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 następujące elementy:

  • CLOUD_PROJECT_NUMBER: numer projektu Google Cloud.

  • MAIN_STAGE_URL: adres URL głównej wersji roboczej, który utworzysz w następnym kroku.

Tworzenie strony głównej

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

Poniższy przykładowy kod pokazuje stronę główną, która renderuje niestandardowy element div, aby wyświetlić komunikat „Hello, world!”:

Podstawowy JS + Webpack

Dodaj do utworzonego już pliku main.js tę funkcję, aby etap główny mógł sygnalizować, że wczytanie 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 niestandardowy tekst „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ć scenę główną. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz wyświetla niestandardowe treści „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ć aplikację lokalnie:

Podstawowy JS + Webpack

Uruchom webpack, aby połączyć plik main.js z pakietem SDK dodatków do Meet:

npx webpack

Otwórz plik SidePanel.html i plik MainStage.html w dowolnej przeglądarce. Powinno to wyglądać tak samo jak w przypadku wdrożenia przykładu podstawowego kodu JS na GitHub do pliku SidePanel.html i MainStage.html na stronach GitHub.

Next.js

Wykonaj jako następne:

next dev

Otwórz http://localhost:3000/sidepanel lub http://localhost:3000/mainstage. Powinny one wyglądać tak samo jak w przypadku wdrożenia przykładu Next.js na GitHubie do pliku SidePanel.html i MainStage.html w GitHub Pages.

.

Wdrażanie dodatku Meet

Skonfiguruj wdrażanie dodatku, wykonując instrukcje wdrażania dodatku Meet.

Uruchamianie przykładu

  1. Otwórz Meet.

  2. Kliknij Czynności Ikona aktywności.

  3. W sekcji Twoje dodatki powinien pojawić się Twój dodatek. Wybierz go, aby uruchomić dodatek.

Dodawanie kolejnych funkcji

Teraz, gdy masz już podstawowy panel boczny i ekran główny, możesz zacząć dodawać do dodatku inne funkcje:

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