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.

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.

npm (recomendado)

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. 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 a importação do exportação do pacote de compartilhamento de tela.

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.

Observação: se você estiver usando o TypeScript, também poderá extrair os tipos mais recentes de https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Basta salvar o arquivo localmente.

Criar uma página do painel lateral

O painel lateral mostra os complementos instalados que podem ser selecionados e usados. Depois de selecionar 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:

Observação: pressupõe-se que você tenha instalado o SDK dos complementos do Meet usando o 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 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

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

Adicione um novo Page para mostrar o painel lateral. Essa página cria uma sessão de complemento 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.

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 na fase principal.

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.

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, porque 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, você precisa implantar o código deste guia de início rápido em um site seu, usando a solução de implantação que preferir. Os complementos oficiais do Google Meet no GitHub (link em inglês) 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, será necessário configurar a implantação do complemento seguindo as instruções para implantar um complemento do Meet. O guia de implantação cria o complemento final do Meet, que é um iframe no Meet do aplicativo que você implantou na etapa 1.

Executar a amostra

1. Acesse o Meet.

2. Clique em 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:

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

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