সাইড প্যানেল এবং প্রধান স্টেজ পেজ তৈরি করুন

ওয়েবের জন্য Meet অ্যাড-অন দেখানোর জন্য সাইড প্যানেল এবং প্রধান স্টেজ পৃষ্ঠাগুলি কীভাবে তৈরি করতে হয় তা এই পৃষ্ঠায় বর্ণনা করা হয়েছে। এটি আপনাকে কার্যকলাপ বা কাজগুলি পরিচালনা করতে দেয় যেখানে অন্যান্য অংশগ্রহণকারীরা Google Meet-এর মধ্যে সহযোগিতা করতে পারে।

Meet অ্যাড-অন SDK প্রধান স্টেজ এবং সাইড প্যানেল।
ওয়েবের জন্য 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 এটিকে অ্যাড-অন থেকে একটি সংকেত হিসাবে বিবেচনা করে যে লোডিং শেষ হয়েছে এবং ব্যবহারকারী তৃতীয় পক্ষের সামগ্রীর সাথে ইন্টারঅ্যাক্ট করতে পারেন।

একটি পার্শ্ব-প্যানেল পৃষ্ঠা তৈরি করুন

পাশের প্যানেলটি বর্তমানে ইনস্টল করা অ্যাড-অনগুলি প্রদর্শন করে যা আপনি নির্বাচন করতে এবং ব্যবহার করতে পারেন। সাইড প্যানেলটি চালু করতে, আপনি ক্লায়েন্ট অবজেক্টটি ব্যবহার করতে পারেন MeetSidePanelClient :

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="set-collaboration-starting-state">
                    setCollaborationStartingState
                </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('set-collaboration-starting-state')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalDataInputElement =
                            document.getElementById('additionalData');
                        await sidePanelClient.setCollaborationStartingState({
                            sidePanelUrl: sidePanelIframeUrlInputElement.value,
                            mainStageUrl: mainStageIframeUrlInputElement.value,
                            additionalData: additionalDataInputElement.value,
                        });
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

একটি প্রধান পর্যায় পৃষ্ঠা তৈরি করুন

প্রধান পর্যায় হল সেই এলাকা যা আপনাকে নির্বাচিত অ্যাড-অনের বিষয়বস্তু প্রদর্শন করতে দেয়। সাইড প্যানেল পৃষ্ঠা তৈরি করার পরে, আপনি মূল পর্যায়টি ইনস্ট্যান্ট করতে ক্লায়েন্ট অবজেক্ট MeetMainStageClient ব্যবহার করতে পারেন:

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
  const mainStageClient = await session.createMainStageClient();

ওয়েবের জন্য Meet অ্যাড-অন ব্যবহার করার জন্য একটি প্রধান স্টেজ পৃষ্ঠা তৈরি করতে এগিয়ে যান। নীচের কোড স্নিপেটটি একটি প্রধান পর্যায়ের একটি উদাহরণ, যার মধ্যে রয়েছে পাশের প্যানেল পৃষ্ঠাটি লোড করা এবং আনলোড করা:

<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>