Ce guide explique comment configurer et exécuter un exemple Module complémentaire Google Meet.
Objectifs
- Configurez l'exemple.
- Exécutez l'exemple.
Prérequis
- Un compte Google Workspace ayant accès à Google Meet
- un projet Google Cloud ;
- Node.js et npm installés.
Configurer l'exemple
Dans votre répertoire de travail, exécutez la commande suivante pour initialiser votre projet:
npm init
Dans votre répertoire de travail, installez Express.js:
npm install express --save
Installez le SDK Web des modules complémentaires Meet:
npm install @googleworkspace/meet-addons --save
Dans votre répertoire de travail, créez un fichier nommé
index.js
et collez la commande code suivant: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);
Dans votre répertoire de travail, créez un fichier nommé
mainstage.html
et collez la commande code suivant:<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>
Dans votre répertoire de travail, créez un fichier nommé
sidepanel.html
et collez la commande code suivant:<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>
Remplacez le code suivant pour les fichiers
mainstage.html
etsidepanel.html
:CLOUD_PROJECT_NUMBER
: numéro de votre projet Projet Google Cloud
Dans votre répertoire de travail, installez https-localhost package:
npm install https-localhost --save
Dans votre répertoire de travail, exécutez l'exemple:
node index.js
Dans votre navigateur, accédez à
https://localhost:3000/mainstage.html
, puishttps://localhost:3000/sidepanel.html
pour valider les pages Web.
Créer le module complémentaire Meet
Configurez le déploiement du module complémentaire en suivant les instructions des instructions pour créer un module complémentaire Meet.
Exécuter l'exemple
Accédez à Meet.
Cliquez sur Activités .
Dans la section Vos modules complémentaires, vous devriez voir
Google Meet Add-ons Quickstart
Sélectionnez-le pour exécuter un module complémentaire.