En esta página, se describe cómo crear el panel lateral y las páginas de la etapa principal a fin de mostrar los complementos de Meet para la Web. Esto te permite administrar las actividades o tareas en las que otros participantes pueden colaborar dentro de Google Meet.
El SDK de complementos de Google Meet está disponible como un paquete de JavaScript de gstatic, un dominio que entrega contenido estático.
Para usar el SDK de complementos de Meet, agrega la siguiente etiqueta de secuencia de comandos a tu app:
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
La funcionalidad del SDK de complementos de Meet está disponible en window.meet.addon.
Para ver la documentación de referencia, consulta el Resumen de recursos.
Cómo crear una página de panel lateral
En el panel lateral, se muestran los complementos instalados actualmente que puedes seleccionar y usar. Para crear una instancia del panel lateral, puedes usar el objeto de cliente MeetSidePanelClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
A continuación, se muestra un fragmento de código que muestra un ejemplo de una página de panel lateral, que incluye la carga y descarga de la etapa principal:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/latest/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>
Cómo crear una página de la etapa principal
La etapa principal es el área que te permite mostrar el contenido del complemento seleccionado. Después de crear la página del panel lateral, puedes usar el objeto de cliente MeetMainStageClient para crear una instancia de la etapa principal:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Continúa con la creación de una página de la etapa principal a fin de usar los complementos de Meet para la Web. El siguiente fragmento de código es un ejemplo de una etapa principal, que incluye la carga y la descarga de la página del panel lateral:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/latest/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: "502196118369",
});
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>