建立側邊面板和主要階段頁面

本頁說明如何建立側邊面板和主要階段頁面 Meet 網頁版外掛程式。

Meet 外掛程式 SDK 的主要階段和側邊面板。
Meet 網頁版的主要階段和側邊面板 。

Google Meet 外掛程式 SDK 是 gstatic 的 JavaScript 套件，這是提供靜態內容的網域。

如要使用 Meet 外掛程式 SDK，請在應用程式中新增下列指令碼標記：

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

window.meet.addon 下方提供 Meet 外掛程式 SDK 功能。 如要查看參考說明文件，請參閱資源 摘要。

表示外掛程式載入完成

Meet 顯示載入畫面時 正在載入外掛程式。當 外掛程式工作階段為 已建立， Meet 會將此視為 載入完成，而使用者 都能與第三方內容互動

建立側邊面板頁面

側邊面板會顯示 能選取及使用 選取外掛程式後，iframe 會載入側邊 面板網址 您在附加元件資訊清單中指定的這應該是 應用程式的進入點如何存取 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>