In questa pagina viene descritto come creare il riquadro laterale e le pagine dello stage principale di un Componente aggiuntivo web di Meet.
L'SDK dei componenti aggiuntivi di Google Meet è disponibile come
Bundle JavaScript di 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/0.7.0/meet.addons.js"></script>
La funzionalità dell'SDK dei componenti aggiuntivi di Meet è disponibile in window.meet.addon.
Per visualizzare la documentazione di riferimento, consulta la sezione Risorse
riassunto.
Indica che il caricamento del componente aggiuntivo è stato completato
Meet mostra una schermata di caricamento mentre è in corso il caricamento del componente aggiuntivo. Quando la sessione del componente aggiuntivo stabilito, Meet lo considera come un indicatore il componente aggiuntivo che il caricamento è terminato e che l'utente possono interagire con i contenuti di terze parti.
Creare una pagina in un riquadro laterale
Il riquadro laterale mostra i componenti aggiuntivi installati
selezionare e utilizzare.
Dopo aver selezionato il componente aggiuntivo, viene caricato un iframe
l'URL del riquadro
specificato nel file manifest del componente aggiuntivo. Deve essere
della tua app. Per accedere alla funzionalità dell'SDK dei componenti aggiuntivi di Meet
nel riquadro laterale, devi creare un'istanza per sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Ecco uno snippet di codice che mostra come avviare una collaborazione:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/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="start-collaboration">
startCollaboration
</button>
</div>
<div>
Collaboration Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Collaboration start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</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('start-collaboration')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startCollaboration({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Crea una pagina della fase principale
La schermata principale è l'area di interesse principale in cui puoi visualizzare il componente aggiuntivo
se è necessario uno spazio di lavoro più grande. La fase principale si apre una volta che la collaborazione
. Per accedere alla funzionalità dell'SDK dei componenti aggiuntivi di Meet nell'interfaccia principale
puoi utilizzare l'oggetto client
MeetMainStageClient
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Ecco uno snippet di codice che mostra un esempio di
pagina dello stage (mainStagePage.html nello snippet precedente) e include una chiamata
a getCollaborationStartingState in risposta a un clic su un pulsante:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/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">
Get Collaboration Starting State's Additional Property
</button>
</div>
<div id="receivedCollaborationStartingStateProperty"
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 () => {
const startingState =
await mainStageClient.getCollaborationStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedCollaborationStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>