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 créés avec JavaScript de base ou TypeScript Next.js.

Écran principal 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.

npm (recommandé)

Si votre projet utilise npm, vous pouvez suivre les instructions du 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 empaquetées avec le module.

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 la balise de script suivante à 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 le module complémentaire sélectionné, 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 doit au moins effectuer les opérations suivantes:

1. Indique 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é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. Vous pouvez ainsi contrôler votre expérience principale avec le SDK des modules complémentaires Meet.

3. Démarrez l'activité. Cela permet aux autres utilisateurs de rejoindre votre module complémentaire et, si vous le souhaitez, 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é dans l'étape 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é lorsqu'un bouton avec l'ID 'start-activity' est cliqué:

Remarque :Cette procédure 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 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 des modules complémentaires Meet avec votre main.js et les exposer dans une bibliothèque. Nous vous recommandons d' installer webpack et d'utiliser 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 sur le routage Next.js.

Ajoutez un 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é 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 créez à l'étape suivante.

Créer une page de scène principale

La scène principale est la zone de travail principale où vous pouvez afficher le module complémentaire si un espace de travail plus important est nécessaire. La scène principale s'ouvre une fois l'activité lancé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 scène principale.

L'exemple de code suivant montre un exemple de page de scène 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 l'étape principale puisse signaler qu'elle a terminé le chargement:

/**
 * 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 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 un Page pour afficher la scène principale. Cette page crée une session de module complémentaire et un client de panneau latéral lors du chargement, et affiche un 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 l'application en local, procédez comme suit:

JS de base + Webpack

Exécutez webpack pour 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. Cela devrait ressembler au déploiement de l'exemple JS de base sur GitHub dans 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 se ressembler au déploiement de l'exemple Next.js sur GitHub dans un SidePanel.html et un MainStage.html sur GitHub Pages.

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

Déployer le module complémentaire Meet

Configurez le déploiement du module complémentaire en suivant les instructions pour déployer un module complémentaire Meet.

Exécuter l'exemple

1. Accédez à Meet.

2. Cliquez sur Activités .

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 avez un panneau latéral de base et un espace principal, vous pouvez commencer à ajouter d'autres fonctionnalités à votre module complémentaire:

• Collaborer à l'aide d'un module complémentaire Meet
• Messages entre la scène principale et le panneau latéral
• Promotion du module complémentaire via le partage d'écran

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