একটি Meet ওয়েব অ্যাড-অন-এর সাইড প্যানেল এবং প্রধান স্টেজ পৃষ্ঠাগুলি কীভাবে তৈরি করবেন তা এই পৃষ্ঠায় বর্ণনা করা হয়েছে।
Google Meet অ্যাড-অন SDK gstatic থেকে জাভাস্ক্রিপ্ট বান্ডেল হিসাবে উপলব্ধ, একটি ডোমেন যা স্ট্যাটিক কন্টেন্ট পরিবেশন করে।
Meet অ্যাড-অন SDK ব্যবহার করতে, আপনার অ্যাপে নিম্নলিখিত স্ক্রিপ্ট ট্যাগ যোগ করুন:
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"></script>
মিট অ্যাড-অন SDK কার্যকারিতা window.meet.addon অধীনে উপলব্ধ। রেফারেন্স ডকুমেন্টেশন দেখতে, সম্পদ সারাংশ দেখুন।
নির্দেশ করুন অ্যাড-অন লোডিং সম্পূর্ণ হয়েছে৷
অ্যাড-অন লোড হওয়ার সময় Meet একটি লোডিং স্ক্রিন দেখায়। অ্যাড-অন সেশন প্রতিষ্ঠিত হলে, Meet এটিকে অ্যাড-অন থেকে একটি সংকেত হিসাবে বিবেচনা করে যে লোডিং শেষ হয়েছে এবং ব্যবহারকারী তৃতীয় পক্ষের সামগ্রীর সাথে ইন্টারঅ্যাক্ট করতে পারেন।
একটি পার্শ্ব-প্যানেল পৃষ্ঠা তৈরি করুন
পাশের প্যানেল ইনস্টল করা অ্যাড-অনগুলি প্রদর্শন করে যা আপনি নির্বাচন করতে এবং ব্যবহার করতে পারেন। একবার আপনি আপনার অ্যাড-অন নির্বাচন করলে, একটি আইফ্রেম আপনার অ্যাড-অন ম্যানিফেস্টে নির্দিষ্ট করা পার্শ্ব প্যানেল URL লোড করে। সাইড প্যানেলে 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.7.0/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>
<input type="text" id="sidePanelIframeUrl" style="margin-left: 20px"
value="https://your_side_panel_iframe.url" />
</div>
<div>
<input type="text" id="mainStageIframeUrl" style="margin-left: 20px"
value="https://your_main_stage_iframe.url" />
</div>
<div>
<input type="text" id="additionalData" style="margin-left: 20px" value="additional data" />
</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 additionalDataInputElement =
document.getElementById('additionalData');
await sidePanelClient.start-collaboration({
sidePanelUrl: sidePanelIframeUrlInputElement.value,
mainStageUrl: mainStageIframeUrlInputElement.value,
additionalData: additionalDataInputElement.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();
এখানে একটি কোড স্নিপেট রয়েছে যা একটি প্রধান পর্যায়ের উদাহরণ দেখায়, যার মধ্যে getCollaborationStartingState অন্তর্ভুক্ত রয়েছে:
<html style="width: 100%; height: 100%">
<head>
<title>Main Stage Add On</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.0/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">
getCollaborationStartingState
</button>
</div>
<div id="receivedCollaborationStartingState"
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 () => {
document.getElementById(
'receivedCollaborationStartingState').textContent =
JSON.stringify(
await mainStageClient.getCollaborationStartingState());
});
}
document.body.onload = () => {
init();
};
</script>
</body>
</html>