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.
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
.
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:
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étodocreateAddonSession()
até que o conteúdo seja carregado inteiramente.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.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 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
.
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
A implantação de um complemento é um processo de duas etapas:
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.
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
Acesse o Meet.
Clique em Atividades .
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.