หน้านี้ได้รับการแปลโดย Cloud Translation API

การเริ่มต้นใช้งานส่วนเสริมของ Meet

คู่มือนี้จะอธิบายวิธีตั้งค่าและเรียกใช้ส่วนเสริม Google Meet ตัวอย่างด้วยการสร้างเวทีหลักและแผงด้านข้าง ตัวอย่าง "Hello World" ในหน้านี้ยังมีอยู่ใน GitHub ในรูปแบบส่วนเสริม Meet ที่สมบูรณ์ซึ่งสร้างขึ้นด้วย JavaScript พื้นฐานหรือ Next.js TypeScript

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

ติดตั้งและนําเข้า SDK

คุณสามารถเข้าถึง SDK โดยใช้ npm หรือ gstatic

npm (แนะนำ)

หากโปรเจ็กต์ใช้ npm ให้ทำตามวิธีการสำหรับ แพ็กเกจ npm ของ SDK ของส่วนเสริม Meet

ก่อนอื่น ให้ติดตั้งแพ็กเกจ npm โดยทำดังนี้

npm install @googleworkspace/meet-addons

จากนั้น SDK ของส่วนเสริม Meet จะพร้อมใช้งานโดยนำเข้าอินเทอร์เฟซ MeetAddonExport ดังนี้

import {meet} from '@googleworkspace/meet-addons/meet.addons';

สําหรับผู้ใช้ TypeScript ระบบจะรวมคําจํากัดความ TypeScript ไว้ในโมดูล

gstatic

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

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

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

SDK ของส่วนเสริม Meet พร้อมใช้งานผ่านอินเทอร์เฟซ MeetAddon ในส่วน window.meet.addon

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

แผงด้านข้างจะแสดงส่วนเสริมที่ติดตั้งไว้ซึ่งคุณเลือกและใช้ได้ เมื่อเลือกส่วนเสริมแล้ว ไฟล์ iframe จะโหลด URL ของแผงด้านข้างที่คุณระบุในไฟล์ Manifest ของส่วนเสริม การดำเนินการนี้ควรเป็นจุดแรกเข้าของแอป และควรทําสิ่งต่อไปนี้เป็นอย่างน้อย

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

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีที่เซสชันสร้างไคลเอ็นต์แผงด้านข้าง และวิธีที่ไคลเอ็นต์แผงด้านข้างเริ่มกิจกรรมในเวทีหลัก

JS พื้นฐาน + Webpack

ในไฟล์ใหม่ที่ชื่อ main.js ให้กําหนดฟังก์ชันที่สร้างเซสชันของส่วนเสริม ไคลเอ็นต์แผงด้านข้าง และเริ่มกิจกรรมเมื่อมีการคลิกปุ่มที่มีรหัส 'start-activity' ดังนี้

import { meet } from '@googleworkspace/meet-addons/meet.addons';

const CLOUD_PROJECT_NUMBER = 'CLOUD_PROJECT_NUMBER';
const MAIN_STAGE_URL = 'MAIN_STAGE_URL';

/**
 * Prepares the Add-on Side Panel Client, and adds an event to launch the
 * activity in the main stage when the main button is clicked.
 */
export async function setUpAddon() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    const sidePanelClient = await session.createSidePanelClient();
    document
        .getElementById('start-activity')
        .addEventListener('click', async () => {
            await sidePanelClient.startActivity({
                mainStageUrl: MAIN_STAGE_URL
            });
        });
}

ในไฟล์ใหม่ที่ชื่อ SidePanel.html ให้กำหนดปุ่มที่เปิดใช้งานกิจกรรม และเรียกใช้ฟังก์ชันจาก main.js เมื่อโหลดเอกสาร

<html>
<head>
    <title>Meet Add-on Side Panel</title>
    <script src="./main.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div>This is the Add-on Side Panel. Only you can see this.</div>
    <button id="start-activity">Launch Activity in Main Stage.</button>

    <script>
        document.body.onload = () => {
            // Library name (`helloWorld`) is defined in the webpack config.
            // The function (`setUpAddon`) is defined in main.js.
            helloWorld.setUpAddon();
        };
    </script>
</body>
</html>

นอกจากนี้ คุณจะต้องรวม SDK ของส่วนเสริม Meet ไว้กับ main.js และแสดงในคลัง เราขอแนะนำให้ดำเนินการโดย ติดตั้ง webpack และใช้ตัวเลือก library ในไฟล์ webpack.config.js

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

เพิ่ม Page ใหม่เพื่อแสดงแผงด้านข้าง หน้านี้จะสร้างเซสชันของส่วนเสริมและไคลเอ็นต์แผงด้านข้างเมื่อโหลด และเริ่มกิจกรรมเมื่อมีการคลิกปุ่ม

'use client';

