Panduan memulai add-on Meet

Panduan ini menjelaskan cara menyiapkan dan menjalankan add-on Google Meet contoh 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.

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

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, Meet Add-on SDK tersedia dengan mengimpor antarmuka MeetAddonExport:

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

Untuk pengguna TypeScript, definisi TypeScript dikemas dengan modul. Pengguna TypeScript harus menyetel moduleResolution ke "bundler" dalam tsconfig.json project, sehingga spesifikasi "exports" package.json memungkinkan pengimporan ekspor paket berbagi layar.

gstatic

SDK add-on Google Meet tersedia sebagai bundle 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>

Meet add-on SDK 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 sedang dimuat. Saat sesi add-on dibuat dengan memanggil metode createAddonSession(), Meet 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. Buat klien panel samping. Untuk mengakses Meet Add-on SDK di panel samping, Anda harus membuat instance antarmuka MeetSidePanelClient. Hal ini memberikan kontrol atas pengalaman SDK add-on Meet utama Anda.

  3. Mulai aktivitas. Dengan mengaktifkan opsi ini, orang lain dapat bergabung ke 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 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 Anda saat pemuatan dokumen:

<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 Meet Add-on SDK dengan main.js dan menayangkannya 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 Google Cloud Anda.

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

Membuat halaman panggung utama

Tahap utama adalah area fokus utama tempat Anda dapat menampilkan add-on jika ruang kerja yang lebih besar diperlukan. Panggung utama terbuka setelah aktivitas dimulai. Untuk mengakses fitur SDK add-on Meet di panggung 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 sudah Anda buat, sehingga tahap 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 "hello, world" 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 Google Cloud Anda.

Menjalankan contoh

Untuk menjalankan secara lokal, lakukan hal berikut:

JS Dasar + Webpack

Jalankan webpack untuk menggabungkan file main.js Anda dengan Meet Add-on SDK:

npx webpack

Buka file SidePanel.html dan file MainStage.html di browser apa pun. Tampilan ini 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. 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

Men-deploy 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 apa pun yang Anda inginkan. Add-on Google Meet contoh 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 untuk menjalankan add-on.

Menambahkan fitur lainnya

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

Sebaiknya Anda menggunakan contoh add-on Meet di GitHub sebagai referensi untuk membangun fitur ini.