Guida rapida ai componenti aggiuntivi di Meet

Questa guida descrive come configurare ed eseguire un esempio per il componente aggiuntivo Google Meet creando uno stage principale e un riquadro laterale. Gli esempi "Hello World" in questa pagina sono disponibili anche su GitHub come componenti aggiuntivi Meet completi creati con JavaScript di base o TypeScript di Next.js.

La schermata principale e il riquadro laterale dell'SDK Meet Add-ons.
La fase principale e il riquadro laterale del componente aggiuntivo Meet Web.

Installa e importa l'SDK

Puoi accedere all'SDK utilizzando npm o gstatic.

Se il tuo progetto utilizza npm, puoi seguire le istruzioni per Pacchetto npm dell'SDK Meet Add-ons.

Innanzitutto, installa il pacchetto npm:

npm install @googleworkspace/meet-addons

L'SDK di Meet Add-ons è disponibile importando l'interfaccia MeetAddonExport:

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

Per gli utenti di TypeScript, le definizioni di TypeScript vengono pacchettizzate con il modulo.

gstatic

L'SDK dei componenti aggiuntivi di Google Meet è disponibile come bundle JavaScript da gstatic, un dominio che pubblica contenuti statici.

Per utilizzare l'SDK Meet Add-ons, aggiungi il seguente tag di script al tuo dell'app:

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

L'SDK Meet Add-ons è disponibile tramite l'interfaccia MeetAddon in window.meet.addon.

Creare una pagina in un riquadro laterale

Il riquadro laterale mostra i componenti aggiuntivi installati che puoi selezionare e utilizzare. Una volta selezionato il componente aggiuntivo, L'iframe carica l'URL del riquadro laterale che hai specificato nel campo del componente aggiuntivo. Questo deve essere il punto di contatto della tua app e deve almeno svolgere le seguenti operazioni:

  1. Indica che il caricamento del componente aggiuntivo è stato completato. Meet mostra una schermata di caricamento mentre è in corso il caricamento del componente aggiuntivo. Quando sessione aggiuntiva viene stabilita chiamando la funzione createAddonSession() Meet lo considera un indicatore il componente aggiuntivo che il caricamento è terminato e che l'utente possono interagire con i contenuti di terze parti. Il tuo componente aggiuntivo non deve chiamare il metodo createAddonSession() prima del termine dei contenuti Caricamento in corso.

  2. Crea il client del riquadro laterale. Per accedere all'SDK dei componenti aggiuntivi di Meet nel devi creare un'istanza per una MeetSidePanelClient a riga di comando. In questo modo puoi controllare la tua esperienza principale con l'SDK di Meet Add-ons.

  3. Avvia l'attività. In questo modo gli altri utenti possono partecipare e, facoltativamente, apre il tuo nella schermata principale.

Il seguente esempio di codice mostra come la sessione crea un client del riquadro laterale e il modo in cui il client del riquadro laterale avvia un'attività nella schermata principale:

JS di base + Webpack

In un nuovo file denominato main.js, definisci una funzione che crei una sessione del componente aggiuntivo, il client del riquadro laterale e avvii l'attività quando viene fatto clic su un pulsante con l'ID 'start-activity':

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
            });
        });
}

In un nuovo file denominato SidePanel.html, definisci il pulsante che avvia la attività e chiama la funzione dal tuo main.js al caricamento del documento:

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

Dovrai inoltre integrare l'SDK dei componenti aggiuntivi di Meet con main.js ed esponili in una libreria. Ti consigliamo di farlo installando webpack e utilizzando l'opzione library nel file webpack.config.js:

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

Next.js

Aggiungi una nuova Page per visualizzare il riquadro laterale. Questa pagina crea una sessione del componente aggiuntivo e un client del riquadro laterale al caricamento e avvia l'attività quando viene fatto clic su un pulsante:

'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>
        </>
    );
}

Sostituisci quanto segue:

  • CLOUD_PROJECT_NUMBER: il numero del tuo progetto Google Cloud.

  • MAIN_STAGE_URL: l'URL della fase principale che crei nel passaggio successivo.

Creare una pagina della fase principale

La schermata principale è l'area di interesse principale in cui puoi visualizzare se è necessario uno spazio di lavoro più ampio. La fase principale si apre all'avvio dell'attività. Per accedere all'SDK dei componenti aggiuntivi di Meet nella schermata principale, devi utilizzare l'interfaccia di MeetMainStageClient.

Il seguente esempio di codice mostra un esempio di pagina della fase principale che esegue il rendering di una div personalizzato con il testo "Hello World!":

JS + Webpack di base

Aggiungi la seguente funzione al file main.js che hai già creato, in modo che la fase principale possa segnalare il completamento del caricamento:

/**
 * 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();
}

Quindi, aggiungi un nuovo file MainStage.html, che chiama il nuovo initializeMainStage e visualizza "hello, world" personalizzato contenuti:

<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

Aggiungi un Page per visualizzare lo stage principale. Questa pagina crea una sessione del componente aggiuntivo e un client del riquadro laterale al caricamento e visualizza contenuti personalizzati "Hello, world":

'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>
        </>
    );
}

Sostituisci CLOUD_PROJECT_NUMBER con il numero del progetto progetto Google Cloud.

Esegui il sample

Per eseguirlo in locale, segui questi passaggi:

JS di base + Webpack

Esegui webpack per raggruppare il tuo file main.js insieme SDK Meet Add-ons:

npx webpack

Apri i file SidePanel.html e MainStage.html in qualsiasi browser. Dovrebbe essere simile al deployment dell'esempio di JS di base su GitHub in SidePanel.html e MainStage.html su GitHub Pages.

Next.js

Esegui successivo:

next dev

Vai a http://localhost:3000/sidepanel o http://localhost:3000/mainstage. Dovrebbero essere simili al deployment dell'esempio Next.js su GitHub in SidePanel.html e MainStage.html su GitHub Pages.

Esegui il deployment del componente aggiuntivo Meet

Configura il deployment del componente aggiuntivo seguendo le istruzioni su come implementare un componente aggiuntivo di Meet.

Esegui il sample

  1. Vai a Meet.

  2. Fai clic su Attività L&#39;icona delle attività..

  3. Nella sezione I tuoi componenti aggiuntivi, dovresti vedere i tuoi come componente aggiuntivo. Selezionalo per eseguire come componente aggiuntivo.

Aggiungere altre funzionalità

Ora che hai un riquadro laterale di base e uno stage principale, puoi iniziare ad aggiungere funzionalità per il tuo componente aggiuntivo:

Ti invitiamo a utilizzare gli componenti aggiuntivi di Meet di esempio su GitHub come riferimento per creare queste funzionalità.