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

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

A janela principal e o painel lateral do complemento do Meet para a Web.

Instalar e importar o SDK

Você pode acessar o SDK usando npm ou gstatic.

npm (recomendado)

Se o projeto usar o npm, siga as instruções do 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 estará 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. Os usuários do TypeScript precisam definir moduleResolution como "bundler" no tsconfig.json do projeto para que a especificação "exports" do package.json permita importar a exportação do pacote de compartilhamento de tela.

gstatic

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

Para usar o SDK de complementos do Meet, adicione a seguinte tag de script ao seu 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.

Observação: se você usa TypeScript, também é possível acessar os tipos mais recentes em https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Basta salvar o arquivo localmente.

Criar uma página de painel lateral

O painel lateral mostra os complementos instalados que você pode selecionar e usar. Depois que você seleciona um complemento, um iframe carrega o URL do painel lateral especificado no manifesto do complemento. Esse deve ser o ponto de entrada do app e precisa fazer pelo menos o seguinte:

1. Indicar 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. O complemento não deve chamar o método createAddonSession() até que o conteúdo termine de carregar.

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 sua principal experiência com o 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 a seguir mostra como a sessão cria um cliente do painel lateral e como o cliente do painel lateral inicia uma atividade no estágio principal:

Basic JS + Webpack

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

Observação: isso pressupõe que você instalou o SDK de complementos do Meet usando 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
            });
        });
}

Em um novo arquivo chamado SidePanel.html, defina o botão que inicia a atividade e chame a função do seu main.js no carregamento 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 é necessário agrupar o SDK de complementos do Meet com seu main.js e expor em uma biblioteca. Recomendamos fazer isso instalando o webpack e usando a opção library no arquivo webpack.config.js:

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

Next.js

Observação: este exemplo usa o roteamento de apps do Next.js para adicionar uma página a um app do Next.js. Para saber mais sobre como criar sua primeira página no Next.js, consulte a documentação oficial do Next.js sobre roteamento.

Adicione um novo Page para mostrar o painel lateral. Esta página cria uma sessão de complemento e um cliente de painel lateral ao carregar, 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 seu projeto do Google Cloud.

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

Criar uma página do palco principal

O palco principal é a área de foco principal em que você pode mostrar o complemento se precisar de um espaço de trabalho maior. 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.

Importante: o complemento precisa chamar o método createAddonSession() novamente quando o conteúdo terminar de carregar. Caso contrário, o complemento não será iniciado no palco principal.

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

Basic JS + Webpack

Adicione a seguinte função ao arquivo main.js que você já criou para que o estágio principal possa sinalizar que terminou de carregar:

/**
 * 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 mostra 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. Esta página cria uma sessão de complemento e um cliente de painel lateral ao carregar, e mostra conteúdo personalizado "Olá, 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>
        </>
    );
}

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

Executar a amostra

Para executar localmente, faça o seguinte:

Basic JS + 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 igual à implantação da amostra básica de JS no GitHub em um SidePanel.html e MainStage.html no GitHub Pages.

Next.js

Executar a seguir:

next dev

Acesse http://localhost:3000/sidepanel ou http://localhost:3000/mainstage. Elas devem ser iguais à implantação da amostra do Next.js no GitHub em um SidePanel.html e um MainStage.html no GitHub Pages.

Observação: no console do Chrome DevTools ao executar localmente, há um erro que diz Missing required Meet SDK URL parameter: meet_sdk. Isso é esperado até que você execute o aplicativo no Meet, já que ele vai processar a transmissão desse parâmetro de URL. Para mais informações sobre as ferramentas para desenvolvedores, consulte Gerenciar ferramentas para desenvolvedores de complementos do Meet.

Implantar o complemento do Meet

A implantação de um complemento é um processo de duas etapas:

1. Primeiro, implante o código deste guia de início rápido em um site de sua propriedade usando a solução de implantação que preferir. Os complementos de exemplo oficiais do Google Meet no GitHub são implantados usando um fluxo de trabalho do GitHub no GitHub Pages, mas você também pode usar ferramentas como o Firebase Hosting.

2. Depois que o aplicativo for implantado, siga as instruções para implantar um complemento do Meet. Seguir esse guia de implantação cria o complemento final do Meet, que é um iframe dentro do Meet do aplicativo implantado na primeira etapa.

Executar a amostra

1. Acesse o Meet.

2. Clique no botão de ferramentas da reunião .

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

Adicionar mais recursos

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

• Colaboração usando um complemento do Meet
• Mensagens entre o palco principal e o painel lateral
• Promoção do complemento

Recomendamos que você use os complementos de exemplo do Meet no GitHub como referências para criar esses recursos.