Questa guida descrive come configurare ed eseguire un componente aggiuntivo di Google Meet di esempio creando uno stage 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.
Installa e importa 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 SDK dei componenti aggiuntivi di Meet.
Installa innanzitutto 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 alla tua 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. Dopo aver selezionato il componente aggiuntivo, un iframe carica l'URL del riquadro laterale che specifichi nel manifest del componente aggiuntivo. Questo deve essere il punto di contatto della tua app e deve almeno svolgere le seguenti operazioni:
Indica che il caricamento del componente aggiuntivo è stato completato. Meet mostra una schermata di caricamento durante il caricamento del plug-in. Quando la sessione del plug-in viene stabilita chiamando il metodo
createAddonSession(), Meet lo interpreta come un indicatore del plug-in 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 metodocreateAddonSession()finché i contenuti non sono stati caricati.Crea il client del riquadro laterale. Per accedere all'SDK dei componenti aggiuntivi di Meet nel riquadro laterale, devi creare un'istanza per un'interfaccia
MeetSidePanelClient. In questo modo avrai il controllo sulla tua esperienza principale con l'SDK dei componenti aggiuntivi di Meet.Avvia l'attività. In questo modo altri utenti possono partecipare al componente aggiuntivo e, facoltativamente, viene aperto 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 aggiuntiva, il client del riquadro laterale, e avvia 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 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 includere l'SDK di Meet Add-ons nel 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
Aggiungi un nuovo 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
Il palco principale è l'area di messa a fuoco principale in cui puoi visualizzare il plug-in se è necessario uno spazio di lavoro più grande. La fase principale si apre all'avvio dell'attività. Per accedere alle funzionalità dell'SDK di Meet Add-ons nella fase principale, devi utilizzare l'interfaccia MeetMainStageClient.
Il seguente esempio di codice mostra una pagina della fase 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 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();
}
Aggiungi un nuovo file MainStage.html che chiami la nuova funzione initializeMainStage e mostra contenuti personalizzati di "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 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 Google Cloud.
Esegui il sample
Per eseguire l'app localmente:
JS + Webpack di base
Esegui webpack per eseguire il bundling del file main.js con l'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 eseguire il deployment di un componente aggiuntivo Meet.
Esegui il sample
Vai a Meet.
Fai clic su Attività
.Nella sezione I tuoi componenti aggiuntivi, dovresti vedere il componente aggiuntivo. Selezionalo per eseguire il plug-in.
Aggiungere altre funzionalità
Ora che hai un riquadro laterale di base e la schermata principale, puoi iniziare ad aggiungere altre funzionalità al tuo componente aggiuntivo:
- Collaborazione con un componente aggiuntivo di Meet
- Messaggi tra la scena principale e il riquadro laterale
- Promozione del componente aggiuntivo tramite la condivisione schermo
Ti invitiamo a utilizzare gli componenti aggiuntivi di Meet di esempio su GitHub come riferimento per creare queste funzionalità.