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
Hauptbildschirm und Seitenleiste des Meet-Web-Add-ons.

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

Anschließend können Sie das Meet Add-ons SDK verwenden, indem Sie die MeetAddonExport-Benutzeroberfläche importieren:

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

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

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. In Meet wird ein Ladebildschirm angezeigt, 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. Dein Add-on sollte die createAddonSession()-Methode erst aufrufen, wenn das Laden der Inhalte abgeschlossen ist.

  2. Erstellen Sie den Seitenleisten-Client. Wenn Sie im Seitenpanel auf das Meet Add-ons SDK zugreifen möchten, müssen Sie eine MeetSidePanelClient-Benutzeroberflä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. Wir empfehlen, Webpack zu installieren und die Option library in der webpack.config.js-Datei zu 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 eine Beispielseite der Hauptbühne, auf der eine benutzerdefinierte div gerendert wird, die „Hallo Welt!“ ausgibt:

Einfaches JS und Webpack

Fügen Sie der bereits erstellten Datei main.js die folgende Funktion hinzu, damit die Hauptbühne signalisieren kann, dass das Laden 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 benutzerdefinierte „Hallo Welt“-Inhalte 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 ein Page hinzu, um die Hauptbühne 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 das Programm lokal aus:

Einfaches JS und Webpack

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

npx webpack

Öffnen Sie die Datei SidePanel.html und die Datei MainStage.html in einem beliebigen 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 Bereich Meine Add-ons sollte Ihr Add-on angezeigt werden. Wählen Sie es aus, um das Add-on auszuführen.

Weitere Funktionen hinzufügen

Nachdem Sie einen einfachen Seitenbereich und einen Hauptbereich erstellt haben, können Sie Ihrem Add-on weitere Funktionen hinzufügen:

Wir empfehlen Ihnen, die Beispiel-Meet-Add-ons auf GitHub als Referenz für die Entwicklung dieser Funktionen zu verwenden.