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 einfachem JavaScript oder Next.js TypeScript erstellt wurden.

Hauptbildschirm und Seitenleiste des Meet-Web-Add-ons.

SDK installieren und importieren

Sie können mit npm oder mit 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

Dann ist das Meet Add-ons SDK verfügbar, indem Sie die MeetAddonExport Schnittstelle:

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

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

Seite in Seitenleiste erstellen

In der Seitenleiste werden die installierten Add-ons angezeigt, auswählen und verwenden können. Nachdem Sie Ihr Add-on ausgewählt haben, iFrame lädt die URL der Seitenleiste, die Sie im Manifestdatei des Add-ons. 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. Mein Add-on Die Methode createAddonSession() sollte erst aufgerufen werden, wenn der Inhalt fertig ist. wird geladen.

2. Erstellen Sie den Client für die Seitenleiste. 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 Ihrem und optional Ihr in der Hauptanzeige eingeblendet werden.

Das folgende Codebeispiel zeigt, wie in der Sitzung ein Seitenleisten-Client erstellt wird. wie der Client in der Seitenleiste eine Aktivität in der Hauptphase startet:

Einfaches JS und Webpack

Definieren Sie in einer neuen Datei namens main.js eine Funktion, die eine Add-on-Sitzung, den Seitenleisten-Client 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, 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 und stellen sie in einer Bibliothek zur Verfügung. 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 wird ein Add-on-Sitzung und Seitenleisten-Client beim Laden und die Aktivität startet, 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 für die Hauptanzeige, die Sie im nächsten Schritt erstellen.

Seite für die Hauptbühne erstellen

Der Hauptbereich ist der Fokusbereich, in dem Sie den wenn ein größerer Arbeitsbereich benötigt wird. Die Hauptbühne wird geöffnet, sobald die Aktivität beginnt. So greifen Sie auf das Meet Add-ons SDK zu: müssen Sie die MeetMainStageClient-Oberfläche verwenden.

Wichtig: Dein Add-on muss die Methode createAddonSession() noch einmal aufrufen, sobald das Laden der Inhalte abgeschlossen ist. Andernfalls startet das Add-on nicht in der Hauptphase.

Im folgenden Codebeispiel sehen Sie ein Beispiel für eine Hauptseite im Anzeigebereich, auf der ein benutzerdefiniertes div, um „Hello, world!“ zu sagen:

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 wird ein Add-on-Sitzung und Seitenleisten-Client beim Laden und zeigt benutzerdefinierte „Hallo Welt“ an Inhalt:

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

Beispiel ausführen

So führen Sie das Programm lokal aus:

Einfaches JS und Webpack

Führe Webpack aus, um deine main.js-Datei mit dem SDK für Meet-Add-ons:

npx webpack

Öffnen Sie die Dateien SidePanel.html und MainStage.html in einem Browser. Dies sollte genauso aussehen wie bei der Bereitstellung des Basic JS-Beispiels auf GitHub. 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. Diese sollten genauso aussehen wie die Bereitstellung des Next.js-Beispiels auf GitHub SidePanel.html und MainStage.html auf GitHub-Seiten.

Hinweis :In den Chrome-Entwicklertools wenn sie lokal ausgeführt werden, wird der Fehler 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 Meet.

2. Klicken Sie auf Aktivitäten .

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

Weitere Funktionen hinzufügen

Da Sie nun eine einfache Seitenleiste und einen Hauptbereich haben, können Sie weitere zu Ihrem Add-on 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, die Beispiel-Add-ons für Meet auf GitHub zu verwenden. als Referenz für die Entwicklung dieser Funktionen.