Na tej stronie dowiesz się, jak utworzyć panel boczny i stronę główną sceny Dodatek internetowy do Meet.
Pakiet SDK dodatków do Google Meet jest dostępny jako
Pakiet JavaScriptu z domeny gstatic, która udostępnia 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.
Dokumentację referencyjną znajdziesz tutaj: Zasób
.
Wskazuje, że wczytywanie dodatku zostało ukończone
Meet wyświetla ekran wczytywania, gdy trwa wczytywanie dodatku. Gdy sesja dodatkowa to istniejący, Meet traktuje to jako sygnał z że wczytywanie zostało ukończone, wchodzić w interakcje z treściami osób trzecich.
Tworzenie strony panelu bocznego
Na panelu bocznym wyświetlają się zainstalowane dodatki,
co może wybierać i których może używać.
Po wybraniu dodatku element iframe wczyta
URL panelu
w pliku manifestu dodatku. Powinien to być
i punktu wejścia aplikacji. Dostęp do pakietu SDK dodatków do Meet
w panelu bocznym musisz utworzyć instancję sidePanelClient.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
Oto fragment kodu, który pokazuje, jak rozpocząć współpracę:
<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="start-collaboration">
startCollaboration
</button>
</div>
<div>
Collaboration Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Collaboration start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</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('start-collaboration')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startCollaboration({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Utwórz stronę główną sceny
Główny obszar to główny obszar, w którym możesz wyświetlić dodatek.
jeśli potrzebna jest większa przestrzeń do pracy. Po zakończeniu współpracy otworzy się ekran główny
zaczyna się. Aby uzyskać dostęp do pakietu SDK dodatków do Meet, otwórz główną stronę
możesz użyć obiektu klienckiego
MeetMainStageClient
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Oto fragment kodu, który pokazuje przykład głównego
stronę etapu (mainStagePage.html w poprzednim fragmencie) i zawiera wywołanie
do getCollaborationStartingState w odpowiedzi na kliknięcie przycisku:
<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">
Get Collaboration Starting State's Additional Property
</button>
</div>
<div id="receivedCollaborationStartingStateProperty"
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 () => {
const startingState =
await mainStageClient.getCollaborationStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedCollaborationStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>