Durante il periodo di accesso in anteprima, l'SDK dei componenti aggiuntivi di Google Meet è disponibile come bundle JavaScript di gstatic, un dominio che pubblica contenuti statici.
Per utilizzare l'SDK dei componenti aggiuntivi di Meet, aggiungi il seguente tag script alla tua app:
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
La funzionalità dell'SDK dei componenti aggiuntivi di Meet è disponibile in window.meet.addon.
Per visualizzare la documentazione di riferimento, vedi Riepilogo risorse.
Crea una pagina in un riquadro laterale
Il seguente esempio di codice mostra una pagina di esempio del riquadro laterale che mostra come utilizzare l'SDK dei componenti aggiuntivi di Meet:
HTML
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.1.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 style="display: flex">
<div>
<button id="get-frame-type">getFrameType</button>
</div>
<div id="frameTypeResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="get-meeting-info">getMeetingInfo</button>
</div>
<div id="meetingInfoResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="notify-main-stage">notifyMainStage</button>
</div>
<div id="notificationResultContainer" style="padding: 0 20px; word-break: break-all;">
No notification received yet.
</div>
</div>
<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>
<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 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("get-frame-type")
.addEventListener("click", async () => {
document.getElementById('frameTypeResultContainer').textContent = 'Frame type: ' + window.meet.addon.getFrameType();
});
document
.getElementById('get-meeting-info')
.addEventListener('click', async () => {
document.getElementById('meetingInfoResultContainer').textContent = JSON.stringify(await sidePanelClient.getMeetingInfo());
});
document
.getElementById('notify-main-stage')
.addEventListener(
'click', async () => {
await sidePanelClient.notifyMainStage("Notification from side panel:" + new Date().toLocaleTimeString());
});
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
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await sidePanelClient.getCollaborationStartingState());
});
sidePanelClient.on('frameToFrameMessage', (arg) => {
document.getElementById('notificationResultContainer').textContent =
JSON.stringify(arg);
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
Creare una pagina della fase principale
Il seguente esempio di codice mostra una pagina di esempio della fase principale che mostra come utilizzare l'SDK dei componenti aggiuntivi di Meet:
HTML
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.1.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>
<button id="load-side-panel">loadSidePanel</button>
</div>
<div>
<button id="unload-side-panel">unLoadSidePanel</button>
</div>
<div style="display: flex">
<div>
<button id="get-frame-type">getFrameType</button>
</div>
<div id="frameTypeResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="get-meeting-info">getMeetingInfo</button>
</div>
<div id="meetingInfoResultContainer" style="padding: 0 20px; word-break: break-all;"></div>
</div>
<div style="display: flex">
<div>
<button id="notify-side-panel">notifySidePanel</button>
</div>
<div id="notificationResultContainer" style="padding-left: 20px">
No notification received yet.
</div>
</div>
<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>
<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("load-side-panel")
.addEventListener("click", async () => {
await mainStageClient.loadSidePanel();
});
document
.getElementById("unload-side-panel")
.addEventListener("click", async () => {
await mainStageClient.unloadSidePanel();
});
document
.getElementById("get-frame-type")
.addEventListener("click", async () => {
document.getElementById('frameTypeResultContainer').textContent = 'Frame type: ' + window.meet.addon.getFrameType();
});
document
.getElementById('get-meeting-info')
.addEventListener('click', async () => {
document.getElementById('meetingInfoResultContainer').textContent = JSON.stringify(await mainStageClient.getMeetingInfo());
});
document
.getElementById('notify-side-panel')
.addEventListener(
'click', async () => {
await mainStageClient.notifySidePanel("Notification from main stage:" + new Date().toLocaleTimeString());
});
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 mainStageClient.setCollaborationStartingState({
sidePanelUrl: sidePanelIframeUrlInputElement.value,
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: additionalDataInputElement.value,
});
});
document
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
mainStageClient.on('frameToFrameMessage', (arg) => {
document.getElementById('notificationResultContainer').textContent =
JSON.stringify(arg);
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>