Kurzanleitung für Meet-Add-ons

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

Hauptbereich und Seitenleiste des Meet Add-ons SDK.
Hauptbühne und Seitenleiste des Meet-Web Add-ons.

SDK installieren und importieren

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

Wenn Ihr Projekt npm verwendet, können Sie der Anleitung für das Meet-Add‑ons SDK-npm-Paket folgen.

Installieren Sie zuerst das npm-Paket:

npm install @googleworkspace/meet-addons

Anschließend ist das Meet-Add‑ons SDK verfügbar, indem Sie die MeetAddonExport -Schnittstelle importieren:

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

Für TypeScript-Nutzer sind TypeScript-Definitionen im Modul enthalten. TypeScript-Nutzer sollten moduleResolution in der tsconfig.json des Projekts auf "bundler" setzen, damit der Paket.json-Export „exports“ den Import des Bildschirmfreigabepakets ermöglicht.

gstatic

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

Fügen Sie Ihrer App das folgende Skript-Tag hinzu, um das Meet-Add‑ons SDK zu verwenden:

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

Das Meet-Add‑ons SDK ist über die MeetAddon-Schnittstelle unter window.meet.addon verfügbar.

Seite für die Seitenleiste erstellen

In der Seitenleiste werden die installierten Add‑ons angezeigt, die Sie auswählen und verwenden können. Sobald Sie Ihr Add‑on ausgewählt haben, wird in einem iFrame die Seitenleisten-URL geladen, die Sie im Add‑on-Manifest angeben. Dies sollte der Einstiegspunkt Ihrer App sein und mindestens Folgendes tun:

  1. Angeben, 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 createAddonSession() Methode eingerichtet wird, behandelt Meet dies als Signal vom Add‑on, dass das Laden abgeschlossen ist und der Nutzer mit den Inhalten von Dritten interagieren kann. Ihr Add‑on sollte die Methode createAddonSession() erst aufrufen, wenn das Laden der Inhalte abgeschlossen ist.

  2. Client für die Seitenleiste erstellen. Um in der Seitenleiste auf das Meet-Add‑ons SDK zuzugreifen, müssen Sie eine MeetSidePanelClient Schnittstelle instanziieren. Dadurch haben Sie die Kontrolle über die Hauptfunktionen des Meet-Add‑ons SDK.

  3. Aktivität starten. So können andere Nutzer Ihrem Add‑on beitreten und Ihr Add‑on optional auf der Hauptbühne öffnen.

Das folgende Codebeispiel zeigt, wie die Sitzung einen Client für die Seitenleiste erstellt und wie der Client für die Seitenleiste eine Aktivität auf der Hauptbühne startet:

Einfaches JS + Webpack

Definieren Sie in einer neuen Datei mit dem Namen main.js eine Funktion, die eine Add‑on-Sitzung und den Client für die Seitenleiste 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, mit der 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 main.js bündeln und in einer Bibliothek verfügbar machen. Wir empfehlen, dazu Webpack zu installieren und die Option library zu verwenden in Ihrer Datei webpack.config.js:

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

Next.js

Fügen Sie eine neue Page hinzu, um die Seitenleiste anzuzeigen. Auf dieser Seite werden beim Laden eine Add‑on-Sitzung und ein Client für die Seitenleiste erstellt und die Aktivität wird 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

Die Hauptbühne ist der Hauptfokusbereich, in dem Sie das Add‑on anzeigen können, wenn mehr Arbeitsfläche erforderlich ist. Die Hauptbühne wird geöffnet, sobald die Aktivität gestartet wird. Um auf Funktionen des Meet-Add‑ons SDK auf der Hauptbühne zuzugreifen, müssen Sie die MeetMainStageClient Schnittstelle verwenden.

Das folgende Codebeispiel zeigt eine Beispielseite für die Hauptbühne, auf der ein benutzerdefiniertes div gerendert wird, um „Hello, world!“ auszugeben:

Einfaches JS + 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 Datei MainStage.html hinzu, die die neue Funktion initializeMainStage aufruft und benutzerdefinierte „Hello, world“-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 eine Page hinzu, um die Hauptbühne anzuzeigen. Auf dieser Seite werden beim Laden eine Add‑on-Sitzung und ein Client für die Seitenleiste erstellt und benutzerdefinierte „Hello, world“-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 Beispiel lokal aus:

Einfaches JS + Webpack

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

npx webpack

Öffnen Sie die Dateien SidePanel.html und MainStage.html in einem beliebigen Browser. Das sollte genauso aussehen wie die Bereitstellung des einfachen JS-Beispiels auf GitHub für eine SidePanel.html und MainStage.html auf GitHub Pages.

Next.js

Führen Sie Next aus:

next dev

Rufen Sie http://localhost:3000/sidepanel oder http://localhost:3000/mainstage auf. Das sollte genauso aussehen wie die Bereitstellung des Next.js-Beispiels auf GitHub für eine SidePanel.html und MainStage.html auf GitHub Pages.

Meet-Add‑on bereitstellen

Die Bereitstellung eines Add‑ons erfolgt in zwei Schritten:

  1. Zuerst müssen Sie den Code aus dieser Kurzanleitung mit einer beliebigen Bereitstellungslösung auf einer Website bereitstellen, deren Inhaber Sie sind. Die offiziellen Beispiel-Add‑ons für Google Meet auf GitHub werden mit einem GitHub-Workflow auf GitHub Pages bereitgestellt. Sie können aber auch Tools wie Firebase Hostingverwenden.

  2. Sobald Ihre Anwendung bereitgestellt ist, müssen Sie die Bereitstellung des Add‑ons einrichten. Folgen Sie dazu der Anleitung unter Meet-Add‑on bereitstellen. Wenn Sie dieser Bereitstellungsanleitung folgen, wird das endgültige Meet-Add‑on erstellt, das ein iFrame in Meet der Anwendung ist, die Sie in Schritt 1 bereitgestellt haben.

Beispiel ausführen

  1. Rufen Sie Meet auf.

  2. Klicken Sie auf die Schaltfläche für Besprechungstools Das Symbol für Besprechungstools..

  3. Im Bereich Ihre 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 eine einfache Seitenleiste und Hauptbühne erstellt haben, können Sie Ihrem Add‑on weitere Funktionen hinzufügen:

Sie können die Beispiel-Add‑ons für Meet auf GitHub als Referenz für die Entwicklung dieser Funktionen verwenden.