สร้างแผงด้านข้างและหน้าขั้นตอนหลัก

หน้านี้จะอธิบายวิธีสร้างแผงด้านข้างและหน้าขั้นตอนหลักเพื่อแสดงส่วนเสริม Meet สำหรับเว็บ ซึ่งช่วยให้คุณจัดการกิจกรรมหรืองานที่ผู้เข้าร่วมคนอื่นๆ สามารถทำงานร่วมกันใน Google Meet ได้

เวทีหลักของ SDK ส่วนเสริม Meet และแผงด้านข้าง
เวทีหลักและแผงด้านข้างของส่วนเสริม Meet สำหรับเว็บ

SDK ส่วนเสริมของ Google Meet มีพร้อมให้ใช้งานเป็นแพ็กเกจ JavaScript จาก gstatic ซึ่งเป็นโดเมนที่แสดงเนื้อหาแบบคงที่

หากต้องการใช้ SDK ส่วนเสริม Meet ให้เพิ่มแท็กสคริปต์ต่อไปนี้ลงในแอป

<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>

ฟังก์ชัน SDK ของส่วนเสริม Meet ให้บริการภายใต้ window.meet.addon หากต้องการดูเอกสารอ้างอิง โปรดดูข้อมูลสรุปของทรัพยากร

สร้างหน้าแผงด้านข้าง

แผงด้านข้างจะแสดงส่วนเสริมที่ติดตั้งอยู่ในปัจจุบันซึ่งคุณเลือกและใช้งานได้ หากต้องการสร้างอินสแตนซ์แผงด้านข้าง คุณสามารถใช้ออบเจ็กต์ไคลเอ็นต์ 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/latest/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/latest/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>