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.

Hauptbildschirm und 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, 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.

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.

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:

Hinweis: Es wird davon ausgegangen, 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, ü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

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 den offiziellen Next.js-Dokumenten zum Routing.

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.

Wichtig :Dein Add-on muss die Methode createAddonSession() noch einmal aufrufen, sobald das Laden der Inhalte abgeschlossen ist. Andernfalls wird das Add-on nicht auf der Hauptbühne gestartet.

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.

Hinweis :Wenn Sie das Script lokal ausführen, wird in der Konsole der Chrome-Entwicklertools die Fehlermeldung Missing required Meet SDK URL parameter: meet_sdk angezeigt. Das ist normal, bis Sie die Anwendung in Meet ausführen, da Meet die Weitergabe dieses URL-Parameters übernimmt. Weitere Informationen zu Entwicklertools finden Sie unter Entwicklertools für Meet-Add-ons verwalten.

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 .

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:

• Zusammenarbeit mit einem Meet-Add-on
• Nachrichten zwischen Hauptbühne und Seitenleiste
• Werbung für das Add-on über die Bildschirmfreigabe

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