إنشاء اللوحة الجانبية وصفحات المرحلة الرئيسية

توضّح هذه الصفحة طريقة إنشاء اللوحة الجانبية وصفحات المرحلة الرئيسية لعرض إضافات Meet للويب. يتيح لك ذلك إدارة الأنشطة أو المهام التي يمكن للمشاركين الآخرين من خلالها التعاون في Google Meet.

المرحلة الرئيسية واللوحة الجانبية لحزمة تطوير البرامج (SDK) الخاصة بإضافات Meet
المرحلة الرئيسية واللوحة الجانبية لإضافات Meet للويب

تتوفّر حزمة تطوير البرامج للإضافات في Google Meet كحزمة JavaScript من gstatic، وهو نطاق يعرض محتوًى ثابتًا.

لاستخدام حزمة تطوير البرامج للإضافات في تطبيق 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>