इस गाइड में, मुख्य स्टेज और साइड पैनल बनाकर, Google Meet के किसी सैंपल ऐड-ऑन को सेट अप करने और चलाने का तरीका बताया गया है. इस पेज पर दिए गए "नमस्ते दुनिया" उदाहरण, GitHub पर भी उपलब्ध हैं. ये बेसिक JavaScript या Next.js TypeScript का इस्तेमाल करके बनाए गए, Meet के पूरे ऐड-ऑन हैं.
SDK टूल को इंस्टॉल और इंपोर्ट करें
npm या gstatic का इस्तेमाल करके SDK टूल को ऐक्सेस किया जा सकता है.
npm (सुझाया गया)
अगर आपका प्रोजेक्ट 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 उस साइड पैनल का यूआरएल लोड करता है जिसे आपने ऐड-ऑन मेनिफ़ेस्ट में बताया है. यह आपके ऐप्लिकेशन का एंट्री पॉइंट होना चाहिए. साथ ही, यह कम से कम ये काम करना चाहिए:
इससे पता चलता है कि ऐड-ऑन लोड हो गया है. ऐड-ऑन लोड होने के दौरान, 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>
आपको अपने 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 ऐड-ऑन को डिप्लॉय करने के तरीके के बारे में दिए गए निर्देशों का पालन करके, ऐड-ऑन को डिप्लॉय करने की सुविधा सेट अप करें.
सैंपल चलाना
Meet पर जाएं.
गतिविधियां पर क्लिक करें.
आपके ऐड-ऑन सेक्शन में, आपको अपना ऐड-ऑन दिखेगा. ऐड-ऑन चलाने के लिए, इसे चुनें.
ज़्यादा सुविधाएं जोड़ना
अब जबकि आपके पास एक बेसिक साइड पैनल और मुख्य स्टेज है, तो अपने ऐड-ऑन में अन्य सुविधाएं जोड़ना शुरू करें:
- Meet ऐड-ऑन का इस्तेमाल करके, साथ मिलकर काम करना
- मुख्य स्क्रीन और साइड पैनल के बीच मैसेज भेजना
- स्क्रीन शेयर करने की सुविधा का इस्तेमाल करके, ऐड-ऑन का प्रमोशन करना
इन सुविधाओं को बनाने के लिए, GitHub पर मौजूद Meet के ऐड-ऑन के सैंपल को रेफ़रंस के तौर पर इस्तेमाल करें.