Meet के ऐड-ऑन के बारे में खास जानकारी

इस गाइड में, मुख्य स्टेज और साइड पैनल बनाकर, Google Meet के किसी सैंपल ऐड-ऑन को सेट अप करने और चलाने का तरीका बताया गया है. इस पेज पर दिए गए "नमस्ते दुनिया" उदाहरण, GitHub पर भी उपलब्ध हैं. ये बेसिक JavaScript या Next.js TypeScript का इस्तेमाल करके बनाए गए, Meet के पूरे ऐड-ऑन हैं.

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

SDK टूल इंस्टॉल और इंपोर्ट करना

SDK टूल को npm या gstatic का इस्तेमाल करके ऐक्सेस किया जा सकता है.

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

सबसे पहले, npm पैकेज इंस्टॉल करें:

npm install @googleworkspace/meet-addons

इसके बाद, Meet के ऐड-ऑन SDK टूल को इस्तेमाल करने के लिए, MeetAddonExport इंटरफ़ेस को इंपोर्ट करें:

import {meet} from '@googleworkspace/meet-addons/meet.addons';

TypeScript का इस्तेमाल करने वाले लोगों के लिए, TypeScript की परिभाषाएं मॉड्यूल के साथ पैकेज की जाती हैं.

gstatic

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

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

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

Meet ऐड-ऑन SDK टूल, window.meet.addon में जाकर MeetAddon इंटरफ़ेस से उपलब्ध है.

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

साइड पैनल में, इंस्टॉल किए गए ऐसे ऐड-ऑन दिखते हैं जिन्हें चुना और इस्तेमाल किया जा सकता है. ऐड-ऑन चुनने के बाद, एक iframe उस साइड पैनल का यूआरएल लोड करता है जिसे आपने ऐड-ऑन मेनिफ़ेस्ट में बताया है. यह आपके ऐप्लिकेशन का एंट्री पॉइंट होना चाहिए. साथ ही, यह कम से कम ये काम करना चाहिए:

  1. ऐड-ऑन लोड हो गया है. ऐड-ऑन लोड होने के दौरान, Meet में लोडिंग स्क्रीन दिखती है. जब createAddonSession() विधि को कॉल करके ऐड-ऑन सेशन शुरू किया जाता है, तो Meet इसे ऐड-ऑन से मिले सिग्नल के तौर पर लेता है. इसका मतलब है कि ऐड-ऑन लोड हो गया है और उपयोगकर्ता तीसरे पक्ष के कॉन्टेंट के साथ इंटरैक्ट कर सकता है. आपका ऐड-ऑन, कॉन्टेंट लोड होने तक createAddonSession() तरीके को कॉल नहीं करना चाहिए.

  2. साइड पैनल क्लाइंट बनाएं. साइड पैनल में Meet ऐड-ऑन SDK टूल को ऐक्सेस करने के लिए, आपको MeetSidePanelClient इंटरफ़ेस को इंस्टैंशिएट करना होगा. इससे, Meet के ऐड-ऑन SDK के मुख्य अनुभव को कंट्रोल किया जा सकता है.

  3. गतिविधि शुरू करें. इससे दूसरे लोग आपके ऐड-ऑन में शामिल हो सकते हैं. साथ ही, आपके पास ऐड-ऑन को मुख्य स्टेज में खोलने का विकल्प भी होता है.

यहां दिए गए कोड सैंपल में दिखाया गया है कि सेशन, साइड पैनल क्लाइंट कैसे बनाता है और साइड पैनल क्लाइंट, मुख्य स्टेज में गतिविधि कैसे शुरू करता है:

बुनियादी JS + Webpack

main.js नाम की नई फ़ाइल में, एक ऐसा फ़ंक्शन तय करें जो ऐड-ऑन सेशन और साइड पैनल क्लाइंट बनाता हो. साथ ही, आईडी 'start-activity' वाले बटन पर क्लिक करने पर गतिविधि शुरू करता हो:

import { meet } from '@googleworkspace/meet-addons/meet.addons';

const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';

/**
 * Prepares the Add-on Side Panel Client, and adds an event to launch the
 * activity in the main stage when the main button is clicked.
 */
export async function setUpAddon() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    const sidePanelClient = await session.createSidePanelClient();
    document
        .getElementById('start-activity')
        .addEventListener('click', async () => {
            await sidePanelClient.startActivity({
                mainStageUrl: MAIN_STAGE_URL
            });
        });
}

SidePanel.html नाम की नई फ़ाइल में, गतिविधि शुरू करने वाला बटन तय करें. साथ ही, दस्तावेज़ लोड होने पर main.js से फ़ंक्शन को कॉल करें:

<html>
<head>
    <title>Meet Add-on Side Panel</title>
    <script src="./main.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div>This is the Add-on Side Panel. Only you can see this.</div>
    <button id="start-activity">Launch Activity in Main Stage.</button>

    <script>
        document.body.onload = () => {
            // Library name (`helloWorld`) is defined in the webpack config.
            // The function (`setUpAddon`) is defined in main.js.
            helloWorld.setUpAddon();
        };
    </script>
</body>
</html>

आपको अपने main.js के साथ Meet के ऐड-ऑन SDK टूल को बंडल करना होगा और उन्हें लाइब्रेरी में दिखाना होगा. हमारा सुझाव है कि आप webpack इंस्टॉल करें और अपनी webpack.config.js फ़ाइल में library विकल्प का इस्तेमाल करें:

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

साइड पैनल दिखाने के लिए, नया Page जोड़ें. यह पेज लोड होने पर, ऐड-ऑन सेशन और साइड पैनल क्लाइंट बनाता है. साथ ही, बटन पर क्लिक करने पर ऐक्टिविटी शुरू करता है:

