Kurzanleitung zu Meet-Add-ons

In dieser Anleitung wird beschrieben, wie Sie ein Beispiel-Google Meet-Add-on einrichten und ausführen, indem Sie eine Hauptbühne und einen Seitenbereich erstellen. Die „Hello World“-Beispiele auf dieser Seite sind auch auf GitHub als vollständige Meet-Add-ons verfügbar, die entweder mit Basic JavaScript oder Next.js TypeScript erstellt wurden.

Der Hauptbereich und der Seitenbereich des Meet Add-ons SDK
Der Hauptbereich und die Seitenleiste des Web-Add-ons für Meet.

SDK installieren und importieren

Sie können über npm oder gstatic auf das SDK zugreifen.

Wenn in Ihrem Projekt npm verwendet wird, folgen Sie der Anleitung für das npm-Paket des Meet Add-ons SDK.

Installieren Sie zuerst das npm-Paket:

npm install @googleworkspace/meet-addons

Das Meet Add-ons SDK ist dann verfügbar, wenn Sie die Schnittstelle MeetAddonExport importieren:

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

Für TypeScript-Nutzer werden TypeScript-Definitionen mit dem Modul gepackt.

gstatic

Das Google Meet Add-ons SDK ist als JavaScript-Bundle von gstatic verfügbar, einer Domain, die statische Inhalte bereitstellt.

Wenn Sie das Meet Add-ons SDK verwenden möchten, fügen Sie Ihrer App das folgende Script-Tag hinzu:

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

Das Meet Add-ons SDK ist über die MeetAddon-Benutzeroberfläche unter window.meet.addon verfügbar.

Seitenleiste erstellen

In der Seitenleiste werden die installierten Add-ons angezeigt, die Sie auswählen und verwenden können. Nachdem Sie das Add-on ausgewählt haben, wird über einen IFrame die Seitenleiste-URL geladen, die Sie im Add-on-Manifest angeben. Dies sollte der Einstiegspunkt Ihrer App sein und mindestens die folgenden Funktionen bieten:

  1. Geben Sie an, dass das Laden des Add-ons abgeschlossen ist. Meet zeigt einen Ladebildschirm an, während das Add-on geladen wird. Wenn die Add-on-Sitzung durch Aufrufen der Methode createAddonSession() hergestellt wird, behandelt Meet dies als Signal vom Add-on, dass das Laden abgeschlossen ist und der Nutzer mit den Drittanbieterinhalten interagieren kann. Die Methode createAddonSession() sollte erst dann über das Add-on aufgerufen werden, wenn der Ladevorgang abgeschlossen ist.

  2. Erstellen Sie den Seitenleisten-Client. Damit Sie in der Seitenleiste auf das Meet Add-ons SDK zugreifen können, müssen Sie eine MeetSidePanelClient-Oberfläche instanziieren. So haben Sie die Kontrolle über die Hauptfunktionen des Meet Add-ons SDK.

  3. Starten Sie die Aktivität. So können andere Nutzer an Ihrem Add-on teilnehmen und es wird optional im Hauptbereich geöffnet.

Das folgende Codebeispiel zeigt, wie die Sitzung einen Seitenleistenclient erstellt und wie der Seitenleistenclient eine Aktivität in der Hauptbühne startet:

Einfaches JS und Webpack

Definieren Sie in einer neuen Datei namens main.js eine Funktion, die eine Add-on-Sitzung, den Seitenleistenclient erstellt und die Aktivität startet, wenn auf eine Schaltfläche mit der ID 'start-activity' geklickt wird:

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

Definieren Sie in einer neuen Datei mit dem Namen SidePanel.html die Schaltfläche, über die die Aktivität gestartet wird, und rufen Sie die Funktion beim Laden des Dokuments aus main.js auf:

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

