Panduan memulai Add-on Meet

Panduan ini menjelaskan cara menyiapkan dan menjalankan contoh Add-on Google Meet dengan membuat panggung utama dan panel samping. Contoh "Hello World" di halaman ini juga tersedia di GitHub sebagai Add-on Meet lengkap yang dibuat dengan JavaScript dasar atau Next.js TypeScript.

Layar utama dan panel samping SDK Add-on Meet.
Panggung utama dan panel samping Add-on Web Meet.

Menginstal dan mengimpor SDK

Anda dapat mengakses SDK menggunakan npm atau menggunakan gstatic.

Jika project Anda menggunakan npm, Anda dapat mengikuti petunjuk untuk paket npm Meet Add-ons SDK.

Pertama, instal paket npm:

npm install @googleworkspace/meet-addons

Kemudian, SDK Add-on Meet tersedia dengan mengimpor antarmuka MeetAddonExport:

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

Untuk pengguna TypeScript, definisi TypeScript dikemas dengan modul.

gstatic

SDK Add-on Google Meet tersedia sebagai paket JavaScript dari gstatic, domain yang menayangkan konten statis.

Untuk menggunakan Meet Add-ons SDK, tambahkan tag skrip berikut ke aplikasi Anda:

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

SDK Add-on Meet tersedia melalui antarmuka MeetAddon di bagian window.meet.addon.

Membuat halaman panel samping

Panel samping menampilkan add-on terinstal yang dapat Anda pilih dan gunakan. Setelah Anda memilih add-on, iframe akan memuat URL panel samping yang Anda tentukan dalam manifes add-on. Ini harus menjadi titik entri aplikasi Anda, dan setidaknya harus melakukan hal berikut:

  1. Menunjukkan bahwa pemuatan add-on telah selesai. Meet menampilkan layar pemuatan saat add-on dimuat. Saat sesi add-on dibuat dengan memanggil metode createAddonSession(), Meet akan memperlakukannya sebagai sinyal dari add-on bahwa pemuatan telah selesai, dan bahwa pengguna dapat berinteraksi dengan konten pihak ketiga. Add-on Anda tidak boleh memanggil metode createAddonSession() hingga konten selesai dimuat.

  2. Buat klien panel samping. Untuk mengakses SDK Add-on Meet di panel samping, Anda harus membuat instance antarmuka MeetSidePanelClient. Hal ini memberikan kontrol atas pengalaman SDK Add-on Meet utama Anda.

  3. Mulai aktivitas. Tindakan ini memungkinkan orang lain bergabung ke add-on Anda dan secara opsional membuka add-on Anda di panggung utama.

Contoh kode berikut menunjukkan cara sesi membuat klien panel samping, dan cara klien panel samping memulai aktivitas di tahap utama:

JS Dasar + Webpack

Dalam file baru bernama main.js, tentukan fungsi yang membuat sesi add-on, klien panel samping, dan memulai aktivitas saat tombol dengan ID 'start-activity' diklik:

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

Dalam file baru bernama SidePanel.html, tentukan tombol yang meluncurkan aktivitas, dan panggil fungsi dari main.js saat dokumen dimuat:

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

Anda juga harus memaketkan SDK Add-on Meet dengan main.js dan mengeksposnya di library. Sebaiknya lakukan dengan menginstal webpack dan menggunakan opsi library dalam file webpack.config.js Anda:

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

Next.js

Tambahkan Page baru untuk menampilkan panel samping. Halaman ini membuat sesi add-on dan klien panel samping saat dimuat, dan memulai aktivitas saat tombol diklik:

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

Ganti kode berikut:

  • CLOUD_PROJECT_NUMBER: nomor project project Google Cloud Anda.

  • MAIN_STAGE_URL: URL tahap utama yang Anda buat di langkah berikutnya.

Membuat halaman panggung utama

Tahap utama adalah area fokus utama tempat Anda dapat menampilkan add-on jika diperlukan ruang kerja yang lebih besar. Tahap utama akan terbuka setelah aktivitas dimulai. Untuk mengakses fitur SDK Add-on Meet di tahap utama, Anda harus menggunakan antarmuka MeetMainStageClient.

Contoh kode berikut menunjukkan contoh halaman panggung utama yang merender div kustom untuk mengucapkan "Halo, dunia!":

JS Dasar + Webpack

Tambahkan fungsi berikut ke file main.js yang telah Anda buat, sehingga tahap utama dapat memberi sinyal bahwa tahap tersebut telah selesai dimuat:

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

Kemudian, tambahkan file MainStage.html baru, yang memanggil fungsi initializeMainStage baru dan menampilkan konten "halo, dunia" kustom:

<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

Tambahkan Page untuk menampilkan panggung utama. Halaman ini membuat sesi add-on dan klien panel samping saat dimuat, serta menampilkan konten "hello, world" kustom:

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

Ganti CLOUD_PROJECT_NUMBER dengan nomor project project Google Cloud Anda.

Menjalankan contoh

Untuk menjalankan secara lokal, lakukan hal berikut:

JS Dasar + Webpack

Jalankan webpack untuk memaketkan file main.js bersama dengan SDK Add-on Meet:

npx webpack

Buka file SidePanel.html dan file MainStage.html di browser apa pun. Tampilannya akan sama dengan deployment contoh JS Dasar di GitHub ke SidePanel.html dan MainStage.html di GitHub Pages.

Next.js

Jalankan Berikutnya:

next dev

Buka http://localhost:3000/sidepanel atau http://localhost:3000/mainstage. Tampilannya akan sama dengan deployment contoh Next.js di GitHub ke SidePanel.html dan MainStage.html di GitHub Pages.

Men-deploy Add-on Meet

Siapkan deployment add-on dengan mengikuti petunjuk cara Men-deploy Add-on Meet.

Menjalankan contoh

  1. Buka Meet.

  2. Klik Aktivitas Ikon untuk aktivitas..

  3. Di bagian Add-on Anda, Anda akan melihat add-on. Pilih untuk menjalankan add-on.

Menambahkan fitur lainnya

Setelah memiliki panel samping dan panggung utama dasar, Anda dapat mulai menambahkan fitur lain ke add-on:

Sebaiknya gunakan contoh Add-on Meet di GitHub sebagai referensi untuk mem-build fitur ini.