Z tego przewodnika dowiesz się, jak skonfigurować i uruchomić przykładowy dodatek do Google Meet, tworząc główny obszar i panel boczny. Przykłady „Hello World” na tej stronie są też dostępne w GitHubie jako kompletne dodatki do Meet zbudowane w podstawowym JavaScript lub Next.js TypeScript.
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, postępuj zgodnie z instrukcjami dotyczącymi pakietu SDK dodatków do Meet w npm.
Najpierw zainstaluj pakiet npm:
npm install @googleworkspace/meet-addons
Następnie pakiet SDK dodatków do Meet jest dostępny po zaimportowaniu interfejsu
MeetAddonExport
:
import {meet} from '@googleworkspace/meet-addons/meet.addons';
Użytkownicy TypeScriptu mają do dyspozycji definicje TypeScriptu spakowane z modułem.
Użytkownicy TypeScriptu powinni ustawić moduleResolution
na "bundler"
w tsconfig.json
projektu, aby specyfikacja „eksportów” w pliku package.json umożliwiła importowanie pakietu do udostępniania ekranu.
gstatic
Pakiet SDK dodatków do Google Meet jest dostępny jako pakiet JavaScript z gstatic
, czyli domeny, która udostępnia treści statyczne.
Aby użyć pakietu SDK dodatków do 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 do Meet jest dostępny w interfejsie MeetAddon
w sekcji window.meet.addon
.
Tworzenie strony panelu bocznego
W panelu bocznym wyświetlą się zainstalowane dodatki, które możesz wybrać i używać. Po wybraniu dodatku w elemencie iframe wczytuje się adres URL panelu bocznego określony w pliku manifestu dodatku. Powinien to być punkt wejścia do aplikacji. Musi on co najmniej:
Sygnalizuj zakończenie wczytywania dodatku. Podczas wczytywania dodatku Meet wyświetla ekran wczytywania. Gdy sesja dodatku zostanie nawiązana przez wywołanie metody
createAddonSession
(), Meet traktuje to jako sygnał z dodatku, że wczytywanie zostało zakończone i użytkownik może wchodzić w interakcje z treściami innej firmy. Dodatek nie powinien wywoływać metodycreateAddonSession()
, dopóki nie zakończy się wczytywanie treści.Utwórz klienta panelu bocznego. Aby uzyskać dostęp do pakietu SDK dodatków do Meet w panelu bocznym, musisz utworzyć instancję interfejsu
MeetSidePanelClient
. Zapewnia to kontrolę nad głównym pakietem SDK dodatków do Meet.Rozpocznij aktywność. Umożliwia to innym osobom dołączenie do Twojego dodatku i opcjonalne otwarcie go w głównej części ekranu.
Poniższy przykładowy kod pokazuje, jak sesja tworzy klienta panelu bocznego i jak klient panelu bocznego rozpoczyna aktywność na głównym etapie:
Podstawowy JS + Webpack
W nowym pliku o nazwie main.js
zdefiniuj funkcję, która tworzy sesję dodatku i klienta panelu bocznego oraz 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 do Meet do main.js
i udostępnić go w bibliotece. Zalecamy to zrobić,
instalując webpack i używając opcji library
w pliku webpack.config.js
:
module.exports = {
entry: './main.js',
output: {
library: 'helloWorld',
...
},
...
};
Next.js
Dodaj nowy Page
, aby wyświetlić panel boczny. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz rozpoczyna 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 sceny, który utworzysz w następnym kroku.
Tworzenie strony głównej
Główny obszar to główny obszar, w którym możesz wyświetlać dodatek, jeśli potrzebujesz większej przestrzeni roboczej. Główna scena otworzy się po rozpoczęciu aktywności. Aby uzyskać dostęp do funkcji pakietu SDK dodatków do Meet w głównej części ekranu, musisz użyć interfejsu MeetMainStageClient
.
Poniższy przykładowy kod pokazuje przykład strony głównej, która renderuje niestandardowy element div
, aby wyświetlić tekst „Hello, world!”:
Podstawowy JS + Webpack
Dodaj do utworzonego wcześniej pliku main.js
tę funkcję, aby główny etap mógł sygnalizować zakończenie wczytywania:
/**
* 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 niestandardową treść „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ć główną scenę. Ta strona tworzy sesję dodatku i klienta panelu bocznego podczas wczytywania oraz wyświetla niestandardową treść „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ć 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 MainStage.html
w dowolnej przeglądarce.
Powinno to wyglądać tak samo jak w przypadku wdrożenia podstawowego przykładu JS na GitHubie w SidePanel.html i MainStage.html w GitHub Pages.
Next.js
Uruchom następny:
next dev
Otwórz http://localhost:3000/sidepanel
lub http://localhost:3000/mainstage
. Powinny one wyglądać tak samo jak wdrożenie przykładowej aplikacji Next.js w GitHubie w SidePanel.html i MainStage.html w GitHub Pages.
Wdrażanie dodatku do Meet
Wdrażanie dodatku to proces dwuetapowy:
Najpierw musisz wdrożyć kod z tego przewodnika w witrynie, której jesteś właścicielem, używając dowolnego rozwiązania do wdrażania. Oficjalne przykładowe dodatki do Google Meet w GitHubie są wdrażane za pomocą procesu GitHub na stronach GitHub, ale możesz też używać narzędzi takich jak Firebase Hosting.
Po wdrożeniu aplikacji musisz skonfigurować wdrożenie dodatku, postępując zgodnie z instrukcjami wdrażania dodatku do Meet. Postępując zgodnie z tym przewodnikiem po wdrażaniu, utworzysz ostateczny dodatek do Meet, który jest elementem iframe w Meet aplikacji wdrożonej w kroku 1.
Uruchamianie przykładu
Otwórz Meet.
Kliknij przycisk narzędzi spotkania
.
W sekcji Twoje dodatki powinien być widoczny Twój dodatek. Wybierz go, aby uruchomić dodatek.
Dodawanie kolejnych funkcji
Teraz, gdy masz już podstawowy panel boczny i główną część ekranu, możesz zacząć dodawać do dodatku inne funkcje:
- Współpraca przy użyciu dodatku do Meet
- Wiadomości między głównym widokiem a panelem bocznym
- Promowanie dodatku
Zachęcamy do korzystania z przykładowych dodatków do Meet na GitHubie jako materiałów referencyjnych podczas tworzenia tych funkcji.