Ta strona została przetłumaczona przez Cloud Translation API.

Krótkie wprowadzenie do dodatków do Meet

Z tego przewodnika dowiesz się, jak skonfigurować i uruchomić próbkę dodatku Google Meet przez utworzenie sceny głównej i panelu bocznego. „Witaj świecie” przykłady z tej strony są również dostępne na GitHubie jako ukończone Dodatki do Meet utworzone za pomocą podstawowego języka JavaScript lub Next.js TypeScript.

Główna scena i panel boczny SDK dodatków do Meet. — scenę główną i panel boczny w przeglądarce Meet, Dodatek.

Zainstaluj i zaimportuj pakiet SDK

Możesz uzyskać dostęp do pakietu SDK przy użyciu npm lub gstatic.

npm (zalecane)

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ą dołączane do modułu.

gstatic

Pakiet SDK dodatków do Google Meet jest dostępny jako Pakiet JavaScriptu z domeny gstatic, 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 zobaczysz Element iframe wczytuje adres URL panelu bocznego określony w polu . Powinien to być punkt wejścia aplikacji i powinien wykonywać następujące kwestie:

Wskazuje, że wczytywanie dodatku zostało zakończone. Meet wyświetla ekran wczytywania, gdy trwa wczytywanie dodatku. Gdy sesja dodatkowa powstaje przez wywołanie funkcji createAddonSession() będzie ona traktowana jako sygnał z że wczytywanie zostało ukończone, wchodzić w interakcje z treściami osób trzecich. Twój dodatek nie powinien wywoływać metody createAddonSession(), dopóki treści nie zostaną w pełni załadowane.
Utwórz klienta panelu bocznego. Aby uzyskać dostęp do pakietu SDK dodatków Meet w panelu bocznym, musisz utworzyć instancję interfejsu MeetSidePanelClient. Zapewni Ci to kontrolę nad głównym pakietem SDK dodatków do Meet z myślą o użytkownikach.
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. jak klient panelu bocznego rozpoczyna działanie na etapie głównym:

Podstawowy JS + Webpack

W nowym pliku o nazwie main.js zdefiniuj funkcję, która tworzy sesja dodatku, klient panelu bocznego, 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 uruchamiający i wywołaj funkcję z main.js przy wczytywaniu 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ż połączyć pakiet SDK dodatków do Meet main.js i udostępnij je w bibliotece. Zalecamy zrobić to do instalowanie pakietu internetowego i za pomocą opcji library w pliku webpack.config.js:

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

Next.js

Aby wyświetlić panel boczny, dodaj nowy element Page. Ta strona tworzy sesja dodatku i klient panelu bocznego podczas wczytywania, 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 następujące elementy:

CLOUD_PROJECT_NUMBER: numer projektu Google Cloud.
MAIN_STAGE_URL: adres URL etapu głównego, który utworzysz w następnym kroku.

Utwórz stronę główną sceny

Główna scena to główny obszar, w którym możesz wyświetlać dodatek, jeśli potrzebne jest więcej miejsca do pracy. 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 poniższą funkcję do już utworzonego pliku main.js, aby że scena główna może zasygnalizować, że została wczytana:

/**
 * 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 sesja dodatku i klient panelu bocznego podczas wczytywania, wyświetla niestandardowe „hello, world” treść:

'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 swojego Projekt Google Cloud.

Uruchamianie przykładu

Aby uruchomić go lokalnie, wykonaj te czynności:

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 przykładu podstawowego JavaScriptu w GitHubie. do pliku SidePanel.html i MainStage.html na stronach GitHub.

Next.js

Uruchom następne:

next dev

Przejdź do http://localhost:3000/sidepanel lub http://localhost:3000/mainstage Powinny one wyglądać tak samo jak wdrożenie przykładu Next.js na GitHubie. do pliku SidePanel.html i MainStage.html na stronach GitHub.

Wdrażanie dodatku Meet

Skonfiguruj wdrożenie dodatku, postępując zgodnie z Dowiedz się, jak wdrożyć dodatek do Meet.

Uruchamianie przykładu

Otwórz Meet.
Kliknij Czynności .
W sekcji Twoje dodatki powinien pojawić się Twój dodatek. Wybierz go, aby uruchomić dodatek.

Dodaj więcej funkcji

Skoro masz już podstawowy panel boczny i scenę główną, możesz zacząć dodawać kolejne funkcje Twojego dodatku:

Zachęcamy do skorzystania z przykładowych dodatków do Meet dostępnych na GitHubie jako materiałów referencyjnych dotyczących tych funkcji.