이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Meet 부가기능 빠른 시작

이 가이드에서는 기본 무대와 측면 패널을 만들어 샘플 Google Meet 부가기능을 설정하고 실행하는 방법을 설명합니다. 이 "Hello World" 이 페이지의 예시는 GitHub에서도 기본 JavaScript로 빌드된 부가기능을 사용해 보세요. 또는 Next.js TypeScript를 포함해야 합니다.

Meet 부가기능 SDK 메인 화면 및 측면 패널 — </ph> Meet 웹의 기본 스테이지 및 측면 패널 부가기능.

SDK 설치 및 가져오기

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

npm(권장)

프로젝트에서 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에 로드됩니다. 이는 앱의 진입점이며 최소한 다음 작업을 실행해야 합니다.

부가기능 로드가 완료되었음을 나타냅니다. Meet에 로드 중 화면이 표시되는 동안 부가기능이 로드 중입니다. 이 부가기능 세션 createAddonSession() 메서드를 호출하여 Meet은 이를 로드가 완료되었고 사용자가 제3자 콘텐츠와 상호작용할 수 있습니다. 내 부가기능 콘텐츠가 완료될 때까지 createAddonSession() 메서드를 호출하면 안 됩니다. 있습니다.
측면 패널 클라이언트를 만듭니다. 다음에서 Meet 부가기능 SDK에 액세스하려면 다음 안내를 따르세요. 측면 패널에서 MeetSidePanelClient를 인스턴스화해야 함 인터페이스에 추가되었습니다. 이를 통해 기본 Meet 부가기능 SDK 환경을 제어할 수 있습니다.
활동을 시작합니다. 이렇게 하면 다른 사용자가 내 실행할 수 있고, 원하는 경우 기본 단계에서 설정할 수 있습니다.

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

기본 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 인터페이스를 사용해야 합니다.

다음 코드 샘플은 'Hello, world!'라고 말하는 맞춤 div:

기본 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의 기본 JS 샘플 배포와 동일하게 표시됩니다. SidePanel.html로 및 MainStage.html 를 확인하세요.

Next.js

Run Next:

next dev

http://localhost:3000/sidepanel 페이지로 이동하거나 http://localhost:3000/mainstage 이는 GitHub의 Next.js 샘플 배포 SidePanel.html로 및 MainStage.html 를 확인하세요.

Meet 부가기능 배포하기

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

샘플 실행

Meet으로 이동합니다.
활동 을 클릭합니다.
내 부가기능 섹션에 부가기능이 표시됩니다. 이를 선택하여 부가기능을 실행합니다.

다른 기능 추가

이제 기본 측면 패널과 기본 스테이지가 생겼으므로 다른 측면 패널과 새 기능을 추가할 수 있습니다.

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