Hướng dẫn bắt đầu nhanh về Tiện ích bổ sung của Meet

Hướng dẫn này mô tả cách thiết lập và chạy một Tiện ích bổ sung mẫu của Google Meet bằng cách tạo một sân khấu chính và bảng điều khiển bên. Các ví dụ về "Xin chào thế giới" trên trang này cũng có trên GitHub dưới dạng Tiện ích Meet hoàn chỉnh được tạo bằng JavaScript cơ bản hoặc Next.js TypeScript.

Màn hình chính và bảng điều khiển bên của SDK tiện ích bổ sung Meet.
Phiên họp chính và bảng điều khiển bên của Tiện ích bổ sung Meet trên web.

Cài đặt và nhập SDK

Bạn có thể truy cập vào SDK bằng npm hoặc bằng gstatic.

Nếu dự án của bạn sử dụng npm, bạn có thể làm theo hướng dẫn cho gói npm SDK của tiện ích bổ sung Meet.

Trước tiên, hãy cài đặt gói npm:

npm install @googleworkspace/meet-addons

Sau đó, bạn có thể sử dụng SDK Tiện ích bổ sung của Meet bằng cách nhập giao diện MeetAddonExport:

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

Đối với người dùng TypeScript, các định nghĩa TypeScript được đóng gói cùng với mô-đun.

gstatic

SDK Tiện ích của Google Meet có sẵn dưới dạng gói JavaScript từ gstatic, một miền phân phát nội dung tĩnh.

Để sử dụng SDK Tiện ích Meet, hãy thêm thẻ tập lệnh sau vào ứng dụng:

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

Bạn có thể sử dụng SDK Tiện ích bổ sung của Meet thông qua giao diện MeetAddon trong window.meet.addon.

Tạo trang bảng điều khiển bên

Bảng điều khiển bên hiển thị các tiện ích bổ sung đã cài đặt mà bạn có thể chọn và sử dụng. Sau khi bạn chọn tiện ích bổ sung, một iframe sẽ tải URL của bảng điều khiển bên mà bạn chỉ định trong tệp kê khai tiện ích bổ sung. Đây phải là điểm truy cập của ứng dụng và ít nhất phải thực hiện những việc sau:

  1. Cho biết quá trình tải tiện ích bổ sung đã hoàn tất. Meet sẽ hiển thị màn hình tải trong khi trình bổ trợ đang tải. Khi phiên tiện ích bổ sung được thiết lập bằng cách gọi phương thức createAddonSession(), Meet sẽ coi đây là tín hiệu từ tiện ích bổ sung cho biết quá trình tải đã hoàn tất và người dùng có thể tương tác với nội dung của bên thứ ba. Tiện ích bổ sung của bạn không được gọi phương thức createAddonSession() cho đến khi nội dung tải xong.

  2. Tạo ứng dụng bảng điều khiển bên. Để truy cập vào SDK tiện ích bổ sung của Meet trong bảng điều khiển bên, bạn phải tạo bản sao giao diện MeetSidePanelClient. Điều này giúp bạn kiểm soát trải nghiệm chính của SDK Tiện ích bổ sung Meet.

  3. Bắt đầu hoạt động. Điều này cho phép người khác tham gia tiện ích bổ sung của bạn và tuỳ ý mở tiện ích bổ sung trong màn hình chính.

Mã mẫu sau đây cho biết cách phiên tạo ứng dụng bảng điều khiển bên và cách ứng dụng bảng điều khiển bên bắt đầu một hoạt động trong giai đoạn chính:

JS cơ bản + Webpack

Trong một tệp mới có tên main.js, hãy xác định một hàm tạo phiên tiện ích bổ sung, ứng dụng ngăn bên và bắt đầu hoạt động khi người dùng nhấp vào nút có mã nhận dạng '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
            });
        });
}

Trong một tệp mới có tên là SidePanel.html, hãy xác định nút khởi chạy hoạt động và gọi hàm từ main.js khi tải tài liệu:

