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

इस पेज में बताया गया है कि साइड पैनल और मुख्य स्टेज वाले पेज कैसे बनाए जाते हैं 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 इसे पूरा ऐड-ऑन लोड हो गया हो और उपयोगकर्ता तीसरे पक्ष के कॉन्टेंट के साथ इंटरैक्ट कर सकता है.

साइड-पैनल पेज बनाना

साइड पैनल में, इंस्टॉल किए गए वे ऐड-ऑन दिखते हैं जिन्हें आपने इंस्टॉल किया है चुनने और इस्तेमाल करने की अनुमति है. ऐड-ऑन चुनने के बाद, iframe पेज के उस हिस्से को लोड करता है पैनल का यूआरएल ऐड-ऑन मेनिफ़ेस्ट में बताए गए हैं. यह ऐसा होना चाहिए आपके ऐप्लिकेशन का एंट्री पॉइंट. Meet ऐड-ऑन 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>
                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>

मुख्य स्टेज वाला पेज बनाएं

मुख्य स्टेज, वह मुख्य फ़ोकस होता है जहां ऐड-ऑन दिखाया जा सकता है अगर ज़्यादा बड़े स्तर की ज़रूरत हो. दूसरे क्रिएटर्स के साथ मिलकर वीडियो बनाने के बाद, मुख्य स्टेज खुल जाता है शुरू होता है. Meet ऐड-ऑन 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>