หน้านี้ได้รับการแปลโดย 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

Next.js

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

next dev

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

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

Missing required Meet
SDK URL parameter: meet_sdk

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

ทำให้ส่วนเสริม Meet ใช้งานได้

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

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

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

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

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

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