इस पेज में बताया गया है कि साइड पैनल और मुख्य स्टेज वाले पेज कैसे बनाए जाते हैं Meet का वेब ऐड-ऑन.
Google Meet ऐड-ऑन SDK टूल,
gstatic का JavaScript बंडल. यह ऐसा डोमेन है जो स्टैटिक कॉन्टेंट उपलब्ध कराता है.
Meet ऐड-ऑन SDK टूल का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन में यह स्क्रिप्ट टैग जोड़ें:
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
Meet ऐड-ऑन SDK टूल की सुविधा, window.meet.addon में उपलब्ध है.
रेफ़रंस दस्तावेज़ देखने के लिए, संसाधन
सारांश पर क्लिक करें.
बताएं कि ऐड-ऑन लोड हो गया है
Meet आपको लोड होने वाली स्क्रीन दिखाता है. ऐसा तब होता है, जब ऐड-ऑन लोड हो रहा है. जब यह ऐड-ऑन सेशन है स्थापना, Meet इसे पूरा ऐड-ऑन लोड हो गया हो और उपयोगकर्ता तीसरे पक्ष के कॉन्टेंट के साथ इंटरैक्ट कर सकता है.
साइड-पैनल पेज बनाना
साइड पैनल में, इंस्टॉल किए गए वे ऐड-ऑन दिखते हैं जिन्हें आपने इंस्टॉल किया है
चुनने और इस्तेमाल करने की अनुमति है.
ऐड-ऑन चुनने के बाद, iframe पेज के उस हिस्से को लोड करता है
पैनल का यूआरएल
ऐड-ऑन मेनिफ़ेस्ट में बताए गए हैं. यह ऐसा होना चाहिए
आपके ऐप्लिकेशन का एंट्री पॉइंट. Meet ऐड-ऑन SDK टूल की सुविधाओं को ऐक्सेस करने के लिए
तो आपको sidePanelClient इंस्टैंशिएट करना होगा.
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const sidePanelClient = await session.getSidePanelClient();
यहां एक कोड स्निपेट दिया गया है, जिसमें साथ मिलकर काम करने का तरीका बताया गया है:
<html style="width: 100%; height: 100%">
<head>
<title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Side Panel Add-on</h1>
<div>
<div>
<button id="start-collaboration">
startCollaboration
</button>
</div>
<div>
Collaboration Side Panel URL:
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/newSidePanelPage.html" />
</div>
<div>
Main Stage URL:
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
value="https://your_add_on_origin.url/mainStagePage.html" />
</div>
<div>
Collaboration start state data:
<input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
value="abc123" />
</div>
</div>
</div>
<script>
let sidePanelClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
sidePanelClient = await session.createSidePanelClient();
console.log("Successfully constructed side panel client.");
document
.getElementById('start-collaboration')
.addEventListener(
'click', async () => {
const sidePanelIframeUrlInputElement =
document.getElementById('sidePanelIframeUrl');
const mainStageIframeUrlInputElement =
document.getElementById('mainStageIframeUrl');
const additionalPropertyInputElement =
document.getElementById('additionalProperty');
await sidePanelClient.startCollaboration({
// Side panel is replaced with a new page.
sidePanelUrl: sidePanelIframeUrlInputElement.value,
// Main stage loads a large work area.
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: JSON.stringify({
additionalProperty: additionalPropertyInputElement.value
}),
});
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>
मुख्य स्टेज वाला पेज बनाएं
मुख्य स्टेज, वह मुख्य फ़ोकस होता है जहां ऐड-ऑन दिखाया जा सकता है
अगर ज़्यादा बड़े स्तर की ज़रूरत हो. दूसरे क्रिएटर्स के साथ मिलकर वीडियो बनाने के बाद, मुख्य स्टेज खुल जाता है
शुरू होता है. Meet ऐड-ऑन SDK टूल की सुविधाओं को ऐक्सेस करने के लिए,
स्टेज में, क्लाइंट ऑब्जेक्ट का इस्तेमाल किया जा सकता है
MeetMainStageClient
:
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
const mainStageClient = await session.createMainStageClient();
यहां एक कोड स्निपेट दिया गया है, जो
स्टेज पेज (पिछले स्निपेट में mainStagePage.html) और इसमें एक कॉल शामिल है
बटन क्लिक की प्रतिक्रिया में getCollaborationStartingState के लिए:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.9.1/meet.addons.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0; background: white;">
<div style="display: flex; flex-direction: column; height: 100%">
<h1>Main Stage Add-on</h1>
<div>
<div>
<button id="get-collaboration-starting-state">
Get Collaboration Starting State's Additional Property
</button>
</div>
<div id="receivedCollaborationStartingStateProperty"
style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
</div>
</div>
<script>
let mainStageClient;
async function init() {
const session = await window.meet.addon.createAddonSession({
cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
});
console.log("Successfully constructed the add-on session.");
const mainStageClient = await session.createMainStageClient();
console.log("Successfully constructed main stage client.");
document
.getElementById('get-collaboration-starting-state')
.addEventListener(
'click', async () => {
const startingState =
await mainStageClient.getCollaborationStartingState();
const startingStateData = JSON.parse(startingState.additionalData);
document.getElementById(
'receivedCollaborationStartingStateProperty').textContent =
startingStateData.additionalProperty;
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>