Außerdem müssen Sie das Meet Add-ons SDK mit Ihrer main.js bündeln und in einer Bibliothek bereitstellen. Dazu sollten Sie Webpack installieren und die Option library in der Datei webpack.config.js verwenden:

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

Next.js

Fügen Sie ein neues Page hinzu, um die Seitenleiste einzublenden. Auf dieser Seite werden beim Laden eine Add-on-Sitzung und ein Seitenleiste-Client erstellt und die Aktivität gestartet, wenn auf eine Schaltfläche geklickt wird:

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

Ersetzen Sie Folgendes:

  • CLOUD_PROJECT_NUMBER: die Projektnummer Ihres Google Cloud-Projekts.

  • MAIN_STAGE_URL: die URL der Hauptbühne, die Sie im nächsten Schritt erstellen.

Seite für die Hauptbühne erstellen

Der Hauptbereich ist der Hauptfokusbereich, in dem Sie das Add-on anzeigen können, wenn ein größerer Arbeitsbereich erforderlich ist. Die Hauptbühne wird geöffnet, sobald die Aktivität beginnt. Wenn Sie auf die SDK-Funktionen von Meet-Add-ons in der Hauptphase zugreifen möchten, müssen Sie die Benutzeroberfläche MeetMainStageClient verwenden.

Das folgende Codebeispiel zeigt ein Beispiel für eine Hauptseite im Anzeigebereich, die eine benutzerdefinierte div-Datei so rendert, dass sie „Hello, world!“ sagt:

Einfaches JS und Webpack

Fügen Sie der bereits erstellten Datei main.js die folgende Funktion hinzu, damit die Hauptphase signalisieren kann, dass der Ladevorgang abgeschlossen ist:

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

Fügen Sie dann eine neue MainStage.html-Datei hinzu, die die neue initializeMainStage-Funktion aufruft und benutzerdefinierten „Hello World“-Inhalt anzeigt:

<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

Fügen Sie einen Page hinzu, um den Hauptbereich anzuzeigen. Auf dieser Seite werden beim Laden eine Add-on-Sitzung und ein Seitenleistenclient erstellt und benutzerdefinierte „Hallo Welt“-Inhalte angezeigt:

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

Ersetzen Sie CLOUD_PROJECT_NUMBER durch die Projektnummer Ihres Google Cloud-Projekts.

Beispiel ausführen

So führen Sie eine lokale Ausführung aus:

Einfaches JS und Webpack

Führen Sie Webpack aus, um die Datei main.js mit dem Meet Add-ons SDK zu bündeln:

npx webpack

Öffnen Sie die Dateien SidePanel.html und MainStage.html in einem Browser. Das sollte genauso aussehen wie die Bereitstellung des Basic-JS-Beispiels auf GitHub in SidePanel.html und MainStage.html auf GitHub-Seiten.

Next.js

Führen Sie als Nächstes Folgendes aus:

next dev

Rufen Sie http://localhost:3000/sidepanel oder http://localhost:3000/mainstage auf. Sie sollten genauso aussehen wie die Bereitstellung des Next.js-Beispiels auf GitHub in SidePanel.html und MainStage.html auf GitHub-Seiten.

Meet-Add-on bereitstellen

Richten Sie die Bereitstellung des Add-ons ein. Folgen Sie dazu der Anleitung unter Meet-Add-on bereitstellen.

Beispiel ausführen

  1. Öffnen Sie Google Meet.

  2. Klicke auf Aktivitäten Das Symbol für Aktivitäten..

  3. Im Abschnitt Meine Add-ons sollte das Add-on angezeigt werden. Wählen Sie es aus, um das Add-on auszuführen.

Weitere Funktionen hinzufügen

Nachdem Sie nun eine einfache Seitenleiste und einen Hauptbereich haben, können Sie Ihrem Add-on weitere Funktionen hinzufügen:

Als Referenz für die Entwicklung dieser Funktionen sollten Sie die Beispiel-Add-ons für Meet auf GitHub verwenden.