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

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

O palco principal e o painel lateral do complemento da Web do Meet

Instalar e importar o SDK

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

npm (recomendado)

Se o projeto usa 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 importando a MeetAddonExport interface:

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

gstatic

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

Para usar o SDK de complementos do Meet, adicione a seguinte tag 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 pela MeetAddon interface em window.meet.addon.

Observação: se você estiver usando o TypeScript, também poderá 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 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 precisa ser o ponto de entrada do app e, no mínimo, fazer o seguinte:

1. Indicar que o carregamento do complemento foi concluído. O Meet mostra uma tela de carregamento enquanto o complemento está sendo carregado. Quando a sessão do complemento é estabelecida chamando o createAddonSession() método, o Meet trata isso como um sinal do complemento de que o carregamento terminou 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. Criar o cliente do painel lateral. Para acessar o SDK de complementos do Meet no painel lateral, é necessário instanciar uma MeetSidePanelClient interface. Isso oferece controle sobre a experiência principal do SDK de complementos do Meet.

3. Iniciar a atividade. Isso permite que outras pessoas participem do complemento e, opcionalmente, abre o complemento no palco 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 palco principal:

JS básico + 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 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 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 o main.js e expô-los em uma biblioteca. Recomendamos fazer isso por instalando o webpack e usando a opção library no seu 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 uma nova Page para mostrar o painel lateral. Essa página cria uma sessão de complemento e um cliente do 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 na nuvem do Google Cloud.

• MAIN_STAGE_URL: o URL do palco principal que você cria 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 um espaço de trabalho maior for necessário. O palco principal é aberto quando a atividade é iniciada. Para acessar os recursos do SDK de complementos do Meet no palco principal, use a interface MeetMainStageClient.

Importante: o complemento precisa chamar novamente o método createAddonSession() 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 um exemplo de uma página do palco principal que renderiza uma div personalizada para dizer "Hello, world!":

JS básico + Webpack

Adicione a seguinte função ao arquivo main.js que você já criou para que o cenário 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 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 uma Page para mostrar o palco principal. Essa página cria uma sessão de complemento e um cliente do 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 na nuvem 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. MainStage.html

Next.js

Execute o Next:

next dev

Navegue até http://localhost:3000/sidepanel ou http://localhost:3000/mainstage. Isso precisa ser igual à implantação da amostra do Next.js no GitHub em um SidePanel.html e MainStage.html nas páginas do GitHub.

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 o Meet 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, é necessário implantar o código deste guia de início rápido em um site de sua propriedade, usando a solução de implantação de sua preferência. Os complementos oficiais do Google Meet de amostra no GitHub são implantados usando um fluxo de trabalho do GitHub nas páginas do GitHub, mas também é possível usar ferramentas como o Firebase Hosting.

2. Depois que o aplicativo for implantado, configure a implantação do complemento seguindo as instruções em Implantar um complemento do Meet. Seguir esse guia de implantação cria o complemento final do Meet, que é um iframe no Meet do aplicativo implantado na etapa um.

Executar a amostra

1. Acesse o Meet.

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

3. Na seção Seus complementos, o complemento vai aparecer. Selecione-o para executar o complemento.

Adicionar mais recursos

Agora que você tem um painel lateral e um palco principal básicos, é possível 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 usar os complementos de exemplo do Meet no GitHub como referências para criar esses recursos.