En esta guía, se describe cómo configurar y ejecutar un complemento de Google Meet de muestra mediante la creación de una etapa principal y un panel lateral. Los ejemplos de “Hello World” de esta página también están disponibles en GitHub como complementos completos de Meet compilados con JavaScript básico o Next.js TypeScript.
Instala y, luego, importa el SDK
Puedes acceder al SDK con npm o gstatic.
npm (recomendado)
Si tu proyecto usa npm, puedes seguir las instrucciones del paquete npm del SDK de complementos de Meet.
Primero, instala el paquete npm:
npm install @googleworkspace/meet-addons
Luego, el SDK de complementos de Meet estará disponible si importas la interfaz MeetAddonExport:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
En el caso de los usuarios de TypeScript, las definiciones de TypeScript se empaquetan con el módulo.
gstatic
El SDK de complementos de Google Meet está disponible como un paquete de JavaScript desde 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.1.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.
Crea una página de panel lateral
En el panel lateral, se muestran los complementos instalados que puedes seleccionar y usar. Una vez que selecciones el complemento, un iframe cargará la URL del panel lateral que especificaste en el manifiesto del complemento. Este debe ser el punto de entrada de tu app y, como mínimo, debería hacer lo siguiente:
Indica que se completó la carga del complemento. Meet muestra una pantalla de carga mientras se carga el complemento. Cuando se establece la sesión del complemento llamando al método
createAddonSession(), Meet lo trata como una señal del complemento de que finalizó la carga y que el usuario puede interactuar con el contenido de terceros. Tu complemento no debe llamar al métodocreateAddonSession()hasta que se termine de cargar el contenido.Crea el cliente del panel lateral. Para acceder al SDK de complementos de Meet en el panel lateral, debes crear una instancia de una interfaz
MeetSidePanelClient. Esto te brinda control sobre tu experiencia principal con el SDK de complementos de Meet.Inicia la actividad. Esto permite que otras personas se unan a tu complemento y, de manera opcional, lo abren en el escenario principal.
En la siguiente muestra de código, se muestra cómo la sesión crea un cliente de panel lateral y cómo este inicia una actividad en el escenario principal:
JS básico + Webpack
En un archivo nuevo llamado main.js, define una función que cree una sesión de complemento, el cliente del panel lateral y, luego, inicie la actividad cuando se haga clic en un botón con el ID 'start-activity':
import { meet } from '@googleworkspace/meet-addons/meet.addons';
const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';
/**
* Prepares the Add-on Side Panel Client, and adds an event to launch the
* activity in the main stage when the main button is clicked.
*/
export async function setUpAddon() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
const sidePanelClient = await session.createSidePanelClient();
document
.getElementById('start-activity')
.addEventListener('click', async () => {
await sidePanelClient.startActivity({
mainStageUrl: MAIN_STAGE_URL
});
});
}
En un archivo nuevo llamado SidePanel.html, define el botón que inicia la
actividad y llama a la función desde tu main.js cuando se cargue el documento:
<html>
<head>
<title>Meet Add-on Side Panel</title>
<script src="./main.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div>This is the Add-on Side Panel. Only you can see this.</div>
<button id="start-activity">Launch Activity in Main Stage.</button>
<script>
document.body.onload = () => {
// Library name (`helloWorld`) is defined in the webpack config.
// The function (`setUpAddon`) is defined in main.js.
helloWorld.setUpAddon();
};
</script>
</body>
</html>
También deberás agrupar el SDK de complementos de Meet con tu main.js y exponerlo en una biblioteca. Te recomendamos que lo hagas
instalando webpack y usando la opción library en tu archivo webpack.config.js:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
Next.js
Agrega un Page nuevo para mostrar el panel lateral. Esta página crea una sesión del complemento y un cliente del panel lateral cuando se carga, y comienza la actividad cuando se hace clic en un botón:
'use client';
import { useEffect, useState } from 'react';
import {
meet,
MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();
// Launches the main stage when the main button is clicked.
async function startActivity(e: unknown) {
if (!sidePanelClient) {
throw new Error('Side Panel is not yet initialized!');
}
await sidePanelClient.startActivity({
mainStageUrl: 'MAIN_STAGE_URL'
});
}
/**
* Prepares the Add-on Side Panel Client.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
setSidePanelClient(await session.createSidePanelClient());
})();
}, []);
return (
<>
<div>
This is the Add-on Side Panel. Only you can see this.
</div>
<button onClick={startActivity}>
Launch Activity in Main Stage.
</button>
</>
);
}
Reemplaza lo siguiente:
CLOUD_PROJECT_NUMBER: Es el número de proyecto de tu proyecto de Google Cloud.
MAIN_STAGE_URL: Es la URL de la etapa principal que creas en el siguiente paso.
Crea una página de escenario principal
La etapa principal es el área de enfoque principal en la que puedes mostrar el complemento si se necesita un espacio de trabajo más grande. El escenario principal se abre una vez que comienza la actividad. Para acceder a las funciones del SDK de complementos de Meet en el escenario principal, debes usar la interfaz MeetMainStageClient.
En el siguiente ejemplo de código, se muestra una página de escenario principal que renderiza un div personalizado para decir "¡Hola, mundo!":
JS básico + Webpack
Agrega la siguiente función al archivo main.js que ya creaste para que la etapa principal pueda indicar que terminó de cargarse:
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on has
* successfully launched in the main stage.
*/
export async function initializeMainStage() {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: CLOUD_PROJECT_NUMBER,
});
await session.createMainStageClient();
}
Luego, agrega un nuevo archivo MainStage.html, que llama a la nueva función initializeMainStage y muestra contenido personalizado de “Hello World”:
<html>
<body style="width: 100%; height: 100%; margin: 0">
<div>
This is the Add-on Main Stage. Everyone in the call can see this.
</div>
<div>Hello, world!</div>
<script>
document.body.onload = () => {
helloWorld.initializeMainStage();
};
</script>
</body>
</html>
Next.js
Agrega un Page para mostrar la etapa principal. Esta página crea una sesión del complemento y un cliente del panel lateral durante la carga, y muestra contenido personalizado de "Hello World":
'use client';
import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';
export default function Page() {
/**
* Prepares the Add-on Main Stage Client, which signals that the add-on
* has successfully launched in the main stage.
*/
useEffect(() => {
(async () => {
const session = await meet.addon.createAddonSession({
cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
});
await session.createMainStageClient();
})();
}, []);
return (
<>
<div>
This is the Add-on Main Stage.
Everyone in the call can see this.
</div>
<div>Hello, world!</div>
</>
);
}
Reemplaza CLOUD_PROJECT_NUMBER por el número de proyecto de Google Cloud.
Ejecuta la muestra
Para ejecutar de forma local, haz lo siguiente:
JS básico + Webpack
Ejecuta webpack para agrupar tu archivo main.js junto con el
SDK de complementos de Meet:
npx webpack
Abre los archivos SidePanel.html y MainStage.html en cualquier navegador.
Debería verse igual que la implementación del ejemplo básico de JS en GitHub en SidePanel.html y MainStage.html en GitHub Pages.
Next.js
Ejecutar a continuación:
next dev
Navega a http://localhost:3000/sidepanel o http://localhost:3000/mainstage. Deberían verse igual que la
implementación del ejemplo de Next.js en GitHub
en un SidePanel.html
y un MainStage.html
en GitHub Pages.
Implementa el complemento de Meet
Para configurar la implementación del complemento, sigue las instrucciones para implementar un complemento de Meet.
Ejecuta la muestra
Ve a Meet.
Haz clic en Actividades
.En la sección Tus complementos, deberías ver tu complemento. Selecciónalo para ejecutar el complemento.
Cómo agregar más funciones
Ahora que tienes un panel lateral y un escenario principal básicos, puedes comenzar a agregar otras funciones a tu complemento:
- Colaboración con un complemento de Meet
- Mensajes entre el escenario principal y el panel lateral
- Promoción del complemento mediante la posibilidad de compartir pantalla
Te recomendamos que uses los complementos de Meet de ejemplo en GitHub como referencias para compilar estas funciones.