Yan panel ve ana sahne sayfaları oluşturma

Bu sayfada, bir Google Etiket Yöneticisi'nin yan paneli ve ana sahne sayfalarının nasıl oluşturulacağı Meet web eklentisi.

Meet Eklentileri SDK'sı ana sahnesi ve yan paneli.
Meet web'de ana sahne ve yan panel Eklenti

Google Meet Eklentileri SDK'sı Statik içerik sunan bir alan adı olan gstatic JavaScript paketi.

Meet Eklentileri SDK'sını kullanmak için uygulamanıza aşağıdaki komut dosyası etiketini ekleyin:

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

Meet Eklentileri SDK'sı işlevi window.meet.addon altında kullanılabilir. Referans belgeleri görüntülemek için bkz. Kaynak özet bölümüne bakın.

Eklenti yüklemenin tamamlandığını belirt

Meet, sohbet sırasında bir yükleme ekranı eklentisi yükleniyor. eklenti oturumu tanınmış, Meet bunu, ve kullanıcının, yüklemenin sona erdiğini ve üçüncü taraf içeriklerle etkileşime girebilmesidir.

Yan panel sayfası oluşturma

Yan panelde, yüklediğiniz kullanabileceğiniz en iyi araçtır. Eklentinizi seçtikten sonra, bir iframe tarafından yüklenen panel URL'si: eklenti manifest'inde belirtilir. Bu, giriş noktasını kullanabilirsiniz. Meet Eklentileri SDK'sı işlevine erişmek için yan panelde sidePanelClient örneği oluşturmanız gerekir.

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

Aşağıda, ortak çalışmaların nasıl başlatılacağını gösteren kod snippet'i verilmiştir:

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

Ana sahne sayfası oluşturma

Ana sahne, eklentiyi gösterebileceğiniz ana odak alanıdır bir çözüm üretebiliriz. Ana aşama, ortak çalışma yapıldıktan sonra başlar. Meet Eklentileri SDK'sı işlevine bu aşamada istemci nesnesini MeetMainStageClient :

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

Aşağıda, temel aşama sayfası (önceki snippet'te mainStagePage.html) ve bir çağrı içerir bir düğme tıklamasına yanıt olarak getCollaborationStartingState için:

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