Guía de inicio rápido de los complementos de Meet

En esta guía, se describe cómo configurar y ejecutar un complemento de muestra de Google Meet creando un escenario principal y un panel lateral. Los ejemplos de "Hello World" de esta página también están disponibles en GitHub como complementos de Meet completos creados con JavaScript básico o Next.js TypeScript.

La escena principal y el panel lateral del complemento de Meet para la Web.

Instala e importa el SDK

Puedes acceder al SDK con npm o gstatic.

npm (recomendado)

Si tu proyecto usa npm, puedes seguir las instrucciones para el paquete de npm del SDK de complementos de Meet.

Primero, instala el paquete de 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. Los usuarios de TypeScript deben establecer moduleResolution en "bundler" dentro del tsconfig.json del proyecto para que la especificación "exports" de package.json permita importar la exportación del paquete de uso compartido de pantalla.

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 MeetAddon en window.meet.addon.

Nota: Si usas TypeScript, también puedes obtener los tipos más recientes de https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Solo guarda el archivo de forma local.

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 especifiques en el manifiesto del complemento. Este debe ser el punto de entrada de tu app y, como mínimo, debe hacer lo siguiente:

1. 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 un indicador del complemento de que finalizó la carga y de que el usuario puede interactuar con el contenido de terceros. Tu complemento no debe llamar al método createAddonSession() hasta que se termine de cargar el contenido.

2. 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 permite controlar tu experiencia principal con el SDK de complementos de Meet.

3. Inicia la actividad. Esto permite que otras personas se unan a tu complemento y, de manera opcional, lo abre en la escena principal.

En el siguiente ejemplo de código, se muestra cómo la sesión crea un cliente del panel lateral y cómo el cliente del panel lateral inicia una actividad en el escenario principal:

Información básica de JS + 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 que inicie la actividad cuando se haga clic en un botón con el ID 'start-activity':

Nota: Esto supone que instalaste el SDK de complementos de Meet con npm.

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 en la carga del 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 empaquetar el SDK de complementos de Meet con tu main.js y exponerlos 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

Nota: En este ejemplo, se usa el enrutamiento de la app de Next.js para agregar una página a una app de Next.js. Para obtener más información sobre cómo compilar tu primera página en Next.js, consulta la documentación oficial de Next.js sobre el enrutamiento.

Agrega un nuevo Page para mostrar el panel lateral. Esta página crea un cliente de panel lateral y sesión de complemento durante la 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 tu proyecto de Google Cloud.

• MAIN_STAGE_URL: Es la URL del escenario principal que crearás en el siguiente paso.

Crea una página de escenario principal

El escenario 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.

Importante: Ten en cuenta que tu complemento debe volver a llamar al método createAddonSession() una vez que se haya terminado de cargar el contenido. De lo contrario, el complemento no se iniciará en el escenario principal.

En el siguiente ejemplo de código, se muestra una página de escenario principal que renderiza un div personalizado para decir "Hello, world!":

Información básica de JS + Webpack

Agrega la siguiente función al archivo main.js que ya creaste para que el escenario 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 el escenario principal. En esta página, se crea un cliente de sesión del complemento y panel lateral durante la carga, y se muestra contenido personalizado de "Hola, mundo":

'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 tu proyecto de Google Cloud.

Ejecuta la muestra

Para ejecutar de forma local, haz lo siguiente:

Información básica de JS + 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 de la muestra básica 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 SidePanel.html y MainStage.html en GitHub Pages.

Nota: En la consola de Herramientas para desarrolladores de Chrome cuando se ejecuta de forma local, hay un error que dice Missing required Meet SDK URL parameter: meet_sdk. Esto es normal hasta que ejecutes la aplicación en Meet, ya que Meet se encargará de pasar este parámetro de URL. Para obtener más información sobre las herramientas para desarrolladores, consulta Cómo administrar las herramientas para desarrolladores de los complementos de Meet.

Implementa el complemento de Meet

La implementación de un complemento es un proceso de dos pasos:

1. Primero, debes implementar el código de esta guía de inicio rápido en un sitio web de tu propiedad con la solución de implementación que prefieras. Los complementos de ejemplo oficiales de Google Meet en GitHub se implementan con un flujo de trabajo de GitHub en GitHub Pages, pero también puedes usar herramientas como Firebase Hosting.

2. Una vez que se implemente tu aplicación, debes configurar la implementación del complemento siguiendo las instrucciones para implementar un complemento de Meet. Si sigues esa guía de implementación, se creará el complemento final de Meet, que es un iframe dentro de Meet de la aplicación que implementaste en el primer paso.

Ejecuta la muestra

1. Ve a Meet.

2. Haz clic en el botón de herramientas de la reunión .

3. 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 una escena 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

Te recomendamos que uses los complementos de Meet de ejemplo en GitHub como referencia para desarrollar estas funciones.