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

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

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

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

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

npm [MPN] (แนะนำ)

หากโปรเจ็กต์ใช้ npm คุณสามารถทำตามวิธีการสำหรับ แพ็กเกจ npm ของ Meet add-ons SDK

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

npm install @googleworkspace/meet-addons

จากนั้น Meet add-ons SDK จะพร้อมใช้งานโดยการนำเข้าอินเทอร์เฟซ 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 ซึ่งเป็นโดเมนที่ให้บริการเนื้อหาแบบคงที่

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

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

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

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

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

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

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

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>

นอกจากนี้ คุณยังต้องรวม Meet ส่วนเสริม SDK กับ 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 ของหน้าจอหลักที่คุณสร้างในขั้นตอนถัดไป

สร้างหน้าจอหลัก

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

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

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

JS พื้นฐาน + Webpack

เรียกใช้ Webpack เพื่อรวมไฟล์ main.js กับ Meet add-ons SDK

npx webpack

เปิดไฟล์ SidePanel.html และ MainStage.html ในเบราว์เซอร์ใดก็ได้ MainStage.html

Next.js

เรียกใช้ Next ดังนี้

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ได้ด้วย
เมื่อติดตั้งใช้งานแอปพลิเคชันแล้ว คุณต้องตั้งค่าการติดตั้งใช้งาน ส่วนเสริมโดยทำตามวิธีการในหัวข้อ ติดตั้งใช้งานส่วนเสริม Meet คู่มือการติดตั้งใช้งานดังกล่าวจะสร้างส่วนเสริม Meet สุดท้ายซึ่งเป็น iframe ภายใน Meet ของแอปพลิเคชันที่คุณติดตั้งใช้งานในขั้นตอนที่ 1

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

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

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

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

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