En esta página, se describe cómo crear el panel lateral y las páginas de la etapa principal para mostrar los complementos de Meet para la Web. Esto te permite administrar las actividades o tareas en las que otros participantes pueden colaborar en 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.
Indicar que se completó la carga del complemento
Meet muestra una pantalla mientras se carga el complemento. Cuando se establece la sesión del complemento, Meet la trata como una señal del complemento que indica que finalizó la carga y que el usuario puede interactuar con el contenido de terceros.
Crea 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 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 del panel lateral, que incluye la carga y la 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>
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 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 cargar y descargar 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: "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>