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. El "Hello World" ejemplos de esta página también están disponibles en GitHub, ya que Complementos de Meet compilados con JavaScript básico o Next.js TypeScript.

La plataforma principal y el panel lateral de la versión web de Meet Complemento.

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, el SDK de complementos de Meet estará disponible si importas la interfaz 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 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.

Nota: Si usas TypeScript, también puedes tomar 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

El panel lateral muestra los complementos instalados que 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 el valor sesión complementaria se establece llamando a createAddonSession() método, Meet lo trata como una señal del de que la carga finalizó y que el usuario pueden interactuar con el contenido de terceros. Tu complemento No se debe llamar al método createAddonSession() hasta que termine tu contenido. cargando.

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 el SDK principal de complementos de Meet una experiencia fluida a los desarrolladores.

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 ve cómo la sesión crea un cliente de panel lateral. Cómo el cliente del panel lateral inicia una actividad en la etapa 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 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 antes de instalando webpack y usando la opción library en el 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 saber más sobre cómo crear tu primera página en Next.js, consulta el Documentación de Next.js sobre el enrutamiento.

Agrega un nuevo Page para mostrar el panel lateral. Esta página crea un de la sesión del complemento y del panel lateral cuando se carga, y inicia 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.

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

El siguiente ejemplo de código muestra un ejemplo de una página de etapa principal que representa una div personalizado para que diga "Hello, World!":

Aspectos básicos de JS y Webpack

Agrega la siguiente función al archivo main.js que ya creaste, de modo que que la etapa principal puede 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 al nuevo Función initializeMainStage que muestra “Hello, World” personalizados contenido:

<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 un de la sesión del complemento y del panel lateral cuando se carga, y muestra el mensaje personalizado “hello, world” contenido:

'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 tu 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 de la muestra básica de JS en GitHub. a un elemento SidePanel.html y MainStage.html en páginas de GitHub.

Next.js

Ejecutar a continuación:

next dev

Navega a http://localhost:3000/sidepanel o http://localhost:3000/mainstage. Estos deben tener el mismo aspecto que el implementación de la muestra de Next.js en GitHub a un elemento SidePanel.html y MainStage.html en páginas de GitHub.

Nota: En las Herramientas para desarrolladores de Chrome cuando se ejecuta de forma local, se produce 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 se encargará de pasar los URL. Si quieres obtener más información sobre las herramientas para desarrolladores, consulta Administra 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 básico y una etapa principal, puedes comenzar a agregar 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.