इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

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

एसडीके टूल इंस्टॉल और इंपोर्ट करना

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

npm (सुझाया गया)

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

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

npm install @googleworkspace/meet-addons

इसके बाद, Meet add-ons SDK टूल को MeetAddonExport इंटरफ़ेस इंपोर्ट करके इस्तेमाल किया जा सकता है:

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

टाइपस्क्रिप्ट का इस्तेमाल करने वाले लोगों के लिए, टाइपस्क्रिप्ट की परिभाषाएं मॉड्यूल के साथ पैकेज की जाती हैं. TypeScript का इस्तेमाल करने वाले लोगों को प्रोजेक्ट के tsconfig.json में moduleResolution को "bundler" पर सेट करना चाहिए, ताकि package.json "exports" spec, स्क्रीन शेयर करने वाले पैकेज को एक्सपोर्ट करने की सुविधा को चालू कर सके.

gstatic

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

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

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

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

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

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

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

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

बेसिक 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>

आपको Meet add-ons SDK को अपने main.js के साथ बंडल करना होगा और उन्हें लाइब्रेरी में दिखाना होगा. हमारा सुझाव है कि आप 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 इंटरफ़ेस का इस्तेमाल करना होगा.

यहां दिए गए कोड के सैंपल में, मुख्य स्टेज वाले पेज का एक उदाहरण दिखाया गया है. यह पेज, "Hello, world!" कहने के लिए कस्टम 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

अपनी main.js फ़ाइल को Meet add-ons SDK के साथ बंडल करने के लिए, webpack चलाएं:

npx webpack

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

Next.js

अगली बार कब चलेगा:

next dev

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

ध्यान दें: Chrome DevTools कंसोल में, स्थानीय तौर पर चलाने पर एक गड़बड़ी दिखती है. इसमें

Missing required Meet
SDK URL parameter: meet_sdk

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

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

ऐड-ऑन को डिप्लॉय करने की प्रोसेस में दो चरण होते हैं:

सबसे पहले, आपको इस क्विकस्टार्ट में दिए गए कोड को अपनी किसी वेबसाइट पर डिप्लॉय करना होगा. इसके लिए, अपनी पसंद का कोई भी डिप्लॉयमेंट सलूशन इस्तेमाल करें. GitHub पर मौजूद Google Meet के आधिकारिक ऐड-ऑन के सैंपल को GitHub Pages पर डिप्लॉय करने के लिए, GitHub वर्कफ़्लो का इस्तेमाल किया जाता है. हालाँकि, Firebase Hosting जैसे टूल का भी इस्तेमाल किया जा सकता है.
ऐप्लिकेशन को डिप्लॉय करने के बाद, आपको ऐड-ऑन को डिप्लॉय करना होगा. इसके लिए, Meet ऐड-ऑन डिप्लॉय करें लेख में दिए गए निर्देशों का पालन करें. इस डिप्लॉयमेंट गाइड का पालन करने से, Meet का फ़ाइनल ऐड-ऑन बनता है. यह Meet में एक iframe होता है. इसे पहले चरण में डिप्लॉय किया जाता है.

सैंपल चलाना

Meet पर जाएं.
मीटिंग टूल बटन पर क्लिक करें.
आपके ऐड-ऑन सेक्शन में, आपको अपना ऐड-ऑन दिखेगा. ऐड-ऑन चलाने के लिए, इसे चुनें.

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

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

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