Auf dieser Seite wird beschrieben, wie Sie die Seitenleiste und die Hauptseite eines Web-Add-on für Meet.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">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/0.7.0/meet.addons.js"></script>
Die Funktionen des Meet Add-ons SDK 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 der Parameter Add-on-Sitzung ist etabliert, Meet behandelt dies als Signal des das Laden abgeschlossen ist und der Nutzer mit den Inhalten Dritter interagieren können.
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.getSidePanelClient();
Hier ist ein Code-Snippet, das zeigt, wie Sie eine Zusammenarbeit starten:
<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>
Hauptseite des Anzeigebereichs erstellen
Im Hauptbereich können Sie das Add-on präsentieren.
wenn ein größerer
Arbeitsraum benötigt wird. Die Hauptbühne öffnet sich, sobald die Zusammenarbeit
beginnt. So greifen Sie auf die Funktionen des Meet Add-ons SDK in der Hauptversion zu:
können Sie das Client-Objekt
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
Dieses Code-Snippet zeigt ein Beispiel für eine
Stage-Seite (mainStagePage.html im vorherigen Snippet) und enthält einen Aufruf
an getCollaborationStartingState 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/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>