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

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

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

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

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

<script src="https://www.gstatic.com/meetjs/addons/1.0.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.createSidePanelClient();

แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud

นี่คือข้อมูลโค้ดที่แสดงวิธีเริ่มกิจกรรม

<html style="width: 100%; height: 100%">

<head>
    <title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity">
                    startActivity
                </button>
            </div>
            <div>
                Activity 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>
                Activity 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-activity')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalPropertyInputElement =
                            document.getElementById('additionalProperty');
                        await sidePanelClient.startActivity({
                            // 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>

แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud

สร้างหน้าเวทีหลัก

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

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

แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ โปรเจ็กต์ Google Cloud

ต่อไปนี้เป็นข้อมูลโค้ดที่แสดงตัวอย่างของ หน้าพื้นที่งาน (mainStagePage.html ในข้อมูลโค้ดก่อนหน้านี้) และรวมการเรียก ไปยัง getActivityStartingState เพื่อตอบสนองการคลิกปุ่ม:

<html style="width: 100%; height: 100%">

<head>
    <title>Main Stage Add-on</title>
    <script src="https://www.gstatic.com/meetjs/addons/1.0.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-activity-starting-state">
                    Get Activity Starting State's Additional Property
                </button>
            </div>
            <div id="receivedActivityStartingStateProperty"
                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-activity-starting-state')
                .addEventListener(
                    'click', async () => {
                        const startingState =
                            await mainStageClient.getActivityStartingState();
                        const startingStateData = JSON.parse(startingState.additionalData);
                        document.getElementById(
                            'receivedActivityStartingStateProperty').textContent =
                            startingStateData.additionalProperty;
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

แทนที่ CLOUD_PROJECT_NUMBER ด้วยหมายเลขโปรเจ็กต์ Google Cloud