Erken erişim döneminde, Google Meet Eklentileri SDK'sı, statik içerik sunan bir alan olan gstatic tarafından JavaScript paketi olarak kullanılabilir.
Meet Eklentileri SDK'sını kullanmak için aşağıdaki komut dosyası etiketini uygulamanıza ekleyin:
<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
Meet Eklentileri SDK'sı işlevleri window.meet.addon kapsamında kullanılabilir.
Referans belgelerini görüntülemek için Kaynak özeti bölümüne bakın.
Yan panel sayfası oluşturma
Aşağıdaki kod örneğinde, Meet Eklentileri SDK'sının nasıl kullanılacağını gösteren örnek bir yan panel sayfası gösterilmektedir:
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>
Ana aşama sayfası oluşturma
Aşağıdaki kod örneğinde, Meet Eklentileri SDK'sının nasıl kullanılacağını gösteren bir ana aşama sayfası gösterilmektedir:
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>