Kurzanleitung für 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 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.

Die Hauptbühne und die Seitenleiste des Meet-Web-Add‑ons.

SDK installieren und importieren

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

npm (empfohlen)

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

Installieren Sie zuerst das npm-Paket:

npm install @googleworkspace/meet-addons

Das Meet Add-ons SDK ist dann 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 durch die Spezifikation „exports“ in package.json der Export des Bildschirmfreigabepakets importiert werden kann.

gstatic

Das Google Meet Add-ons SDK ist als JavaScript-Bundle unter gstatic verfügbar, einer Domain, über die statische Inhalte bereitgestellt werden.

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-Schnittstelle unter window.meet.addon verfügbar.

Hinweis :Wenn Sie TypeScript verwenden, können Sie die neuesten Typen auch unter https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts abrufen. Speichern Sie die Datei einfach lokal.

Seitenleistenseite 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 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. Gibt 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() eingerichtet wird, behandelt Meet dies als Signal vom Add-on, dass das Laden abgeschlossen ist und der Nutzer mit den Drittanbieterinhalten interagieren kann. Ihr Add-on sollte die Methode createAddonSession() erst aufrufen, wenn Ihre Inhalte vollständig geladen sind.

2. Seitenleisten-Client erstellen Wenn Sie im Seitenbereich auf das Meet-Add-ons SDK zugreifen möchten, müssen Sie eine MeetSidePanelClient-Schnittstelle instanziieren. So haben Sie die Kontrolle über die Hauptfunktionen des Meet-Add-ons SDK.

3. Starte die Aktivität. So können andere Ihrem Add-on beitreten und es wird optional im Hauptbereich geöffnet.

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

Einfaches JS + Webpack

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

Hinweis :Dies setzt voraus, dass Sie das Meet-Add-ons SDK mit npm installiert haben.

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 Ihrem main.js bündeln und in einer Bibliothek verfügbar machen. Wir empfehlen, dazu webpack zu installieren und die library-Option in der Datei webpack.config.js zu verwenden:

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

Next.js

Hinweis :In diesem Beispiel wird das Next.js-App-Routing verwendet, um einer Next.js-App eine Seite hinzuzufügen. Weitere Informationen zum Erstellen Ihrer ersten Seite in Next.js finden Sie in der offiziellen Next.js-Dokumentation zum Routing.

Fügen Sie ein neues Page hinzu, um die Seitenleiste aufzurufen. Auf dieser Seite wird beim Laden eine Add-on-Sitzung und ein Seitenleistenclient 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.

Hauptbühnenseite erstellen

Die Hauptbühne ist der primäre Fokusbereich, in dem Sie das Add-on präsentieren können, wenn ein größerer Arbeitsbereich erforderlich ist. Die Hauptbühne wird geöffnet, sobald die Aktivität beginnt. Wenn Sie auf Funktionen des Meet-Add‑ons SDK im Hauptbereich zugreifen möchten, müssen Sie die MeetMainStageClient-Schnittstelle verwenden.

Wichtig :Ihr Add-on muss die Methode createAddonSession() noch einmal aufrufen, sobald Ihre Inhalte geladen wurden. Andernfalls kann das Add‑on nicht auf dem Hauptbildschirm gestartet werden.

Das folgende Codebeispiel zeigt ein Beispiel für eine Hauptbühnenseite, auf der ein benutzerdefiniertes div gerendert wird, um „Hallo Welt!“ auszugeben:

Einfaches JS + Webpack

Fügen Sie der Datei main.js, die Sie bereits erstellt haben, die folgende Funktion hinzu, damit die Hauptbühne signalisieren kann, dass sie mit dem Laden fertig 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, in der die neue initializeMainStage-Funktion aufgerufen und benutzerdefinierte „Hello, world“-Inhalte angezeigt werden:

<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 wird beim Laden eine Add-on-Sitzung und ein Seitenleistenclient erstellt und benutzerdefinierte „Hallo Welt“-Inhalte werden 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 die App 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 Datei SidePanel.html und die Datei MainStage.html in einem beliebigen Browser. Das sollte genauso aussehen wie die Bereitstellung des einfachen JS-Beispiels auf GitHub für SidePanel.html und MainStage.html auf GitHub Pages.

Next.js

Als Nächstes ausführen:

next dev

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

Hinweis :In der Chrome-Entwicklertools-Konsole wird bei der lokalen Ausführung ein Fehler mit der Meldung Missing required Meet SDK URL parameter: meet_sdk angezeigt. Das ist so vorgesehen, bis Sie die Anwendung in Meet ausführen, da Meet diesen URL-Parameter übergibt. Weitere Informationen zu Entwicklertools finden Sie unter Entwicklertools für Meet-Add-ons verwalten.

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 Bereitstellungslösung Ihrer Wahl auf einer Website bereitstellen, die Ihnen gehört. Die offiziellen Google Meet-Add-ons auf GitHub werden mit einem GitHub-Workflow auf GitHub Pages bereitgestellt. Sie können aber auch Tools wie Firebase Hosting verwenden.

2. Nachdem Ihre Anwendung bereitgestellt wurde, müssen Sie die Bereitstellung des Add‑ons einrichten. Folgen Sie dazu der Anleitung unter Meet-Add‑on bereitstellen. Wenn Sie dieser Anleitung 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. Öffnen Sie Google Meet.

2. Klicken Sie auf die Schaltfläche „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 einen einfachen Hauptbereich erstellt haben, können Sie Ihrem Add-on weitere Funktionen hinzufügen:

• Zusammenarbeit über ein Meet-Add-on
• Nachrichten zwischen Hauptbühne und Seitenleiste
• Bewerbung des Add-ons

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