Guida rapida ai componenti aggiuntivi di Meet

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

Il palco principale e il riquadro laterale del componente aggiuntivo Meet Web.

Installare e importare l'SDK

Puoi accedere all'SDK utilizzando npm o gstatic.

npm (consigliato)

Se il tuo progetto utilizza npm, puoi seguire le istruzioni per il pacchetto npm dell'SDK per i componenti aggiuntivi di Meet.

Innanzitutto, installa il pacchetto npm:

npm install @googleworkspace/meet-addons

L'SDK per i componenti aggiuntivi di Meet è disponibile importando l'interfaccia MeetAddonExport:

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

Per gli utenti di TypeScript, le definizioni di TypeScript sono incluse nel modulo. Gli utenti di TypeScript devono impostare moduleResolution su "bundler" all'interno di tsconfig.json del progetto, in modo che la specifica "exports" di package.json consenta l'importazione dell'esportazione del pacchetto di condivisione dello schermo.

gstatic

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

Per utilizzare l'SDK dei componenti aggiuntivi di Meet, aggiungi il seguente tag script alla tua app:

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

L'SDK per i componenti aggiuntivi di Meet è disponibile tramite l'interfaccia MeetAddon nella sezione window.meet.addon.

Nota :se utilizzi TypeScript, puoi anche scaricare gli ultimi tipi da https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Salva il file localmente.

Crea una pagina del riquadro laterale

Il riquadro laterale mostra i componenti aggiuntivi installati che puoi selezionare e utilizzare. Una volta selezionato il componente aggiuntivo, un iframe carica l'URL del riquadro laterale che specifichi nel manifest del componente aggiuntivo. Questo dovrebbe essere il punto di ingresso della tua app e dovrebbe fare almeno le seguenti cose:

1. Indica che il caricamento del componente aggiuntivo è stato completato. Meet mostra una schermata di caricamento mentre il componente aggiuntivo viene caricato. Quando la sessione del componente aggiuntivo viene stabilita chiamando il metodo createAddonSession(), Meet lo considera un segnale del componente aggiuntivo che indica che il caricamento è terminato e che l'utente può interagire con i contenuti di terze parti. Il componente aggiuntivo non deve chiamare il metodo createAddonSession() finché il caricamento dei contenuti non è terminato.

2. Crea il client del riquadro laterale. Per accedere all'SDK dei componenti aggiuntivi di Meet nel riquadro laterale, devi creare un'istanza di un'interfaccia MeetSidePanelClient. In questo modo puoi controllare la tua esperienza principale con l'SDK di componenti aggiuntivi di Meet.

3. Avvia l'attività. In questo modo, altre persone possono unirsi al tuo componente aggiuntivo e, se vuoi, aprirlo nella schermata principale.

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

JS + Webpack di base

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

Nota: questo presuppone che tu abbia installato l'SDK dei componenti aggiuntivi di Meet utilizzando npm.

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 l'attività e chiama la funzione da 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 anche raggruppare l'SDK dei componenti aggiuntivi di Meet con il tuo main.js ed esporli 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

Nota :questo esempio utilizza il routing delle app Next.js per aggiungere una pagina a un'app Next.js. Per saperne di più sulla creazione della prima pagina in Next.js, consulta la documentazione ufficiale di Next.js sul routing.

Aggiungi un nuovo Page per visualizzare il riquadro laterale. Questa pagina crea un client del riquadro laterale e della sessione del componente aggiuntivo 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 del palco principale che crei nel passaggio successivo.

Creare una pagina del palco principale

Il palco principale è l'area di interesse principale in cui puoi visualizzare il componente aggiuntivo se è necessario uno spazio di lavoro più ampio. Il palco principale si apre all'inizio dell'attività. Per accedere alle funzionalità dell'SDK per i componenti aggiuntivi di Meet nella schermata principale, devi utilizzare l'interfaccia MeetMainStageClient.

Importante: tieni presente che il componente aggiuntivo deve chiamare di nuovo il metodo createAddonSession() una volta terminato il caricamento dei contenuti. In caso contrario, l'avvio del componente aggiuntivo nella schermata principale non riuscirà.

Il seguente esempio di codice mostra una pagina dello stage principale che esegue il rendering di un div personalizzato per dire "Hello, world!":

JS + Webpack di base

Aggiungi la seguente funzione al file main.js che hai già creato, in modo che il palco principale possa segnalare che il caricamento è terminato:

/**
 * 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 la nuova funzione initializeMainStage e mostra contenuti personalizzati "hello, world":

<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 il palco principale. Questa pagina crea un componente aggiuntivo e un client del riquadro laterale al caricamento e mostra 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 di progetto del tuo progetto Google Cloud.

Esegui il campione

Per eseguire l'app localmente:

JS + Webpack di base

Esegui webpack per raggruppare il file main.js insieme all'SDK per i componenti aggiuntivi di Meet:

npx webpack

Apri il file SidePanel.html e il file MainStage.html in qualsiasi browser. L'aspetto dovrebbe essere lo stesso dell'implementazione 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. Questi dovrebbero avere lo stesso aspetto dell'implementazione dell'esempio Next.js su GitHub in SidePanel.html e MainStage.html su GitHub Pages.

Nota :nella console Chrome DevTools quando viene eseguito localmente, viene visualizzato un errore che indica Missing required Meet SDK URL parameter: meet_sdk. Questo comportamento è previsto finché non esegui l'applicazione in Meet, in quanto Meet gestirà il passaggio di questo parametro URL. Per saperne di più sugli strumenti per sviluppatori, vedi Gestire gli strumenti per sviluppatori per i componenti aggiuntivi di Meet.

Distribuire il componente aggiuntivo Meet

Il deployment di un componente aggiuntivo è una procedura in due passaggi:

1. Innanzitutto, devi eseguire il deployment del codice di questa guida rapida su un sito web di tua proprietà utilizzando la soluzione di deployment che preferisci. I componenti aggiuntivi di esempio ufficiali di Google Meet su GitHub vengono implementati utilizzando un flusso di lavoro GitHub in GitHub Pages, ma puoi anche utilizzare strumenti come Firebase Hosting.

2. Una volta eseguito il deployment dell'applicazione, devi configurare il deployment del componente aggiuntivo seguendo le istruzioni per eseguire il deployment di un componente aggiuntivo di Meet. Seguendo questa guida al deployment viene creato il componente aggiuntivo Meet finale, che è un iframe all'interno di Meet dell'applicazione di cui hai eseguito il deployment nel passaggio 1.

Esegui il campione

1. Vai a Meet.

2. Fai clic sul pulsante degli strumenti per la riunione .

3. Nella sezione I tuoi componenti aggiuntivi dovresti vedere il tuo componente aggiuntivo. Selezionalo per eseguire il componente aggiuntivo.

Aggiungere altre funzionalità

Ora che hai un riquadro laterale e una schermata principale di base, puoi iniziare ad aggiungere altre funzionalità al tuo componente aggiuntivo:

• Collaborazione utilizzando un componente aggiuntivo di Meet
• Messaggi tra il palco principale e il riquadro laterale
• Promozione del componente aggiuntivo

Ti consigliamo di utilizzare i componenti aggiuntivi di Meet di esempio su GitHub come riferimento per la creazione di queste funzionalità.