בדף הזה נסביר איך ליצור את החלונית הצדדית ואת דפי השלב הראשיים של תוסף Meet לאינטרנט.
Google Meet Add-ons SDK זמין בתור
חבילת JavaScript מ-gstatic
, דומיין שמציג תוכן סטטי.
כדי להשתמש ב-SDK של תוספי Meet, צריך להוסיף לאפליקציה את תג הסקריפט הבא:
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
הפונקציונליות של ה-SDK לתוספים ל-Meet זמינה בחשבון window.meet.addon
.
כדי לצפות במסמכי העזר, עיינו במשאב
סיכום.
צריך לציין שטעינת התוסף הושלמה
ב-Meet מוצג מסך טעינה בזמן התוסף בטעינה. כאשר הסשן של התוסף הוא מבוססת, מערכת Meet מתייחסת לזה בתור אות שהטעינה הסתיימה והמשתמש יכולים לקיים אינטראקציה עם התוכן של הצד השלישי.
יצירת דף בחלונית צדדית
בחלונית הצדדית יוצגו התוספים שהותקנו
יכולים לבחור ולהשתמש.
לאחר בחירת התוסף, iframe טוען את הצד
כתובת ה-URL של החלונית
שצוינו במניפסט של התוסף. זה צריך להיות
נקודת הכניסה של האפליקציה. כדי לגשת לפונקציונליות של SDK לתוספים ל-Meet
בחלונית הצדדית, צריך ליצור 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>
יצירת דף ראשי של שלב
השלב הראשי הוא האזור העיקרי שבו אפשר להציג את התוסף
אם יש צורך במרחב עבודה גדול יותר. השלב הראשי נפתח ברגע ששיתוף הפעולה נפתח
מתחיל. כדי לגשת לפונקציונליות של SDK ל-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>