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

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

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

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

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

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

npm (แนะนำ)

หากโครงการของคุณใช้ npm คุณสามารถทำตามคำแนะนำสำหรับ แพ็กเกจ SDK NPM ของส่วนเสริม 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

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

Missing required Meet
SDK URL parameter: meet_sdk

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

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

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

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

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

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

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

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