<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>

Bạn cũng cần gói SDK Tiện ích Meet với main.js và hiển thị các tiện ích đó trong thư viện. Bạn nên thực hiện việc này bằng cách cài đặt webpack và sử dụng tuỳ chọn library trong tệp webpack.config.js:

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

Next.js

Thêm một Page mới để hiển thị bảng điều khiển bên. Trang này tạo một phiên tiện ích bổ sung và ứng dụng bảng điều khiển bên khi tải, đồng thời khởi động hoạt động khi người dùng nhấp vào một nút:

'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>
        </>
    );
}

Thay thế nội dung sau:

  • CLOUD_PROJECT_NUMBER: số dự án của dự án Google Cloud.

  • MAIN_STAGE_URL: URL của sân khấu chính mà bạn tạo trong bước tiếp theo.

Tạo trang sân khấu chính

Phiên bản chính là khu vực tập trung chính, nơi bạn có thể hiển thị tiện ích bổ sung nếu cần không gian làm việc lớn hơn. Giai đoạn chính sẽ mở ra sau khi hoạt động bắt đầu. Để truy cập các tính năng SDK của tiện ích bổ sung Meet trong màn hình chính, bạn phải sử dụng giao diện MeetMainStageClient.

Mã mẫu sau đây cho thấy ví dụ về một trang sân khấu chính hiển thị một div tuỳ chỉnh để nói "Xin chào thế giới!":

JS cơ bản + Webpack

Thêm hàm sau vào tệp main.js mà bạn đã tạo để sân khấu chính có thể báo hiệu rằng nó đã tải xong:

/**
 * 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();
}

Sau đó, hãy thêm một tệp MainStage.html mới. Tệp này sẽ gọi hàm initializeMainStage mới và hiển thị nội dung "xin chào thế giới" tuỳ chỉnh:

<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

Thêm Page để hiển thị sân khấu chính. Trang này tạo một phiên tiện ích bổ sung và ứng dụng bảng điều khiển bên khi tải, đồng thời hiển thị nội dung tuỳ chỉnh "xin chào thế giới":

'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>
        </>
    );
}

Thay thế CLOUD_PROJECT_NUMBER bằng số dự án của dự án Google Cloud.

Chạy mẫu

Để chạy cục bộ, hãy làm như sau:

JS cơ bản + Webpack

Chạy webpack để gói tệp main.js cùng với SDK Tiện ích bổ sung Meet:

npx webpack

Mở tệp SidePanel.html và tệp MainStage.html trong bất kỳ trình duyệt nào. Thao tác này sẽ giống như khi triển khai mẫu JS cơ bản trên GitHub vào SidePanel.html và MainStage.html trên GitHub Pages.

Next.js

Chạy tiếp theo:

next dev

Chuyển đến http://localhost:3000/sidepanel hoặc http://localhost:3000/mainstage. Các tệp này sẽ giống như khi triển khai mẫu Next.js trên GitHub vào SidePanel.html và MainStage.html trên GitHub Pages.

Triển khai tiện ích bổ sung của Meet

Thiết lập việc triển khai tiện ích bổ sung bằng cách làm theo hướng dẫn về cách Triển khai tiện ích Meet.

Chạy mẫu

  1. Chuyển đến Meet.

  2. Nhấp vào biểu tượng Hoạt động Biểu tượng cho các hoạt động..

  3. Trong phần Tiện ích bổ sung của bạn, bạn sẽ thấy tiện ích bổ sung của mình. Chọn mục đó để chạy tiện ích bổ sung.

Thêm tính năng khác

Giờ đây, khi đã có bảng điều khiển bên và màn hình chính cơ bản, bạn có thể bắt đầu thêm các tính năng khác vào tiện ích bổ sung:

Bạn nên sử dụng Tiện ích Meet mẫu trên GitHub làm tài liệu tham khảo để xây dựng các tính năng này.