Guide de démarrage rapide des modules complémentaires Meet

Ce guide explique comment configurer et exécuter un exemple de module complémentaire Google Meet en créant une scène principale et un panneau latéral. Les exemples "Hello World" de cette page sont également disponibles sur GitHub en tant que modules complémentaires Meet complets, conçus avec JavaScript de base ou Next.js TypeScript.

Fenêtre principale et panneau latéral du SDK des modules complémentaires Meet.
Fenêtre principale et panneau latéral du module complémentaire Meet pour le Web.

Installer et importer le SDK

Vous pouvez accéder au SDK à l'aide de npm ou de gstatic.

Si votre projet utilise npm, vous pouvez suivre les instructions pour le package npm du SDK Meet Add-ons.

Commencez par installer le package npm :

npm install @googleworkspace/meet-addons

Le SDK des modules complémentaires Meet est ensuite disponible en important l'interface MeetAddonExport :

import {meet} from '@googleworkspace/meet-addons/meet.addons';

Pour les utilisateurs de TypeScript, les définitions TypeScript sont fournies avec le module. Les utilisateurs de TypeScript doivent définir moduleResolution sur "bundler" dans le tsconfig.json du projet afin que la spécification "exports" de package.json permette d'importer l'exportation du package de partage d'écran.

gstatic

Le SDK des modules complémentaires Google Meet est disponible sous forme de bundle JavaScript à partir de gstatic, un domaine qui fournit du contenu statique.

Pour utiliser le SDK des modules complémentaires Meet, ajoutez le tag de script suivant à votre application :

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

Le SDK des modules complémentaires Meet est disponible via l'interface MeetAddon sous window.meet.addon.

Créer une page de panneau latéral

Le panneau latéral affiche les modules complémentaires installés que vous pouvez sélectionner et utiliser. Une fois que vous avez sélectionné votre module complémentaire, un iframe charge l'URL du panneau latéral que vous spécifiez dans le fichier manifeste du module complémentaire. Il doit s'agir du point d'entrée de votre application et il doit au minimum effectuer les opérations suivantes :

  1. Indique que le chargement du module complémentaire est terminé. Meet affiche un écran de chargement pendant que le module complémentaire se charge. Lorsque la session de module complémentaire est établie en appelant la méthode createAddonSession(), Meet considère qu'il s'agit d'un signal du module complémentaire indiquant que le chargement est terminé et que l'utilisateur peut interagir avec le contenu tiers. Votre module complémentaire ne doit pas appeler la méthode createAddonSession() tant que votre contenu n'a pas fini de se charger.

  2. Créez le client du panneau latéral. Pour accéder au SDK des modules complémentaires Meet dans le panneau latéral, vous devez instancier une interface MeetSidePanelClient. Cela vous permet de contrôler votre expérience principale avec le SDK d'modules complémentaires Meet.

  3. Démarrez l'activité. Cela permet à d'autres utilisateurs de rejoindre votre module complémentaire et, éventuellement, de l'ouvrir dans l'espace principal.

L'exemple de code suivant montre comment la session crée un client de panneau latéral et comment le client de panneau latéral démarre une activité sur la scène principale :

JS + Webpack de base

Dans un nouveau fichier nommé main.js, définissez une fonction qui crée une session de module complémentaire et le client du panneau latéral, puis démarre l'activité lorsqu'un bouton avec l'ID 'start-activity' est cliqué :

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
            });
        });
}

Dans un nouveau fichier nommé SidePanel.html, définissez le bouton qui lance l'activité et appelez la fonction à partir de votre main.js lors du chargement du document :

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

Vous devrez également regrouper le SDK d'addons Meet avec votre main.js et les exposer dans une bibliothèque. Nous vous recommandons de le faire en installant webpack et en utilisant l'option library dans votre fichier webpack.config.js :

module.exports = {
    entry: './main.js',
    output: {
        library: 'helloWorld',
        ...
    },
    ...
};

