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

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

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

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

npm या gstatic का इस्तेमाल करके, एसडीके को ऐक्सेस किया जा सकता है.

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

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

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

npm install @googleworkspace/meet-addons

इसके बाद, MeetAddonExport इंटरफ़ेस इंपोर्ट करके, Meet के ऐड-ऑन के एसडीके को ऐक्सेस किया जा सकता है:

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

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

gstatic

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

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

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

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

ध्यान दें: अगर TypeScript का इस्तेमाल किया जा रहा है, तो https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts से भी सबसे नए टाइप लिए जा सकते हैं. बस इस फ़ाइल को स्थानीय तौर पर सेव करें.

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

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

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

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

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

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

बेसिक JS + Webpack

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

ध्यान दें: इससे यह माना जाता है कि आपने npm का इस्तेमाल करके, Meet के ऐड-ऑन का एसडीके इंस्टॉल किया है.

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 के ऐड-ऑन के एसडीके को अपने main.js के साथ बंडल करना होगा. साथ ही, इन्हें किसी लाइब्रेरी में दिखाना होगा. हमारा सुझाव है कि ऐसा करने के लिए, webpack इंस्टॉल करें और अपनी webpack.config.js फ़ाइल में library विकल्प का इस्तेमाल करें:

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

Next.js

ध्यान दें: इस उदाहरण में, Next.js ऐप्लिकेशन में कोई पेज जोड़ने के लिए, Next.js ऐप्लिकेशन राउटिंग का इस्तेमाल किया गया है. Next.js में अपना पहला पेज बनाने के बारे में ज़्यादा जानने के लिए, राउटिंग के बारे में 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 के ऐड-ऑन के एसडीके की सुविधाओं को ऐक्सेस करने के लिए, आपको MeetMainStageClient इंटरफ़ेस का इस्तेमाल करना होगा.

अहम जानकारी: ध्यान दें कि आपका कॉन्टेंट लोड होने के बाद, आपके ऐड-ऑन को createAddonSession() तरीके को फिर से कॉल करना होगा. ऐसा न करने पर, ऐड-ऑन मुख्य स्टेज में शुरू नहीं हो पाएगा.

यहां दिए गए कोड के सैंपल में, मुख्य स्टेज के पेज का एक उदाहरण दिखाया गया है. यह पेज, "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 जोड़ें. यह पेज लोड होने पर, ऐड-ऑन सेशन और साइड पैनल क्लाइंट बनाता है. साथ ही, "hello, world" का कस्टम कॉन्टेंट दिखाता है:

'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 के ऐड-ऑन के एसडीके के साथ बंडल करने के लिए, webpack चलाएं:

npx webpack

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

Next.js

Next चलाएं:

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 के ऐड-ऑन को डिप्लॉय करना

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

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

2. ऐप्लिकेशन डिप्लॉय करने के बाद, आपको Meet के ऐड-ऑन को डिप्लॉय करने के निर्देशों का पालन करके, ऐड-ऑन के डिप्लॉयमेंट को सेट अप करना होगा. डिप्लॉयमेंट की उस गाइड के मुताबिक, Meet का वह ऐड-ऑन बनता है जो पहले चरण में डिप्लॉय किए गए ऐप्लिकेशन का iframe होता है.

सैंपल चलाना

1. Meet पर जाएं.

2. मीटिंग के टूल बटन पर क्लिक करें.

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

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

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

• Meet के ऐड-ऑन का इस्तेमाल करके, साथ मिलकर काम करना
• मुख्य स्टेज और साइड पैनल के बीच मैसेज भेजना
• ऐड-ऑन का प्रमोशन करना

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