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

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

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

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

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

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

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

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

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

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

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 पर Next.js सैंपल का डिप्लॉयमेंट SidePanel.html से बदलें और MainStage.html GitHub पेजों पर.

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

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

सैंपल चलाएं

Meet पर जाएं.
गतिविधियां पर क्लिक करें.
आपके ऐड-ऑन सेक्शन में, आपको ऐड-ऑन. ऐड-ऑन चलाने के लिए, इसे चुनें.

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

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

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