Esta página describe cómo crear el panel lateral y las páginas de la etapa principal de una Complemento web de Meet.
El SDK de complementos de Google Meet está disponible como
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.7.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 la documentación de Recursos
resumen.
Indicar que se completó la carga del complemento
Meet muestra una pantalla de carga mientras se está cargando el complemento. Cuando de la sesión complementaria establecido, Meet trata esto como una señal del de que la carga finalizó y que el usuario pueden interactuar con el contenido de terceros.
Crea una página de panel lateral
El panel lateral muestra los complementos instalados que
que puedes seleccionar y usar.
Una vez que selecciones tu complemento, se cargará un iframe en el lateral.
la URL del panel
que se especifica en el manifiesto del complemento. Esta debería ser la
punto de entrada de tu app. Para acceder a la funcionalidad del SDK de complementos de Meet
En el panel lateral, debes crear una instancia de sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Este es un fragmento de código que muestra cómo iniciar una colaboración:
<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>
Crear una página de la etapa principal
La escena principal es el área de enfoque principal donde puedes mostrar el complemento.
si se necesita un espacio de trabajo más grande. La etapa principal se abre una vez que la colaboración
comienza el ciclo de vida. Para acceder a la funcionalidad del SDK de complementos de Meet en la página principal
puedes usar el objeto del cliente
MeetMainStageClient
,
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Este es un fragmento de código que muestra un ejemplo de un
página de la etapa (mainStagePage.html en el fragmento anterior) y que incluye una llamada
a getCollaborationStartingState en respuesta a un clic en un botón:
<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>