Esta página describe cómo crear el panel lateral y las páginas de la etapa principal de una Complemento web de Meet.
Instalar e importar el SDK
Puedes acceder al SDK mediante npm o gstatic.
npm (recomendado)
Si tu proyecto utiliza npm, puedes seguir las instrucciones para la Paquete de Administración de socios de red del SDK de complementos de Meet.
Primero, instala el paquete npm:
npm install @googleworkspace/meet-addons
Luego, podrás acceder al SDK de complementos de Meet importando
MeetAddonExport
:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
Para los usuarios de TypeScript, sus definiciones se empaquetan con el módulo.
gstatic
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/1.0.0/meet.addons.js"></script>
El SDK de complementos de Meet está disponible a través de la interfaz de MeetAddon en window.meet.addon.
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.createSidePanelClient();
Reemplaza CLOUD_PROJECT_NUMBER por el número de proyecto de tu proyecto de Google Cloud.
A continuación, se incluye un fragmento de código que muestra cómo iniciar una actividad:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity">
startActivity
</button>
</div>
<div>
Activity 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>
Activity 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-activity')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startActivity({
// 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>
Reemplaza CLOUD_PROJECT_NUMBER por el número de proyecto de tu proyecto de Google Cloud.
Crear una página de la etapa principal
La escena principal es el área de enfoque principal donde puedes mostrar los
o un complemento si se necesita un espacio de trabajo más grande. El principal
se abre una vez que comienza la actividad. Para acceder al SDK de complementos de Meet, sigue estos pasos:
de inicio de la etapa principal, puedes usar el objeto
MeetMainStageClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Reemplaza CLOUD_PROJECT_NUMBER por el número de proyecto de tu proyecto de Google Cloud.
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 getActivityStartingState 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/1.0.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-activity-starting-state">
Get Activity Starting State's Additional Property
</button>
</div>
<div id="receivedActivityStartingStateProperty"
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-activity-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getActivityStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedActivityStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Reemplaza CLOUD_PROJECT_NUMBER por el número de proyecto de tu proyecto de Google Cloud.