หน้านี้ได้รับการแปลโดย 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 ไว้กับโมดูล ผู้ใช้ TypeScript ควรตั้งค่า moduleResolution เป็น "bundler" ภายใน tsconfig.json ของโปรเจ็กต์ เพื่อให้ข้อกำหนด "exports" ของ package.json เปิดใช้การนำเข้าการส่งออกแพ็กเกจการแชร์หน้าจอ

gstatic

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

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 ใหม่และแสดงเนื้อหา "hello, world" ที่กำหนดเอง

<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 พร้อมกับ Meet Add-ons SDK โดยทำดังนี้

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 เมื่อเรียกใช้ในเครื่อง จะมีข้อผิดพลาดที่ระบุว่า

Missing required Meet
SDK URL parameter: meet_sdk

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

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

การติดตั้งใช้งานส่วนเสริมมี 2 ขั้นตอนดังนี้

ก่อนอื่นคุณต้องทําการติดตั้งใช้งานโค้ดจากการเริ่มต้นอย่างรวดเร็วนี้กับเว็บไซต์ที่คุณเป็นเจ้าของ โดยใช้โซลูชันการติดตั้งใช้งานที่คุณต้องการ ระบบจะติดตั้งใช้งาน ตัวอย่างส่วนเสริม Google Meet อย่างเป็นทางการใน GitHub โดยใช้เวิร์กโฟลว์ GitHub ไปยัง GitHub Pages แต่คุณก็ใช้เครื่องมืออย่าง Firebase Hosting ได้เช่นกัน
เมื่อทำให้แอปพลิเคชันใช้งานได้แล้ว คุณต้องตั้งค่าการติดตั้งใช้งานส่วนเสริมโดยทำตามวิธีการเพื่อติดตั้งใช้งานส่วนเสริม Meet การทำตามคู่มือการติดตั้งใช้งานนั้นจะสร้างส่วนเสริม Meet ขั้นสุดท้ายซึ่งเป็น iframe ภายใน Meet ของแอปพลิเคชันที่คุณติดตั้งใช้งานในขั้นตอนที่ 1

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

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

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

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

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