Auf dieser Seite wird beschrieben, wie Sie die Seiten- und Hauptanzeigeseiten eines Web-Add-on für Meet.
Das Google Meet Add-ons SDK ist als
JavaScript-Paket von gstatic, einer Domain, die statische Inhalte bereitstellt
Wenn Sie das Meet Add-ons SDK verwenden möchten, fügen Sie Ihrer App das folgende Script-Tag hinzu:
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
Die SDK-Funktionen für Meet-Add-ons sind unter window.meet.addon verfügbar.
Die Referenzdokumentation finden Sie in der Ressource
Zusammenfassung
Gibt an, dass das Laden des Add-ons abgeschlossen ist
Meet zeigt einen Ladebildschirm an, während das wird geladen. Wenn die Add-on-Sitzung hergestellt wurde, wird dies in Meet als Signal vom Add-on behandelt, dass das Laden abgeschlossen ist und der Nutzer mit den Drittanbieterinhalten interagieren kann.
Seite in Seitenleiste erstellen
In der Seitenleiste werden die installierten Add-ons angezeigt,
auswählen und verwenden können.
Sobald Sie Ihr Add-on ausgewählt haben, lädt ein iFrame die seitliche
Bereichs-URL, die Sie
die im Add-on-Manifest angegeben sind. Dies sollte der
Einstiegspunkt der App erkennen. So greifen Sie auf die Funktionen des Meet Add-ons SDK zu:
in der Seitenleiste müssen Sie eine sidePanelClient instanziieren.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.createSidePanelClient();
Ersetzen Sie CLOUD_PROJECT_NUMBER durch die Projektnummer Ihres Google Cloud-Projekts.
Das folgende Code-Snippet zeigt, wie eine Aktivität gestartet wird:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity">
startActivity
</button>
</div>
<div>
Activity 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>
Activity 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-activity')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startActivity({
// 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>
Ersetzen Sie CLOUD_PROJECT_NUMBER durch die Projektnummer Ihres Google Cloud-Projekt
Hauptseite des Anzeigebereichs erstellen
Der Hauptbereich ist der Fokusbereich, in dem Sie
wenn ein größerer Arbeitsbereich benötigt wird. Die wichtigsten
wird geöffnet, sobald die Aktivität beginnt. So greifen Sie auf das Meet Add-ons SDK zu:
in der Hauptphase haben, können Sie mit dem Client-Objekt
MeetMainStageClient:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Ersetzen Sie CLOUD_PROJECT_NUMBER durch die Projektnummer Ihres Google Cloud-Projekts.
Dieses Code-Snippet zeigt ein Beispiel für eine
Stage-Seite (mainStagePage.html im vorherigen Snippet) und enthält einen Aufruf
an getActivityStartingState als Reaktion auf einen Klick auf eine Schaltfläche:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity-starting-state">
Get Activity Starting State's Additional Property
</button>
</div>
<div id="receivedActivityStartingStateProperty"
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-activity-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getActivityStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedActivityStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Ersetzen Sie CLOUD_PROJECT_NUMBER durch die Projektnummer Ihres Google Cloud-Projekt