پانل کناری و صفحات مرحله اصلی را ایجاد کنید

این صفحه نحوه ایجاد پانل جانبی و صفحات مرحله اصلی یک افزونه Meet Web را شرح می دهد.

صفحه اصلی و پانل جانبی Meet Add-ons SDK.
مرحله اصلی و پانل جانبی افزونه Meet Web.

Google Meet Add-ons SDK به عنوان یک بسته جاوا اسکریپت از gstatic در دسترس است، دامنه ای که محتوای ثابت را ارائه می دهد.

برای استفاده از Meet Add-ons SDK، تگ اسکریپت زیر را به برنامه خود اضافه کنید:

<script src="https://www.gstatic.com/meetjs/addons/0.7.0/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.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>
                <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('start-collaboration')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalDataInputElement =
                            document.getElementById('additionalData');
                        await sidePanelClient.start-collaboration({
                            sidePanelUrl: sidePanelIframeUrlInputElement.value,
                            mainStageUrl: mainStageIframeUrlInputElement.value,
                            additionalData: additionalDataInputElement.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();

در اینجا یک قطعه کد است که نمونه ای از مرحله اصلی را نشان می دهد که شامل 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">
                    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>