Panduan memulai add-on Meet

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

Panel samping dan layar utama SDK add-on Meet.
Layar utama dan panel samping Add-on Web Meet.

Menginstal dan mengimpor SDK

Anda dapat mengakses SDK menggunakan npm atau gstatic.

Jika project Anda menggunakan npm, Anda dapat mengikuti petunjuk untuk paket npm SDK add-on Meet.

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. Pengguna TypeScript harus menetapkan moduleResolution ke "bundler" dalam tsconfig.json project, sehingga spesifikasi "ekspor" package.json memungkinkan pengimporan ekspor paket berbagi layar.

gstatic

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

Untuk menggunakan SDK add-on Meet, 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, an iframe akan memuat URL panel samping yang Anda tentukan dalam manifes add-on. URL 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 memperlakukan hal ini sebagai sinyal dari add-on bahwa pemuatan telah selesai, dan pengguna dapat berinteraksi dengan konten pihak ketiga. Add-on Anda tidak boleh memanggil metode createAddonSession() hingga konten Anda selesai dimuat.

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

  3. Memulai aktivitas. Hal ini memungkinkan orang lain bergabung dengan add-on Anda dan secara opsional membuka add-on Anda di layar utama.

Contoh kode berikut menunjukkan cara sesi membuat klien panel samping, dan cara klien panel samping memulai aktivitas di layar 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 Anda 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 hal ini dengan menginstal webpack dan menggunakan opsi library di file webpack.config.js:

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, serta 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 Google Cloud Anda.

  • MAIN_STAGE_URL: URL layar utama yang Anda buat pada langkah berikutnya.

Membuat halaman layar utama

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

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

JS Dasar + Webpack

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

/**
 * 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 layar utama. Halaman ini membuat sesi add-on dan klien panel samping saat dimuat, serta menampilkan konten "halo, dunia" 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 Google Cloud Anda.

Menjalankan contoh

Untuk menjalankan secara lokal, lakukan hal berikut:

JS Dasar + Webpack

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

npx webpack

Buka file SidePanel.html dan MainStage.html di browser mana pun. MainStage.html

Next.js

Jalankan Next:

next dev

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

Men-deploy add-on Meet

Deployment add-on adalah proses dua langkah:

  1. Pertama, Anda harus men-deploy kode dari panduan memulai ini ke situs yang Anda miliki, menggunakan solusi deployment yang Anda inginkan. Contoh add-on Google Meet resmi di GitHub di-deploy menggunakan alur kerja GitHub ke GitHub Pages, tetapi Anda juga dapat menggunakan alat seperti Firebase Hosting.

  2. Setelah aplikasi di-deploy, Anda harus menyiapkan deployment add-on dengan mengikuti petunjuk untuk Men-deploy add-on Meet. Mengikuti panduan deployment tersebut akan membuat add-on Meet akhir yang merupakan iframe dalam Meet dari aplikasi yang Anda deploy pada langkah pertama.

Menjalankan contoh

  1. Buka Meet.

  2. Klik tombol alat rapat Ikon alat rapat..

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

Menambahkan fitur lainnya

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

Sebaiknya gunakan contoh add-on Meet di GitHub sebagai referensi untuk membuat fitur ini.