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

측면 패널 및 기본 단계 페이지 만들기

이 페이지에서는 페이지의 측면 패널 및 기본 스테이지 페이지를 만드는 방법을 설명합니다. Meet 웹 부가기능

Meet 부가기능 SDK 기본 스테이지 및 측면 패널 — Meet 웹의 기본 스테이지 및 측면 패널 부가기능.

Google Meet 부가기능 SDK는 정적 콘텐츠를 제공하는 도메인인 gstatic의 JavaScript 번들

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

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

Meet 부가기능 SDK 기능은 window.meet.addon에서 사용할 수 있습니다. 참조 문서를 보려면 리소스 요약을 참고하세요.

부가기능 로드가 완료되었다고 표시

부가기능이 로드되는 동안 Meet에 로드 화면이 표시됩니다. 부가기능 세션이 설정되면 Meet은 이를 로드가 완료되었으며 사용자가 서드 파티 콘텐츠와 상호작용할 수 있다는 부가기능의 신호로 간주합니다.

측면 패널 페이지 만들기

측면 패널에는 사용자가 직접 설치한 선택 및 사용할 수 있습니다 부가기능을 선택하면 iframe이 부가기능 매니페스트에 지정된 측면 패널 URL을 로드합니다. 이 이름은 앱의 진입점이라고 할 수 있습니다. Meet 부가기능 SDK 기능에 액세스하려면 다음 안내를 따르세요. 측면 패널에서 sidePanelClient를 인스턴스화해야 합니다.

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
  const sidePanelClient = await session.createSidePanelClient();

CLOUD_PROJECT_NUMBER를 Google Cloud 프로젝트입니다.

다음은 활동을 시작하는 방법을 보여주는 코드 스니펫입니다.

<html style="width: 100%; height: 100%">

<head>
    <title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0">
    <div style="display: flex; flex-direction: column; height: 100%">
        <h1>Side Panel Add-on</h1>
        <div>
            <div>
                <button id="start-activity">
                    startActivity
                </button>
            </div>
            <div>
                Activity Side Panel URL:
                <input type="text" id="sidePanelIframeUrl" style="margin-left: 20px; width: 90%;"
                    value="https://your_add_on_origin.url/newSidePanelPage.html" />
            </div>
            <div>
                Main Stage URL:
                <input type="text" id="mainStageIframeUrl" style="margin-left: 20px; width: 90%;"
                    value="https://your_add_on_origin.url/mainStagePage.html" />
            </div>
            <div>
                Activity start state data:
                <input type="text" id="additionalProperty" style="margin-left: 20px; width: 90%;"
                    value="abc123" />
            </div>
        </div>
    </div>

    <script>
        let sidePanelClient;
        async function init() {
            const session = await window.meet.addon.createAddonSession({
                cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
            });
            console.log("Successfully constructed the add-on session.");
            sidePanelClient = await session.createSidePanelClient();
            console.log("Successfully constructed side panel client.");

            document
                .getElementById('start-activity')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalPropertyInputElement =
                            document.getElementById('additionalProperty');
                        await sidePanelClient.startActivity({
                            // Side panel is replaced with a new page.
                            sidePanelUrl: sidePanelIframeUrlInputElement.value,
                            // Main stage loads a large work area.
                            mainStageUrl: mainStageIframeUrlInputElement.value,
                            additionalData: JSON.stringify({
                                additionalProperty: additionalPropertyInputElement.value
                            }),
                        });
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

CLOUD_PROJECT_NUMBER를 Google Cloud 프로젝트입니다.

기본 스테이지 페이지 만들기

기본 단계는 텍스트, 이미지, 오디오 등의 이 부가기능은 더 큰 작업 공간이 필요한 경우에 유용합니다 주요 단계가 열립니다. Meet 부가기능 SDK에 액세스하는 방법 기본 단계에서 클라이언트 객체를 사용하여 MeetMainStageClient:

const session = await window.meet.addon.createAddonSession({
      cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
    });
const mainStageClient = await session.createMainStageClient();

CLOUD_PROJECT_NUMBER를 Google Cloud 프로젝트입니다.

이것은 단계 페이지 (이전 스니펫의 mainStagePage.html)에 추가되어야 하며 버튼 클릭에 대한 응답으로 getActivityStartingState에게 다음과 같이 전송합니다.

<html style="width: 100%; height: 100%">

<head>
    <title>Main Stage Add-on</title>
    <script src="https://www.gstatic.com/meetjs/addons/1.0.0/meet.addons.js"></script>
</head>

<body style="width: 100%; height: 100%; margin: 0; background: white;">
    <div style="display: flex; flex-direction: column; height: 100%">
        <h1>Main Stage Add-on</h1>
        <div>
            <div>
                <button id="get-activity-starting-state">
                    Get Activity Starting State's Additional Property
                </button>
            </div>
            <div id="receivedActivityStartingStateProperty"
                style="margin-left: 20px; width: 300px; overflow-wrap: anywhere"></div>
        </div>
    </div>

    <script>
        let mainStageClient;
        async function init() {
            const session = await window.meet.addon.createAddonSession({
                cloudProjectNumber: "CLOUD_PROJECT_NUMBER",
            });
            console.log("Successfully constructed the add-on session.");
            const mainStageClient = await session.createMainStageClient();
            console.log("Successfully constructed main stage client.");
            document
                .getElementById('get-activity-starting-state')
                .addEventListener(
                    'click', async () => {
                        const startingState =
                            await mainStageClient.getActivityStartingState();
                        const startingStateData = JSON.parse(startingState.additionalData);
                        document.getElementById(
                            'receivedActivityStartingStateProperty').textContent =
                            startingStateData.additionalProperty;
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>

CLOUD_PROJECT_NUMBER를 Google Cloud 프로젝트입니다.