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 fenêtre principale et un panneau latéral. Les "Hello World" exemples de cette page sont également disponibles sur GitHub en tant que modules complémentaires Meet complets, créés avec JavaScript de base ou Next.js TypeScript.

Fenêtre principale et panneau latéral du module complémentaire Web Meet.

Installer et importer le SDK

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

npm (recommandé)

Si votre projet utilise npm, vous pouvez suivre les instructions concernant le package npm du SDK des modules complémentaires Meet.

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 en tant que bundle JavaScript à partir de gstatic, un domaine qui diffuse 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.

Remarque : Si vous utilisez TypeScript, vous pouvez également récupérer les derniers types à partir de https://www.gstatic.com/meetjs/addons/1.1.0/meet.addons.d.ts. Il vous suffit d'enregistrer le fichier en local.

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, une 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. Indiquer que le chargement du module complémentaire est terminé. Meet affiche un écran de chargement pendant le chargement du module complémentaire. Lorsque la session du 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 le chargement de votre contenu n'est pas terminé.

2. Créer 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 MeetSidePanelClient interface. Cela vous permet de contrôler votre expérience principale avec le SDK des modules complémentaires Meet.

3. Démarrer l'activité. Cela permet à d'autres personnes de rejoindre votre module complémentaire et, éventuellement, d'ouvrir votre module complémentaire dans la fenêtre principale.

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é dans la fenêtre principale :

JS de base + Webpack

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

Remarque : Cela suppose que vous avez installé le SDK des modules complémentaires Meet à l'aide de npm.

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 fichier 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 devez également regrouper le SDK des modules complémentaires Meet avec votre fichier 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

Remarque : Cet exemple utilise le routage d'application Next.js pour ajouter une page à une application Next.js. Pour en savoir plus sur la création de votre première page dans Next.js, consultez la documentation officielle de Next.js sur le routage.

Ajoutez une nouvelle Page pour afficher le panneau latéral. Cette page crée une session de module complémentaire et un client de panneau latéral lors du chargement, et démarre l'activité lorsque vous cliquez sur un bouton :

'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 projet de votre projet Google Cloud.

• MAIN_STAGE_URL : URL de la fenêtre principale que vous créez à l'étape suivante.

Créer une page de fenêtre principale

La fenêtre 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 fenêtre principale s'ouvre une fois l'activité démarrée. Pour accéder aux fonctionnalités du SDK des modules complémentaires Meet dans la fenêtre principale, vous devez utiliser l'interface MeetMainStageClient.

Important : Notez que votre module complémentaire doit à nouveau appeler la méthode createAddonSession() une fois le chargement de votre contenu terminé. Sinon, le module complémentaire ne démarre pas dans la fenêtre principale.

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

JS de base + Webpack

Ajoutez la fonction suivante au fichier main.js que vous avez déjà créé, afin que la fenêtre principale puisse signaler que le chargement est terminé :

/**
 * 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 nouveau fichier MainStage.html, qui appelle la nouvelle fonction initializeMainStage et affiche le contenu personnalisé "hello, world" :

<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 une Page pour afficher la fenêtre principale. Cette page crée une session de module complémentaire et un client de panneau latéral lors du chargement, et affiche le contenu personnalisé "hello, world" :

'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 projet de votre projet Google Cloud.

Exécuter l'exemple

Pour exécuter une image en local, procédez comme suit :

JS de base + Webpack

Exécutez webpack afin de regrouper votre fichier main.js avec le SDK des modules complémentaires Meet :

npx webpack

Ouvrez vos fichiers SidePanel.html et MainStage.html dans n'importe quel navigateur. MainStage.html

Next.js

Exécutez Next :

next dev

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

Remarque : Dans la console des Outils pour les développeurs Chrome lors de l'exécution en local, une erreur s'affiche : Missing required Meet SDK URL parameter: meet_sdk. Ce comportement est normal tant que vous n'exécutez pas l'application dans Meet, car Meet gérera la transmission de ce paramètre d'URL. Pour en savoir plus sur les outils pour les développeurs, consultez Gérer les outils pour les développeurs pour les modules complémentaires Meet.

Déployer le module complémentaire Meet

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

1. Vous devez d'abord déployer le code de ce guide de démarrage rapide sur un site Web qui vous appartient, à l'aide de la solution de déploiement de votre choix. Les exemples officiels de modules complémentaires Google Meet 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. Ce guide de déploiement crée le module complémentaire Meet final, qui est une iframe dans Meet de l'application que vous avez déployée à l'étape 1.

Exécuter l'exemple

1. Accédez à Meet.

2. Cliquez sur le bouton des outils de réunion .

3. Dans la section Vos modules complémentaires, votre module complémentaire doit 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'une fenêtre principale de base, vous pouvez commencer à ajouter d'autres fonctionnalités à votre module complémentaire :

• Collaboration à l'aide d'un module complémentaire Meet
• Messages entre la fenêtre principale et le panneau latéral
• Promotion du module complémentaire

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