In diesem Leitfaden wird beschrieben, wie Sie ein Beispiel einrichten und ausführen Google Meet-Add-on.
Zielsetzungen
- Richten Sie das Beispiel ein.
- Führen Sie das Beispiel aus.
Vorbereitung
- Sie benötigen ein Google Workspace-Konto mit Zugriff auf Google Meet.
- Ein Google Cloud-Projekt
- Node.js und npm installiert haben.
Beispielanwendung einrichten
Führen Sie in Ihrem Arbeitsverzeichnis den folgenden Befehl aus, um die Projekt:
npm init
Installieren Sie Express.js in Ihrem Arbeitsverzeichnis:
npm install express --save
Installieren Sie das Web SDK für Meet-Add-ons:
npm install @googleworkspace/meet-addons --save
Erstellen Sie in Ihrem Arbeitsverzeichnis eine Datei mit dem Namen
index.js
und fügen Sie den folgenden Code: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);
Erstellen Sie in Ihrem Arbeitsverzeichnis eine Datei mit dem Namen
mainstage.html
und fügen Sie den folgenden Code:<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>
Erstellen Sie in Ihrem Arbeitsverzeichnis eine Datei mit dem Namen
sidepanel.html
und fügen Sie den folgenden Code:<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>
Ersetzen Sie sowohl für die Dateien
mainstage.html
als auch fürsidepanel.html
Folgendes:CLOUD_PROJECT_NUMBER
: Die Projektnummer Ihres Google Cloud-Projekt
Installieren Sie https-localhost in Ihrem Arbeitsverzeichnis. Paket:
npm install https-localhost --save
Führen Sie das Beispiel in Ihrem Arbeitsverzeichnis aus:
node index.js
Rufen Sie in Ihrem Browser
https://localhost:3000/mainstage.html
auf undhttps://localhost:3000/sidepanel.html
, um die Webseiten zu bestätigen.
Meet-Add-on erstellen
Richten Sie die Bereitstellung des Add-ons ein, indem Sie der Anleitung zum Erstellen eines Meet-Add-ons
Beispiel ausführen
Öffnen Sie Meet.
Klicken Sie auf Aktivitäten .
Im Abschnitt Meine Add-ons sollten Sie Folgendes sehen:
Google Meet Add-ons Quickstart
Wählen Sie sie aus, um den Add-on.