ליצור את החלונית הצדדית ואת דפי השלב הראשי

בדף הזה נסביר איך ליצור את החלונית הצדדית ואת דפי השלב הראשיים של תוסף Meet לאינטרנט.

השלב הראשי והחלונית הצדדית של ה-SDK של Meet לתוספים.
השלב הראשי והחלונית הצדדית של אתר Meet באינטרנט תוסף

Google Meet Add-ons SDK זמין בתור חבילת JavaScript מ-gstatic, דומיין שמציג תוכן סטטי.

כדי להשתמש ב-SDK של תוספי Meet, צריך להוסיף לאפליקציה את תג הסקריפט הבא:

<script src="https://www.gstatic.com/meetjs/addons/0.7.0/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.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>

יצירת דף ראשי של שלב

השלב הראשי הוא האזור העיקרי שבו אפשר להציג את התוסף אם יש צורך במרחב עבודה גדול יותר. השלב הראשי נפתח ברגע ששיתוף הפעולה נפתח מתחיל. כדי לגשת לפונקציונליות של ה-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.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>