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 Google Meet de muestra mediante la creación de 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 completos de Meet creados con JavaScript básico o TypeScript de Next.js.

El escenario principal y el panel lateral del complemento web de Meet.

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 Meet Add-ons.

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 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 tienes que guardar el archivo de forma local.

Crea una página del 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, 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 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étodo createAddonSession() hasta que se haya terminado 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 brinda control sobre 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 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 del complemento, el cliente del panel lateral y comience la actividad cuando se haga clic en un botón con el ID 'start-activity':

Nota: Se 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 cuando se carga 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

Nota: En este ejemplo, se usa el enrutamiento de apps 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 enrutamiento.

Agrega un nuevo Page 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

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 "¡Hola, mundo!":

JS básico + 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. 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 el archivo SidePanel.html y el archivo 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.

Nota: En la consola de Herramientas para desarrolladores de Chrome, cuando se ejecuta de forma local, aparece un error que dice Missing required Meet SDK URL parameter: meet_sdk. Esto es esperable hasta que ejecutes la aplicación dentro de 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

Para configurar la implementación del complemento, sigue las instrucciones para implementar un complemento de Meet.

Ejecuta la muestra

1. Ve a Meet.

2. Haz clic en Actividades .

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 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 a través del uso compartido de pantalla

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