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

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

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

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

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

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

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

ระบุว่าการโหลดส่วนเสริมเสร็จสมบูรณ์แล้ว

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

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

แผงด้านข้างจะแสดงส่วนเสริมที่ติดตั้งไว้ สามารถเลือกและใช้งานได้ เมื่อคุณเลือกส่วนเสริมแล้ว iframe จะโหลดด้านข้าง URL ของแผงที่คุณ ที่ระบุในไฟล์ Manifest ของส่วนเสริม ค่านี้ควรเป็น จุดแรกเข้าของแอป วิธีเข้าถึงฟังก์ชันการทำงานของ SDK ส่วนเสริม Meet ในแผงด้านข้าง คุณต้องสร้างอินสแตนซ์ 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>
                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>

สร้างหน้าขั้นตอนหลัก

เวทีหลักคือพื้นที่โฟกัสหลักที่คุณสามารถแสดงส่วนเสริมได้ หากต้องการพื้นที่การทำงานขนาดใหญ่ขึ้น เวทีหลักจะเปิดขึ้นเมื่อมีการทำงานร่วมกัน เริ่ม วิธีเข้าถึงฟังก์ชันการทำงานของ SDK ส่วนเสริม Meet ใน คุณสามารถใช้ออบเจ็กต์ไคลเอ็นต์ 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.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">
                    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>