import { useEffect, useState } from 'react';
import {
    meet,
    MeetSidePanelClient,
} from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    const [sidePanelClient, setSidePanelClient] = useState<MeetSidePanelClient>();

    // Launches the main stage when the main button is clicked.
    async function startActivity(e: unknown) {
        if (!sidePanelClient) {
            throw new Error('Side Panel is not yet initialized!');
        }
        await sidePanelClient.startActivity({
            mainStageUrl: 'MAIN_STAGE_URL'
        });
    }

    /**
     * Prepares the Add-on Side Panel Client.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            setSidePanelClient(await session.createSidePanelClient());
        })();
    }, []);

    return (
        <>
            <div>
                This is the Add-on Side Panel. Only you can see this.
            </div>
            <button onClick={startActivity}>
                Launch Activity in Main Stage.
            </button>
        </>
    );
}

แทนที่ค่าต่อไปนี้

CLOUD_PROJECT_NUMBER: หมายเลขโปรเจ็กต์ Google Cloud
MAIN_STAGE_URL: URL ของเวทีหลักที่คุณสร้างในขั้นตอนถัดไป

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

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

ตัวอย่างโค้ดต่อไปนี้แสดงตัวอย่างหน้าเวทีหลักที่แสดงผล div ที่กำหนดเองเพื่อพูดว่า "Hello, world!"

JS พื้นฐาน + Webpack

เพิ่มฟังก์ชันต่อไปนี้ลงในไฟล์ main.js ที่คุณสร้างไว้แล้วเพื่อให้สเตจหลักส่งสัญญาณว่าโหลดเสร็จแล้ว

/**
 * Prepares the Add-on Main Stage Client, which signals that the add-on has
 * successfully launched in the main stage.
 */
export async function initializeMainStage() {
    const session = await meet.addon.createAddonSession({
        cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    });
    await session.createMainStageClient();
}

จากนั้นเพิ่มไฟล์ MainStage.html ใหม่ ซึ่งจะเรียกใช้ฟังก์ชัน initializeMainStage ใหม่และแสดงเนื้อหา "สวัสดีชาวโลก" ที่กําหนดเอง

<html>
<body style="width: 100%; height: 100%; margin: 0">
    <div>
        This is the Add-on Main Stage. Everyone in the call can see this.
    </div>
    <div>Hello, world!</div>

    <script>
        document.body.onload = () => {
            helloWorld.initializeMainStage();
        };
    </script>
</body>
</html>

Next.js

เพิ่ม Page เพื่อแสดงเวทีหลัก หน้านี้จะสร้างเซสชันของส่วนเสริมและไคลเอ็นต์ของแผงด้านข้างเมื่อโหลด และแสดงเนื้อหา "Hello World" ที่กําหนดเอง

'use client';

import { useEffect } from 'react';
import { meet } from '@googleworkspace/meet-addons/meet.addons';

export default function Page() {
    /**
     * Prepares the Add-on Main Stage Client, which signals that the add-on
     * has successfully launched in the main stage.
     */
    useEffect(() => {
        (async () => {
            const session = await meet.addon.createAddonSession({
                cloudProjectNumber: 'CLOUD_PROJECT_NUMBER',
            });
            await session.createMainStageClient();
        })();
    }, []);

    return (
        <>
            <div>
                This is the Add-on Main Stage.
                Everyone in the call can see this.
            </div>
            <div>Hello, world!</div>
        </>
    );
}

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

เรียกใช้ตัวอย่าง

หากต้องการเรียกใช้แบบในเครื่อง ให้ทําดังนี้

JS พื้นฐาน + Webpack

เรียกใช้ webpack เพื่อรวมไฟล์ main.js เข้ากับ SDK ของส่วนเสริม Meet โดยทำดังนี้

npx webpack

เปิดไฟล์ SidePanel.html และไฟล์ MainStage.html ในเบราว์เซอร์ใดก็ได้ ซึ่งควรมีลักษณะเหมือนกับการติดตั้งใช้งานตัวอย่าง JS พื้นฐานบน GitHub ไปยัง SidePanel.html และ MainStage.html ใน GitHub Pages

Next.js

เรียกใช้ถัดไป

next dev

ไปที่ http://localhost:3000/sidepanel หรือ http://localhost:3000/mainstage ซึ่งควรมีลักษณะเหมือนกับการทำให้ตัวอย่าง Next.js ใน GitHub ใช้งานได้ใน SidePanel.html และ MainStage.html ใน GitHub Pages

หมายเหตุ: ในคอนโซล Chrome DevTools เมื่อทำงานในเครื่อง มีข้อผิดพลาดที่ระบุว่า

Missing required Meet
SDK URL parameter: meet_sdk

เหตุการณ์นี้เป็นเรื่องปกติจนกว่าคุณจะเรียกใช้แอปพลิเคชันภายใน Meet เนื่องจาก Meet จะจัดการการส่งพารามิเตอร์ URL นี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ได้ที่หัวข้อจัดการเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับส่วนเสริมของ Meet

ติดตั้งใช้งานส่วนเสริม Meet

ตั้งค่าการติดตั้งใช้งานส่วนเสริมโดยทําตามวิธีการติดตั้งใช้งานส่วนเสริมของ Meet

เรียกใช้ตัวอย่าง

ไปที่ Meet
คลิกกิจกรรม
คุณจะเห็นส่วนเสริมในส่วนส่วนเสริมของคุณ เลือกเพื่อเรียกใช้ส่วนเสริม

เพิ่มฟีเจอร์อื่นๆ

เมื่อคุณมีแผงด้านข้างและหน้าจอหลักพื้นฐานแล้ว ก็เริ่มเพิ่มฟีเจอร์อื่นๆ ลงในส่วนเสริมได้ ดังนี้

เราขอแนะนำให้ใช้ตัวอย่างส่วนเสริมของ Meet ใน GitHub เป็นข้อมูลอ้างอิงในการสร้างฟีเจอร์เหล่านี้