Next.js

Ajoutez un nouveau Page pour afficher le panneau latéral. Cette page crée un client de session et de panneau latéral de module complémentaire au chargement, et démarre l'activité lorsqu'un bouton est cliqué :

'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>
        </>
    );
}

Remplacez les éléments suivants :

  • CLOUD_PROJECT_NUMBER : numéro de votre projet Google Cloud.

  • MAIN_STAGE_URL : URL de la scène principale que vous allez créer à l'étape suivante.

Créer une page de scène principale

La scène principale est la zone de mise au point principale où vous pouvez afficher le module complémentaire si un espace de travail plus grand est nécessaire. La scène principale s'ouvre une fois l'activité lancée. Pour accéder aux fonctionnalités du SDK de modules complémentaires Meet dans la fenêtre principale, vous devez utiliser l'interface MeetMainStageClient.

L'exemple de code suivant montre un exemple de page principale qui affiche un div personnalisé pour dire "Hello, world!" :

JS + Webpack de base

Ajoutez la fonction suivante au fichier main.js que vous avez déjà créé, afin que la scène principale puisse signaler qu'elle a fini de se charger :

/**
 * 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();
}

Ajoutez ensuite un fichier MainStage.html qui appelle la nouvelle fonction initializeMainStage et affiche un contenu "Hello, world" personnalisé :

<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

Ajoutez un Page pour afficher la scène principale. Cette page crée un client de session et de panneau latéral de module complémentaire au chargement, et affiche un contenu "Hello, world" personnalisé :

'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>
        </>
    );
}

Remplacez CLOUD_PROJECT_NUMBER par le numéro de votre projet Google Cloud.

Exécuter l'exemple

Pour exécuter le code en local, procédez comme suit :

JS + Webpack de base

Exécutez webpack pour regrouper votre fichier main.js avec le SDK d'addons Meet :

npx webpack

Ouvrez vos fichiers SidePanel.html et MainStage.html dans n'importe quel navigateur. Cela devrait ressembler au déploiement de l'exemple JS de base sur GitHub vers SidePanel.html et MainStage.html sur GitHub Pages.

Next.js

Exécuter ensuite :

next dev

Accédez à http://localhost:3000/sidepanel ou http://localhost:3000/mainstage. Ils doivent être identiques au déploiement de l'exemple Next.js sur GitHub vers SidePanel.html et MainStage.html sur GitHub Pages.

Déployer le module complémentaire Meet

Le déploiement d'un module complémentaire s'effectue en deux étapes :

  1. Tout d'abord, vous devez déployer le code de ce guide de démarrage rapide sur un site Web qui vous appartient, en utilisant la solution de déploiement de votre choix. Les modules complémentaires Google Meet exemples officiels sur GitHub sont déployés à l'aide d'un workflow GitHub vers GitHub Pages, mais vous pouvez également utiliser des outils tels que Firebase Hosting.

  2. Une fois votre application déployée, vous devez configurer le déploiement du module complémentaire en suivant les instructions de la section Déployer un module complémentaire Meet. En suivant ce guide de déploiement, vous créez le module complémentaire Meet final, qui est un iFrame dans Meet de l'application que vous avez déployée à la première étape.

Exécuter l'exemple

  1. Accédez à Meet.

  2. Cliquez sur le bouton Outils de réunion Icône des outils de réunion..

  3. Dans la section Vos modules complémentaires, votre module complémentaire devrait s'afficher. Sélectionnez-le pour exécuter le module complémentaire.

Ajouter des fonctionnalités supplémentaires

Maintenant que vous disposez d'un panneau latéral et d'un espace principal de base, vous pouvez commencer à ajouter d'autres fonctionnalités à votre module complémentaire :

Nous vous encourageons à utiliser les modules complémentaires Meet exemples sur GitHub comme référence pour développer ces fonctionnalités.