W tym przewodniku opisano, jak skonfigurować i uruchomić przykładowe rozszerzenie Google Meet, tworząc scenę główną i panel boczny. Przykłady „Hello World” na tej stronie są też dostępne na GitHubie jako kompletne dodatki do Meet utworzone za pomocą podstawowego JavaScriptu lub TypeScript Next.js.
Instalowanie i importowanie pakietu SDK
Dostęp do pakietu SDK możesz uzyskać za pomocą npm lub gstatic.
npm (zalecane)
Jeśli Twój projekt korzysta z npm, możesz postępować zgodnie z instrukcjami dotyczącymi pakietu npm pakietu SDK dodatków Meet.
Najpierw zainstaluj pakiet npm:
npm install @googleworkspace/meet-addons
Następnie pakiet SDK dodatków do Meet będzie dostępny po zaimportowaniu interfejsu MeetAddonExport
:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
W przypadku użytkowników TypeScript definicje TypeScript są pakowane z modułem.
gstatic
Pakiet SDK dodatków Google Meet jest dostępny jako pakiet JavaScripta z gstatic
, domeny, która udostępnia treści statyczne.
Aby korzystać z pakietu SDK dodatków Meet, dodaj do aplikacji ten tag skryptu:
<script src="https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.js"></script>
Pakiet SDK dodatków Meet jest dostępny w interfejsie MeetAddon
w sekcji window.meet.addon
.
Tworzenie strony panelu bocznego
W panelu bocznym wyświetlają się zainstalowane dodatki, które możesz wybrać i użyć. Po wybraniu dodatku w ramce iframe wczytuje się adres URL panelu bocznego, który określasz w pliku manifestu dodatku. Powinien to być punkt wejścia do aplikacji, który umożliwia co najmniej:
Wskazuje, że wczytywanie dodatku zostało zakończone. Podczas wczytywania dodatku Meet wyświetla ekran wczytywania. Gdy sesja dodatku zostanie utworzona przez wywołanie metody
createAddonSession
(), Meet traktuje to jako sygnał od dodatku, że wczytywanie zostało zakończone i że użytkownik może wchodzić w interakcje z treściami innej firmy. Twój dodatek nie powinien wywoływać metodycreateAddonSession()
, dopóki treści nie zostaną w pełni załadowane.Utwórz klienta panelu bocznego. Aby uzyskać dostęp do pakietu SDK dodatków Meet w panelu bocznym, musisz utworzyć instancję interfejsu
MeetSidePanelClient
. Umożliwia to kontrolowanie głównego interfejsu SDK dodatków do Meet.Rozpocznij aktywność. Umożliwia to innym dołączanie do Twojego dodatku i opcjonalnie otwiera go na głównym etapie.
Poniższy przykładowy kod pokazuje, jak sesja tworzy klienta panelu bocznego i jak klient panelu bocznego uruchamia aktywność na głównym etapie:
Podstawowy JS + Webpack
W nowym pliku o nazwie main.js
zdefiniuj funkcję, która tworzy sesję dodatku, klienta panelu bocznego i rozpoczyna aktywność po kliknięciu przycisku o identyfikatorze 'start-activity'
:
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
});
});
}
W nowym pliku o nazwie SidePanel.html
zdefiniuj przycisk, który uruchamia aktywność, i wywołaj funkcję z pliku main.js
podczas wczytywania dokumentu:
<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>
Musisz też dołączyć pakiet SDK dodatków Meet do aplikacji main.js
i udostępnić go w bibliotece. Zalecamy
zainstalowanie webpacka i użycie opcji library
w pliku webpack.config.js
:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
Next.js
Dodaj nowy element Page
, aby wyświetlić panel boczny. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz uruchamia aktywność po kliknięciu przycisku:
'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>
</>
);
}
Zastąp następujące elementy:
CLOUD_PROJECT_NUMBER: numer projektu Google Cloud.
MAIN_STAGE_URL: adres URL głównej wersji roboczej, który utworzysz w następnym kroku.
Tworzenie strony głównej
Główna scena to główny obszar, na którym możesz wyświetlać dodatki, jeśli potrzebujesz większej przestrzeni roboczej. Główna scena otworzy się, gdy rozpocznie się aktywność. Aby uzyskać dostęp do funkcji pakietu SDK dodatków Meet w głównej części ekranu, musisz użyć interfejsu MeetMainStageClient
.
Poniższy przykładowy kod pokazuje stronę główną, która renderuje niestandardowy element div
, aby wyświetlić komunikat „Hello, world!”:
Podstawowy JS + Webpack
Do utworzonego już pliku main.js
dodaj tę funkcję, aby etap główny mógł sygnalizować, że wczytanie zostało zakończone:
/**
* 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();
}
Następnie dodaj nowy plik MainStage.html
, który wywołuje nową funkcję initializeMainStage
i wyświetla niestandardowy tekst „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
Dodaj Page
, aby wyświetlić scenę główną. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz wyświetla niestandardowe treści „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>
</>
);
}
Zastąp CLOUD_PROJECT_NUMBER numerem projektu Google Cloud.
Uruchamianie przykładu
Aby uruchomić aplikację lokalnie:
Podstawowy JS + Webpack
Uruchom webpack, aby połączyć plik main.js
z pakietem SDK dodatków do Meet:
npx webpack
Otwórz plik SidePanel.html
i plik MainStage.html
w dowolnej przeglądarce.
Powinno to wyglądać tak samo jak wdrożenie przykładu podstawowego kodu JS na GitHubie do pliku SidePanel.html i MainStage.html na stronach GitHub.
Next.js
Wykonaj jako następne:
next dev
Otwórz http://localhost:3000/sidepanel
lub http://localhost:3000/mainstage
. Powinny one wyglądać tak samo jak w przypadku wdrożenia przykładu Next.js na GitHubie do pliku SidePanel.html i MainStage.html w GitHub Pages.
Wdrażanie dodatku Meet
Skonfiguruj wdrożenie dodatku, wykonując instrukcje wdrażania dodatku Meet.
Uruchamianie przykładu
Otwórz Meet.
Kliknij Czynności .
W sekcji Twoje dodatki powinien pojawić się Twój dodatek. Wybierz go, aby uruchomić dodatek.
Dodawanie kolejnych funkcji
Teraz, gdy masz już podstawowy panel boczny i ekran główny, możesz zacząć dodawać do dodatku inne funkcje:
- Współpraca przy użyciu dodatku do Meet
- Wiadomości między oknem głównym a panelem bocznym
- Promowanie dodatku przez udostępnianie ekranu
Zachęcamy do korzystania z przykładowych dodatków do Meet na GitHubie jako odniesienia do tworzenia tych funkcji.