این صفحه نحوه ایجاد پانل جانبی و صفحات مرحله اصلی یک افزونه Meet Web را شرح می دهد.
Google Meet Add-ons SDK به عنوان یک بسته جاوا اسکریپت از gstatic
در دسترس است، دامنه ای که محتوای ثابت را ارائه می دهد.
برای استفاده از Meet Add-ons SDK، تگ اسکریپت زیر را به برنامه خود اضافه کنید:
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
قابلیت Meet Add-ons SDK در زیر window.meet.addon
در دسترس است. برای مشاهده مستندات مرجع، به خلاصه منبع مراجعه کنید.
نشان می دهد که بارگیری افزونه کامل شده است
هنگام بارگیری افزونه، Meet صفحه بارگیری را نشان می دهد. هنگامی که جلسه برافزا برقرار میشود، Meet این را بهعنوان سیگنالی از برافزا تلقی میکند که بارگیری به پایان رسیده است و کاربر میتواند با محتوای شخص ثالث تعامل داشته باشد.
یک صفحه پانل کناری ایجاد کنید
پانل کناری افزونه های نصب شده را نشان می دهد که می توانید انتخاب و استفاده کنید. هنگامی که برافزای خود را انتخاب میکنید، یک iframe URL پانل جانبی را که در مانیفست افزونه مشخص کردهاید بارگیری میکند. این باید نقطه ورود برنامه شما باشد. برای دسترسی به قابلیت Meet Add-ons SDK در پانل کناری، باید یک sidePanelClient
نمونهسازی کنید.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
در اینجا یک قطعه کد آمده است که نحوه شروع همکاری را نشان می دهد:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/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>
یک صفحه مرحله اصلی ایجاد کنید
مرحله اصلی، ناحیه تمرکز اصلی است که در صورت نیاز به فضای کاری بزرگتر، می توانید افزونه را نمایش دهید. مرحله اصلی پس از شروع همکاری باز می شود. برای دسترسی به قابلیت Meet Add-ons SDK در مرحله اصلی، می توانید از شی مشتری MeetMainStageClient
استفاده کنید:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
در اینجا یک قطعه کد وجود دارد که نمونهای از صفحه مرحله اصلی را نشان میدهد ( mainStagePage.html
در قطعه قبلی)، و شامل فراخوانی به getCollaborationStartingState
در پاسخ به کلیک روی دکمه است:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/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>