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

כאן מוסבר איך יוצרים את החלונית הצדדית ואת הדפים הראשיים בשלב הראשי כדי להציג את התוספים של Meet לדפדפן. כך תוכלו לנהל את הפעילויות או המשימות שבהן משתתפים אחרים יכולים לשתף פעולה ב-Google Meet.

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

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

יצירת דף בחלונית צדדית

בחלונית הצדדית מוצגים התוספים המותקנים כרגע שאפשר לבחור ולהשתמש בהם. כדי ליצור את החלונית הצדדית, אפשר להשתמש באובייקט הלקוח MeetSidePanelClient:

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="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>

    <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('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.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

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

השלב הראשי הוא האזור שבו אפשר להציג את התוכן של התוסף שנבחר. אחרי שיוצרים את הדף של החלונית הצדדית, אפשר להשתמש באובייקט הלקוח MeetMainStageClient כדי ליצור את השלב הראשי:

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
  const mainStageClient = await session.createMainStageClient();

תיצרו דף ראשי כדי להשתמש בתוספים של Meet לדפדפן. קטע הקוד הבא הוא דוגמה לשלב ראשי, שכולל טעינה והסרה של דף החלונית הצדדית:

<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">
                    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('get-collaboration-starting-state')
                .addEventListener(
                    'click', async () => {
                        document.getElementById(
                            'receivedCollaborationStartingState').textContent =
                            JSON.stringify(
                                await mainStageClient.getCollaborationStartingState());
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>