साइड पैनल और मुख्य पेज बनाना

इस पेज पर बताया गया है कि वेब पर Meet ऐड-ऑन दिखाने के लिए, साइड पैनल और मुख्य स्टेज वाले पेज कैसे बनाएं. इससे उन गतिविधियों और टास्क को मैनेज किया जा सकता है जिनमें Google Meet में हिस्सा लेने वाले दूसरे लोग साथ मिलकर काम कर सकते हैं.

Meet ऐड-ऑन SDK टूल का मुख्य स्टेज और साइड पैनल.
वेब के लिए Meet ऐड-ऑन का मुख्य स्टेज और साइड पैनल

Google Meet ऐड-ऑन SDK टूल, gstatic के JavaScript बंडल के तौर पर उपलब्ध है. यह डोमेन स्टैटिक कॉन्टेंट उपलब्ध कराता है.

Meet ऐड-ऑन SDK टूल का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन में यह स्क्रिप्ट टैग जोड़ें:

<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>

Meet ऐड-ऑन SDK टूल की सुविधा, 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>