Questa guida descrive come configurare ed eseguire un esempio Componente aggiuntivo Google Meet.
Obiettivi
- Configura il Sample.
- Esegui l'esempio.
Prerequisiti
- Un account Google Workspace con accesso a Google Meet.
- Un progetto Google Cloud.
- Node.js e npm installato.
Configura l'esempio
Nella directory di lavoro, esegui questo comando per inizializzare progetto:
npm init
Nella directory di lavoro, installa Express.js:
npm install express --save
Installa l'SDK web dei componenti aggiuntivi di Meet:
npm install @googleworkspace/meet-addons --save
Nella directory di lavoro, crea un file denominato
index.js
e incolla codice seguente:const express = require('express'); const path = require('path'); var app = express(); app = require("https-localhost")(); app.use(express.static(path.join(__dirname, '/'))); app.use('/', express.static(__dirname + '/node_modules/@googleworkspace/meet-addons')); app.get('/sidepanel', function(req, res){ res.render(path.join(__dirname, 'sidepanel.html')); }); app.get('/mainstage', function(req, res){ res.render(path.join(__dirname, 'mainstage.html')); }); app.listen(3000);
Nella directory di lavoro, crea un file denominato
mainstage.html
e incolla codice seguente:<html style="width: 100%; height: 100%"> <head> <title>Main Stage Add On</title> <script src="meet.addons.js"></script> </head> <body style="width: 100%; height: 100%; margin: 0; background: white;"> <div style="display: flex; flex-direction: column; height: 100%"> <h1>Main Stage Add-on</h1> <div> <div> <button id="get-collaboration-starting-state"> getCollaborationStartingState </button> </div> <div id="receivedCollaborationStartingState" style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div> </div> </div> <script> let mainStageClient; async function init() { const session = await window.meet.addon.createAddonSession({ cloudProjectNumber: "CLOUD_PROJECT_NUMBER", }); console.log("Successfully constructed the add-on session."); const mainStageClient = await session.createMainStageClient(); console.log("Successfully constructed main stage client."); document .getElementById('get-collaboration-starting-state') .addEventListener( 'click', async () => { document.getElementById( 'receivedCollaborationStartingState').textContent = JSON.stringify( await mainStageClient.getCollaborationStartingState()); }); } document.body.onload = () => { init(); }; </script> </body> </html>
Nella directory di lavoro, crea un file denominato
sidepanel.html
e incolla codice seguente:<html style="width: 100%; height: 100%"> <head> <title>Side Panel Add-on</title> <script src="meet.addons.js"></script> </head> <body style="width: 100%; height: 100%; margin: 0"> <div style="display: flex; flex-direction: column; height: 100%"> <h1>Side Panel Add-on</h1> <div> <div> <button id="set-collaboration-starting-state"> setCollaborationStartingState </button> </div> <div> <input type="text" id="sidePanelIframeUrl" style="margin-left: 20px" value="https://localhost:3000/sidepanel.html" /> </div> <div> <input type="text" id="mainStageIframeUrl" style="margin-left: 20px" value="https://localhost:3000/mainstage.html" /> </div> <div> <input type="text" id="additionalData" style="margin-left: 20px" value="additional data" /> </div> </div> </div> <script> let sidePanelClient; async function init() { const session = await window.meet.addon.createAddonSession({ cloudProjectNumber: "CLOUD_PROJECT_NUMBER", }); console.log("Successfully constructed the add-on session."); sidePanelClient = await session.createSidePanelClient(); console.log("Successfully constructed side panel client."); document .getElementById('set-collaboration-starting-state') .addEventListener( 'click', async () => { const sidePanelIframeUrlInputElement = document.getElementById('sidePanelIframeUrl'); const mainStageIframeUrlInputElement = document.getElementById('mainStageIframeUrl'); const additionalDataInputElement = document.getElementById('additionalData'); await sidePanelClient.setCollaborationStartingState({ sidePanelUrl: sidePanelIframeUrlInputElement.value, mainStageUrl: mainStageIframeUrlInputElement.value, additionalData: additionalDataInputElement.value, }); }); } document.body.onload = () => { init(); }; </script> </body> </html>
Sostituisci quanto segue per i file
mainstage.html
esidepanel.html
:CLOUD_PROJECT_NUMBER
: il numero del tuo progetto Progetto Google Cloud
Nella directory di lavoro, installa https-localhost pacchetto:
npm install https-localhost --save
Nella directory di lavoro, esegui l'esempio:
node index.js
Nel browser, vai su
https://localhost:3000/mainstage.html
ehttps://localhost:3000/sidepanel.html
per verificare le pagine web.
Crea il componente aggiuntivo Meet
Per configurare il deployment del componente aggiuntivo, segui istruzioni su come creare un componente aggiuntivo di Meet.
Esegui l'esempio
Vai a Meet.
Fai clic su Attività .
Nella sezione I tuoi componenti aggiuntivi, dovresti vedere
Google Meet Add-ons Quickstart
. Selezionalo per eseguire come componente aggiuntivo.