Na tej stronie dowiesz się, jak utworzyć panel boczny i strony główne na potrzeby wyświetlania dodatków do Meet w przeglądarce. Dzięki temu możesz zarządzać czynnościami lub zadaniami, z którymi inni uczestnicy mogą współpracować w Google Meet.
Pakiet SDK dodatków do Google Meet jest dostępny jako pakiet JavaScript z domeny gstatic, która obsługuje treści statyczne.
Aby korzystać z pakietu SDK dodatków w Meet, dodaj do aplikacji ten tag skryptu:
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
Funkcje pakietu SDK dodatków do Meet są dostępne na licencji window.meet.addon.
Aby wyświetlić dokumentację referencyjną, zobacz Podsumowanie zasobów.
Wskazuje, że wczytywanie dodatku zostało ukończone
Meet wyświetla ekran wczytywania podczas wczytywania dodatku. Po ustanowieniu sesji dodatku Meet traktuje to jako sygnał z dodatku, że wczytywanie zostało zakończone i użytkownik może korzystać z treści oferowanych przez firmę zewnętrzną.
Tworzenie strony panelu bocznego
W panelu bocznym wyświetlają się obecnie zainstalowane dodatki, które możesz wybrać i z nich korzystać. Aby utworzyć instancję panelu bocznego, możesz użyć obiektu klienckiego MeetSidePanelClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Poniżej znajdziesz fragment kodu, który przedstawia przykładową stronę w panelu bocznym, która obejmuje wczytywanie i wyładowywanie sceny głównej:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Side Panel Add-on</h1>
<div>
<div>
<button id="set-collaboration-starting-state">
setCollaborationStartingState
</button>
</div>
<div>
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px"
value="https://your_side_panel_iframe.url" />
</div>
<div>
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px"
value="https://your_main_stage_iframe.url" />
</div>
<div>
<input type="text" id="additionalData" style="margin-left: 20px" value="additional data" />
</div>
</div>
</div>
<script>
let sidePanelClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
sidePanelClient = await session.createSidePanelClient();
console.log("Successfully constructed side panel client.");
document
.getElementById('set-collaboration-starting-state')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalDataInputElement =
document.getElementById('additionalData');
await sidePanelClient.setCollaborationStartingState({
sidePanelUrl: sidePanelIframeUrlInputElement.value,
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: additionalDataInputElement.value,
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Utwórz stronę główną sceny
Główny widok to obszar, w którym możesz wyświetlić zawartość wybranego dodatku. Po utworzeniu strony panelu bocznego możesz użyć obiektu klienckiego MeetMainStageClient, aby utworzyć instancję etapu głównego:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Przejdź dalej, aby utworzyć główną stronę sceny, aby korzystać z dodatków do Meet w internecie. Fragment kodu poniżej to przykład sceny głównej, która obejmuje załadowanie i usuwanie strony panelu bocznego:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; background: white;">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Main Stage Add-on</h1>
<div>
<div>
<button id="get-collaboration-starting-state">
getCollaborationStartingState
</button>
</div>
<div id="receivedCollaborationStartingState"
style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
</div>
</div>
<script>
let mainStageClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
const mainStageClient = await session.createMainStageClient();
console.log("Successfully constructed main stage client.");
document
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>