'use client';

import { useEffect, useState } from 'react';
import {
    meet,
    MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();

    // Launches the main stage when the main button is clicked.
    async function startActivity(e: unknown) {
        if (!sidePanelClient) {
            throw new Error('Side Panel is not yet initialized!');
        }
        await sidePanelClient.startActivity({
            mainStageUrl: 'MAIN_STAGE_URL'
        });
    }

    /**
     * Prepares the Add-on Side Panel Client.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            setSidePanelClient(await session.createSidePanelClient());
        })();
    }, []);

    return (
        <>
            <div>
                This is the Add-on Side Panel. Only you can see this.
            </div>
            <button onClick={startActivity}>
                Launch Activity in Main Stage.
            </button>
        </>
    );
}

इनकी जगह ये डालें:

  • CLOUD_PROJECT_NUMBER: आपके Google Cloud प्रोजेक्ट का प्रोजेक्ट नंबर.

  • MAIN_STAGE_URL: मुख्य स्टेज का यूआरएल, जिसे अगले चरण में बनाया जाता है.

मुख्य स्टेज पेज बनाना

मुख्य स्टेज, मुख्य फ़ोकस एरिया होता है. अगर आपको ज़्यादा काम करने की जगह चाहिए, तो यहां ऐड-ऑन दिखाया जा सकता है. गतिविधि शुरू होने के बाद, मुख्य चरण खुल जाता है. मुख्य स्टेज में Meet ऐड-ऑन SDK टूल की सुविधाओं को ऐक्सेस करने के लिए, आपको MeetMainStageClient इंटरफ़ेस का इस्तेमाल करना होगा.

यहां दिए गए कोड सैंपल में, मुख्य स्टेज पेज का एक उदाहरण दिया गया है. यह पेज "नमस्ते, दुनिया!" कहने के लिए, कस्टम div रेंडर करता है:

बुनियादी JS + Webpack

पहले से बनाई गई main.js फ़ाइल में यह फ़ंक्शन जोड़ें, ताकि मुख्य स्टेज यह सिग्नल दे सके कि लोड हो जाना बाकी है:

/**
 * Prepares the Add-on Main Stage Client, which signals that the add-on has
 * successfully launched in the main stage.
 */
export async function initializeMainStage() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    await session.createMainStageClient();
}

इसके बाद, एक नई MainStage.html फ़ाइल जोड़ें, जो नए initializeMainStage फ़ंक्शन को कॉल करती है और कस्टम "hello, world" कॉन्टेंट दिखाती है:

<html>
<body style="width: 100%; height: 100%; margin: 0">
    <div>
        This is the Add-on Main Stage. Everyone in the call can see this.
    </div>
    <div>Hello, world!</div>

    <script>
        document.body.onload = () => {
            helloWorld.initializeMainStage();
        };
    </script>
</body>
</html>

Next.js

मुख्य स्टेज दिखाने के लिए, Page जोड़ें. यह पेज लोड होने पर, ऐड-ऑन सेशन और साइड पैनल क्लाइंट बनाता है. साथ ही, "नमस्ते, दुनिया के लोगों" वाला कस्टम कॉन्टेंट दिखाता है:

'use client';

import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    /**
     * Prepares the Add-on Main Stage Client, which signals that the add-on
     * has successfully launched in the main stage.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            await session.createMainStageClient();
        })();
    }, []);

    return (
        <>
            <div>
                This is the Add-on Main Stage.
                Everyone in the call can see this.
            </div>
            <div>Hello, world!</div>
        </>
    );
}

CLOUD_PROJECT_NUMBER की जगह अपने Google Cloud प्रोजेक्ट का प्रोजेक्ट नंबर डालें.

सैंपल चलाना

स्थानीय तौर पर चलाने के लिए, ये काम करें:

बुनियादी JS + Webpack

Meet के ऐड-ऑन के SDK टूल के साथ अपनी main.js फ़ाइल को बंडल करने के लिए, वेबपैक चलाएं:

npx webpack

अपनी SidePanel.html फ़ाइल और MainStage.html फ़ाइल को किसी भी ब्राउज़र में खोलें. यह GitHub पेजों पर SidePanel.html और MainStage.html में, GitHub पर मौजूद बेसिक JS सैंपल को डिप्लॉय करने जैसा ही दिखेगा.

Next.js

अगली बार चलाने के लिए:

next dev

http://localhost:3000/sidepanel या http://localhost:3000/mainstage पर जाएं. ये वैसे ही दिखने चाहिए जैसे GitHub Pages पर, GitHub पर मौजूद Next.js के सैंपल को SidePanel.html और MainStage.html पर डिप्लॉय किया गया हो.

Meet ऐड-ऑन को डिप्लॉय करना

Meet ऐड-ऑन को डिप्लॉय करने के तरीके के बारे में दिए गए निर्देशों का पालन करके, ऐड-ऑन को डिप्लॉय करने की सुविधा सेट अप करें.

सैंपल चलाना

  1. Meet पर जाएं.

  2. गतिविधियां गतिविधियों का आइकॉन. पर क्लिक करें.

  3. आपके ऐड-ऑन सेक्शन में, आपको अपना ऐड-ऑन दिखेगा. ऐड-ऑन चलाने के लिए, इसे चुनें.

ज़्यादा सुविधाएं जोड़ना

अब आपके पास साइड पैनल और मुख्य स्टेज है. अब अपने ऐड-ऑन में अन्य सुविधाएं जोड़ी जा सकती हैं:

इन सुविधाओं को बनाने के लिए, GitHub पर मौजूद Meet के ऐड-ऑन के सैंपल को रेफ़रंस के तौर पर इस्तेमाल करें.