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

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

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

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

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

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

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

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

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

Meet에 로드 화면이 표시되는 동안 부가기능이 로드 중입니다. 이 부가기능 세션 개설됨 Meet은 이를 로드가 완료되었고 사용자가 제3자 콘텐츠와 상호작용할 수 있습니다.

측면 패널 페이지 만들기

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

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

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

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

<head>
    <title>Side Panel Add-on</title>
<script src="https://www.gstatic.com/meetjs/addons/0.7.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-collaboration">
                    startCollaboration
                </button>
            </div>
            <div>
                Collaboration 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>
                Collaboration 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-collaboration')
                .addEventListener(
                    'click', async () => {
                        const sidePanelIframeUrlInputElement =
                            document.getElementById('sidePanelIframeUrl');
                        const mainStageIframeUrlInputElement =
                            document.getElementById('mainStageIframeUrl');
                        const additionalPropertyInputElement =
                            document.getElementById('additionalProperty');
                        await sidePanelClient.startCollaboration({
                            // 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>

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

기본 단계는 부가기능을 표시할 수 있는 기본 포커스 영역입니다. 더 큰 작업 공간이 필요한 경우에 최적화할 수 있습니다 공동작업이 완료되면 기본 단계가 열립니다. 시작됩니다 Meet 부가기능 SDK 기능에 액세스하려면 클라이언트 객체를 사용하여 MeetMainStageClient 드림 :

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

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

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

<head>
    <title>Main Stage Add On</title>
    <script src="https://www.gstatic.com/meetjs/addons/0.7.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-collaboration-starting-state">
                    Get Collaboration Starting State's Additional Property
                </button>
            </div>
            <div id="receivedCollaborationStartingStateProperty"
                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-collaboration-starting-state')
                .addEventListener(
                    'click', async () => {
                        const startingState =
                            await mainStageClient.getCollaborationStartingState();
                        const startingStateData = JSON.parse(startingState.additionalData);
                        document.getElementById(
                            'receivedCollaborationStartingStateProperty').textContent =
                            startingStateData.additionalProperty;
                    });
        }
        document.body.onload = () => {
            init();
        };
    </script>
</body>

</html>