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ụ "Xin chào thế giới" trên trang này cũng có trên GitHub dưới dạng các tiện ích bổ sung hoàn chỉnh của Meet được xây dựng 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.
Sân khấu chính và bảng điều khiển bên của tiện ích bổ sung cho web của Meet.

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 tiện ích bổ sung của 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. Người dùng TypeScript nên đặt moduleResolution thành "bundler" trong tsconfig.json của dự án để đặc tả "xuất" package.json cho phép nhập xuất gói chia sẻ màn hình.

gstatic

SDK tiện ích bổ sung của Google Meet có sẵn dưới dạng gói JavaScript từ gstatic, một miền cung cấp nội dung tĩnh.

Để sử dụng SDK tiện ích bổ sung của Meet, hãy thêm thẻ tập lệnh sau vào ứng dụng của bạn:

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

SDK tiện ích bổ sung của Meet có sẵn 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 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ối thiểu 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 hiển thị màn hình tải trong khi tiện ích bổ sung đ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 không được gọi phương thức createAddonSession() cho đến khi nội dung của bạn tải xong.

  2. Tạo ứng dụng khách 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 thực thể MeetSidePanelClient giao diện. Điều này giúp bạn kiểm soát trải nghiệm SDK tiện ích bổ sung chính của 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 của bạn trong sân khấu chính.

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

JS cơ bản + Webpack

Trong một tệp mới có tên là main.js, hãy xác định một hàm tạo phiên tiện ích bổ sung, ứng dụng khách bảng điều khiển bên và bắt đầu hoạt động khi một nút có mã nhận dạng 'start-activity' được nhấp:

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 bổ sung của Meet với main.js và hiển thị chúng trong một 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 của bạn:

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 khách bảng điều khiển bên khi tải, đồng thời bắt đầu hoạt động khi một nút được nhấp:

'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 trên Google Cloud.

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

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

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

Mã mẫu sau đây cho thấy một ví dụ về trang sân khấu chính hiển thị 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 quá trình tải đã hoàn tất:

/**
 * 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 một 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 khách bảng điều khiển bên khi tải, đồng thời hiển thị nội dung "xin chào thế giới" tuỳ chỉnh:

'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 trê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 của Meet:

npx webpack

Mở tệp SidePanel.html và tệp MainStage.html trong bất kỳ trình duyệt nào. MainStage.html

Next.js

Chạy Next:

next dev

Chuyển đến http://localhost:3000/sidepanel hoặc http://localhost:3000/mainstage. MainStage.html

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

Việc triển khai tiện ích bổ sung là một quy trình gồm 2 bước:

  1. Trước tiên, bạn phải triển khai mã từ hướng dẫn bắt đầu nhanh này đến một trang web mà bạn sở hữu, bằng cách sử dụng bất kỳ giải pháp triển khai nào mà bạn muốn. Các tiện ích bổ sung mẫu chính thức của Google Meet trên GitHub được triển khai bằng quy trình làm việc của GitHub đến Trang GitHub, nhưng bạn cũng có thể sử dụng các công cụ như Firebase Hosting.

  2. Sau khi triển khai ứng dụng, bạn phải 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 Triển khai tiện ích bổ sung của Meet. Việc làm theo hướng dẫn triển khai đó sẽ tạo ra tiện ích bổ sung cuối cùng của Meet, đó là một iframe trong Meet của ứng dụng mà bạn đã triển khai ở bước một.

Chạy mẫu

  1. Chuyển đến Meet.

  2. Nhấp vào nút công cụ cuộc họp Biểu tượng công cụ cuộc họp..

  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 tiện ích bổ sung đó để chạy.

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

Giờ đây, bạn đã có một bảng điều khiển bên và sân khấu 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 các tiện ích bổ sung mẫu của Meet trên GitHub làm tài liệu tham khảo để xây dựng các tính năng này.