Guia de início rápido dos complementos do Meet

Neste guia, descrevemos como configurar e executar um complemento de exemplo do Google Meet criando um palco principal e um painel lateral. Os exemplos "Hello World" nesta página também estão disponíveis no GitHub como complementos do Meet criados com JavaScript básico ou TypeScript do Next.js.

Painel lateral e janela principal do SDK de complementos do Meet.
O palco principal e o painel lateral do complemento do Meet para a Web.

Instalar e importar o SDK

É possível acessar o SDK usando o npm ou o gstatic.

Se o projeto usar o npm, siga as instruções para o pacote npm do SDK de complementos do Meet.

Primeiro, instale o pacote npm:

npm install @googleworkspace/meet-addons

Em seguida, o SDK de complementos do Meet fica disponível ao importar a interface MeetAddonExport:

import {meet} from '@googleworkspace/meet-addons/meet.addons';

Para usuários do TypeScript, as definições do TypeScript são empacotadas com o módulo.

gstatic

O SDK de complementos do Google Meet está disponível como um pacote JavaScript de gstatic, um domínio que serve conteúdo estático.

Para usar o SDK de complementos do Meet, adicione a seguinte tag de script ao app:

<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>

O SDK de complementos do Meet está disponível na interface MeetAddon em window.meet.addon.

Criar uma página do painel lateral

O painel lateral mostra os complementos instalados que podem ser selecionados e usados. Depois que você seleciona o complemento, um iFrame carrega o URL do painel lateral que você especifica no manifesto do complemento. Esse é o ponto de entrada do app e precisa fazer, no mínimo, o seguinte:

  1. Indica que o carregamento do complemento foi concluído. O Meet mostra uma tela de carregamento enquanto o complemento é carregado. Quando a sessão do complemento é estabelecida chamando o método createAddonSession(), o Meet trata isso como um sinal do complemento de que o carregamento foi concluído e que o usuário pode interagir com o conteúdo de terceiros. Seu complemento não deve chamar o método createAddonSession() até que o conteúdo seja carregado inteiramente.

  2. Crie o cliente do painel lateral. Para acessar o SDK de complementos do Meet no painel lateral, é necessário instanciar uma interface MeetSidePanelClient. Isso oferece controle sobre a experiência principal do SDK de complementos do Meet.

  3. Inicie a atividade. Isso permite que outras pessoas participem do seu complemento e, opcionalmente, abre o complemento na janela principal.

O exemplo de código abaixo mostra como a sessão cria um cliente de painel lateral e como o cliente de painel lateral inicia uma atividade no palco principal:

JS básico + Webpack

Em um novo arquivo chamado main.js, defina uma função que crie uma sessão de complemento, o cliente do painel lateral, e inicie a atividade quando um botão com o ID 'start-activity' for clicado:

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
            });
        });
}

Em um novo arquivo chamado SidePanel.html, defina o botão que inicia a atividade e chame a função do main.js na carga do 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>

Também será necessário agrupar o SDK dos complementos do Meet com o main.js e expô-los em uma biblioteca. Recomendamos instalar o webpack e usar a opção library no arquivo webpack.config.js:

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

Adicione um novo Page para mostrar o painel lateral. Essa página cria uma sessão de complementos e um cliente de painel lateral no carregamento e inicia a atividade quando um botão é clicado:

'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>
        </>
    );
}

Substitua:

  • CLOUD_PROJECT_NUMBER: o número do projeto do Google Cloud.

  • MAIN_STAGE_URL: o URL da fase principal que você vai criar na próxima etapa.

Criar uma página de palco principal

O palco principal é a área de foco principal em que você pode mostrar o complemento se um espaço de trabalho maior for necessário. O palco principal é aberto quando a atividade começa. Para acessar os recursos do SDK de complementos do Meet no palco principal, use a interface MeetMainStageClient.

O exemplo de código a seguir mostra uma página de estágio principal que renderiza um div personalizado para dizer "Hello, world!":

JS básico + Webpack

Adicione a função a seguir ao arquivo main.js que você já criou para que o estágio principal possa sinalizar que o carregamento foi concluído:

/**
 * 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();
}

Em seguida, adicione um novo arquivo MainStage.html, que chama a nova função initializeMainStage e exibe o conteúdo personalizado "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

Adicione um Page para mostrar o palco principal. Essa página cria uma sessão de complemento e um cliente de painel lateral no carregamento e mostra o conteúdo personalizado "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>
        </>
    );
}

Substitua CLOUD_PROJECT_NUMBER pelo número do projeto do Google Cloud.

Executar a amostra

Para executar localmente, faça o seguinte:

JS básico + Webpack

Execute o webpack para agrupar o arquivo main.js com o SDK de complementos do Meet:

npx webpack

Abra os arquivos SidePanel.html e MainStage.html em qualquer navegador. Isso deve ser semelhante à implantação do exemplo básico de JS no GitHub para um SidePanel.html e MainStage.html nas páginas do GitHub.

Next.js

Executar em seguida:

next dev

Navegue até http://localhost:3000/sidepanel ou http://localhost:3000/mainstage. Elas devem ser semelhantes à implantação do exemplo de Next.js no GitHub em um SidePanel.html e MainStage.html no GitHub Pages.

Implantar o complemento do Meet

Configure a implantação do complemento seguindo as instruções sobre como Implantar um complemento do Meet.

Executar a amostra

  1. Acesse o Meet.

  2. Clique em Atividades O ícone de atividades..

  3. Na seção Seus complementos, você vai encontrar o complemento. Selecione para executar o complemento.

Adicionar mais recursos

Agora que você tem um painel lateral básico e uma tela principal, pode começar a adicionar outros recursos ao complemento:

Recomendamos o uso dos complementos do Meet de exemplo no GitHub como referência para criar esses recursos.