In questa pagina viene descritto come creare il riquadro laterale e le pagine dello stage principale per mostrare i componenti aggiuntivi di Meet per il web. In questo modo puoi gestire le attività o le attività in cui gli altri partecipanti possono collaborare all'interno di Google 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 il riepilogo delle risorse.
Indica che il caricamento del componente aggiuntivo è stato completato
Meet mostra una schermata di caricamento durante il caricamento del componente aggiuntivo. Quando la sessione del componente aggiuntivo è stabilita, Meet lo considera come un indicatore del componente aggiuntivo che indica che il caricamento è terminato e che l'utente può interagire con i contenuti di terze parti.
Creare una pagina in un riquadro laterale
Il riquadro laterale mostra i componenti aggiuntivi attualmente installati che puoi selezionare e utilizzare. Per creare un'istanza del riquadro laterale, puoi utilizzare l'oggetto client MeetSidePanelClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Di seguito è riportato uno snippet di codice che mostra un esempio di pagina del riquadro laterale, che include il caricamento e l'unload della schermata principale:
<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="set-collaboration-starting-state">
setCollaborationStartingState
</button>
</div>
<div>
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px"
value="https://your_side_panel_iframe.url" />
</div>
<div>
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px"
value="https://your_main_stage_iframe.url" />
</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>
Crea una pagina della fase principale
Lo stage principale è l'area in cui è possibile visualizzare i contenuti del componente aggiuntivo selezionato. Dopo aver creato la pagina del riquadro laterale, puoi utilizzare l'oggetto client MeetMainStageClient per creare un'istanza dello stage principale:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Procedi con la creazione di una pagina dello stage principale per utilizzare i componenti aggiuntivi di Meet per il web. Lo snippet di codice riportato di seguito è un esempio di fase principale, che include il caricamento e l'annullamento del caricamento della pagina del riquadro laterale:
<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">
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>