Meet 부가기능 빠른 시작

이 가이드에서는 기본 무대와 측면 패널을 만들어 샘플 Google Meet 부가기능을 설정하고 실행하는 방법을 설명합니다. 이 페이지의 'Hello World' 예시는 기본 JavaScript 또는 Next.js TypeScript로 빌드된 완전한 Meet 부가기능으로 GitHub에서도 사용할 수 있습니다.

Meet 부가기능 SDK 메인 스테이지 및 측면 패널
Meet 웹 부가기능의 기본 무대 및 측면 패널입니다.

SDK 설치 및 가져오기

npm을 사용하거나 gstatic을 사용하여 SDK에 액세스할 수 있습니다.

프로젝트에서 npm을 사용하는 경우 Meet 부가기능 SDK npm 패키지의 안내를 따르세요.

먼저 npm 패키지를 설치합니다.

npm install @googleworkspace/meet-addons

그런 다음 MeetAddonExport 인터페이스를 가져와 Meet 부가기능 SDK를 사용할 수 있습니다.

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

TypeScript 사용자의 경우 TypeScript 정의가 모듈과 함께 패키징됩니다.

gstatic

Google Meet 부가기능 SDK는 정적 콘텐츠를 제공하는 도메인인 gstatic에서 JavaScript 번들로 사용할 수 있습니다.

Meet 부가기능 SDK를 사용하려면 앱에 다음 스크립트 태그를 추가합니다.

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

Meet 부가기능 SDK는 window.meet.addon의 MeetAddon 인터페이스를 통해 사용할 수 있습니다.

측면 패널 페이지 만들기

측면 패널에는 선택하여 사용할 수 있는 설치된 부가기능이 표시됩니다. 부가기능을 선택하면 부가기능 매니페스트에서 지정한 측면 패널 URL이 iframe에 로드됩니다. 이는 앱의 진입점이며 최소한 다음 작업을 실행해야 합니다.

  1. 부가기능 로드가 완료되었음을 나타냅니다. 부가기능이 로드되는 동안 Meet에 로드 화면이 표시됩니다. createAddonSession() 메서드를 호출하여 부가기능 세션이 설정되면 Meet은 이를 로드가 완료되었으며 사용자가 서드 파티 콘텐츠와 상호작용할 수 있다는 부가기능의 신호로 간주합니다. 부가기능은 콘텐츠 로드가 완료될 때까지 createAddonSession() 메서드를 호출해서는 안 됩니다.

  2. 측면 패널 클라이언트를 만듭니다. 측면 패널에서 Meet 부가기능 SDK에 액세스하려면 MeetSidePanelClient 인터페이스를 인스턴스화해야 합니다. 이를 통해 기본 Meet 부가기능 SDK 환경을 제어할 수 있습니다.

  3. 활동을 시작합니다. 이렇게 하면 다른 사용자가 부가기능에 참여할 수 있으며 원하는 경우 메인 스테이지에서 부가기능을 열 수 있습니다.

다음 코드 샘플은 세션이 측면 패널 클라이언트를 만드는 방법과 측면 패널 클라이언트가 기본 스테이지에서 활동을 시작하는 방법을 보여줍니다.

기본 JS + Webpack

main.js라는 새 파일에서 부가기능 세션, 측면 패널 클라이언트를 만들고 ID가 '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
            });
        });
}

SidePanel.html라는 새 파일에서 활동을 실행하는 버튼을 정의하고 문서 로드 시 main.js에서 함수를 호출합니다.

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

Meet 부가기능 SDK를 main.js와 번들로 묶고 라이브러리에 노출해야 합니다. webpack을 설치하고 webpack.config.js 파일에서 library 옵션을 사용하는 것이 좋습니다.

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

Next.js

새 Page를 추가하여 측면 패널을 표시합니다. 이 페이지는 로드 시 부가기능 세션과 측면 패널 클라이언트를 만들고 버튼을 클릭하면 활동을 시작합니다.

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

다음을 바꿉니다.

  • CLOUD_PROJECT_NUMBER: Google Cloud 프로젝트의 프로젝트 번호입니다.

  • MAIN_STAGE_URL: 다음 단계에서 만드는 기본 스테이지 URL입니다.

메인 스테이지 페이지 만들기

메인 스테이지는 더 큰 작업 공간이 필요한 경우 부가기능을 표시할 수 있는 기본 초점 영역입니다. 활동이 시작되면 기본 스테이지가 열립니다. 기본 스테이지에서 Meet 부가기능 SDK 기능에 액세스하려면 MeetMainStageClient 인터페이스를 사용해야 합니다.

다음 코드 샘플은 맞춤 div를 렌더링하여 'Hello, world!'라고 표시하는 기본 스테이지 페이지의 예를 보여줍니다.

기본 JS + Webpack

기본 스테이지가 로드가 완료되었음을 알릴 수 있도록 이미 만든 main.js 파일에 다음 함수를 추가합니다.

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

그런 다음 새 initializeMainStage 함수를 호출하고 맞춤 'Hello, world' 콘텐츠를 표시하는 새 MainStage.html 파일을 추가합니다.

<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

Page를 추가하여 메인 스테이지를 표시합니다. 이 페이지는 로드 시 부가기능 세션 및 측면 패널 클라이언트를 만들고 맞춤 'Hello, World' 콘텐츠를 표시합니다.

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

CLOUD_PROJECT_NUMBER를 Google Cloud 프로젝트의 프로젝트 번호로 바꿉니다.

샘플 실행

로컬에서 실행하려면 다음 단계를 따르세요.

기본 JS + Webpack

webpack을 실행하여 Meet 부가기능 SDK와 함께 main.js 파일을 번들로 묶습니다.

npx webpack

브라우저에서 SidePanel.html 파일과 MainStage.html 파일을 엽니다. 이는 GitHub 페이지의 SidePanel.html 및 MainStage.html에 GitHub의 기본 JS 샘플을 배포하는 것과 동일하게 표시됩니다.

Next.js

Run Next:

next dev

http://localhost:3000/sidepanel 또는 http://localhost:3000/mainstage로 이동합니다. 이는 GitHub Pages의 SidePanel.html 및 MainStage.html에 GitHub의 Next.js 샘플을 배포할 때와 동일하게 표시됩니다.

Meet 부가기능 배포

Meet 부가기능 배포 방법에 관한 안내에 따라 부가기능 배포를 설정합니다.

샘플 실행

  1. Meet으로 이동합니다.

  2. 활동 활동의 아이콘입니다.을 클릭합니다.

  3. 내 부가기능 섹션에 부가기능이 표시됩니다. 이를 선택하여 부가기능을 실행합니다.

다른 기능 추가

이제 기본 측면 패널과 메인 스테이지가 있으므로 부가기능에 다른 기능을 추가할 수 있습니다.

이러한 기능을 빌드할 때는 GitHub의 샘플 Meet 부가기능을 참고하는 것이 좋습니다.