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

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

É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';

Les définitions TypeScript sont empaquetées avec le module pour les utilisateurs de TypeScript.

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 dans le 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 minimum les éléments suivants:

1. Indiquez que le chargement du module complémentaire est terminé. Meet affiche un écran de chargement pendant que le module complémentaire est en cours de chargement. 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 appeler la méthode createAddonSession() qu'une fois l'affichage du contenu terminé. chargement en cours.

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 SDK de modules complémentaires Meet principal expérience.

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

L'exemple de code suivant montre comment la session crée un client de panneau latéral. Comment le client du panneau latéral lance une activité dans l'espace principal:

JS de base + Webpack

Dans un nouveau fichier nommé main.js, définissez une fonction qui crée un une session complémentaire, le client du panneau latéral et démarre l'activité lorsqu'un utilisateur clique sur un bouton ayant l'ID 'start-activity':

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 le 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 devez également grouper le SDK des modules complémentaires Meet avec votre main.js et exposez-les dans une bibliothèque. Nous vous conseillons de le faire d'ici le . installer 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 le guide officiel Documentation Next.js sur le routage.

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 principale sur la scène

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 principale s'ouvre au début de l'activité. Pour accéder au SDK des modules complémentaires Meet à l'étape principale, vous devez utiliser l'interface MeetMainStageClient.

Important :Notez que votre module complémentaire doit à nouveau appeler la createAddonSession() une fois le chargement du contenu terminé. Sinon, le module complémentaire ne démarre pas à l'étape 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éé : que l'étape principale peut 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 fichier MainStage.html, qui appelle la nouvelle initializeMainStage et affiche un "hello, world" personnalisé contenu:

<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 l'espace de création principal. Cette page crée un session complémentaire et client du panneau latéral lors du chargement, et affiche un "hello, world" personnalisé ; contenu:

'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 l'exécuter en local, procédez comme suit:

JS + Webpack de base

Exécutez webpack pour regrouper votre fichier main.js et 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 gère la transmission paramètre d'URL. Pour en savoir plus sur les outils pour les développeurs, consultez Gérer les outils pour les développeurs des 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 un module complémentaire.

Ajouter des fonctionnalités supplémentaires

Maintenant que vous avez un panneau latéral et un espace principal de base, 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.