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

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

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

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

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

अगर आपका प्रोजेक्ट 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 टूल, MeetAddon इंटरफ़ेस में window.meet.addon में उपलब्ध है.

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

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