Promouvoir un module complémentaire auprès des utilisateurs via le partage d'écran

Promotion d'un module complémentaire via le partage d'écran

Cette page explique comment promouvoir un module complémentaire auprès des utilisateurs lors du partage d'écran d'un onglet avec Google Meet en plaçant une petite quantité de code sur une autre page Web.

La méthode exposeToMeetWhenScreensharing() permet au site d'envoyer des informations à Meet lorsque son onglet est partagé à l'écran. Ces informations sont utilisées dans l'expérience du module complémentaire avec Meet lorsque l'utilisateur clique sur "Démarrer l'activité" sur la bannière de présentation s'il a installé le module complémentaire. Si le module complémentaire n'est pas installé lorsque l'utilisateur partage l'écran d'un onglet, il est invité à l'installer.

L'objet AddonScreenshareInfo contient cinq propriétés qui peuvent être ajoutées en fonction du cas d'utilisation:

  • additionalData : informations que le module complémentaire peut utiliser pour s'initialiser. Ne peut être défini que si la propriété startActivityOnOpen est définie sur "true" et peut être accessible à l'aide de ActivityStartingState. Pour en savoir plus, consultez la section Obtenir l'état de démarrage de l'activité.

  • cloudProjectNumber : obligatoire. Numéro de votre projet Google Cloud.

  • mainStageUrl : URL que la scène principale ouvre une fois le module complémentaire démarré, par exemple https://www.example.com. L'URL doit appartenir à la même origine que les URL spécifiées dans le fichier manifeste du module complémentaire.

  • sidePanelUrl : URL que le panneau latéral ouvre une fois le module complémentaire démarré, par exemple https://www.example.com. L'URL doit appartenir à la même origine que les URL spécifiées dans le fichier manifeste du module complémentaire.

  • startActivityOnOpen : obligatoire. Indique si l'expérience du module complémentaire d'activité doit démarrer immédiatement dans Meet lorsque l'utilisateur lance le module complémentaire à partir de la bannière de présentation. Doit être défini sur "true" si la propriété mainStageUrl est utilisée.

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

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

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.screenshare.js"></script>

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

Exemple: Charger dans le panneau latéral sans démarrer d'activité

Dans l'exemple de code suivant, un écran utilisateur partage une page avec un module complémentaire qui doit ajuster les autorisations de ressources avant que l'activité ne puisse être lancée. En raison de cette exigence, le module complémentaire doit être démarré dans le panneau latéral, sans que l'activité ne soit lancée pour tous les utilisateurs.

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: false,
    sidePanelUrl: SIDE_PANEL_URL,
  }
);
</script>

Remplacez les éléments suivants :

  • CLOUD_PROJECT_NUMBER: chaîne. Numéro de votre projet Cloud.
  • SIDE_PANEL_URL: chaîne. URL du panneau latéral.

Lorsque l'utilisateur partage la page depuis l'écran de l'appel Meet, une bannière de présentation s'affiche dans Meet. Cliquez sur le bouton de la bannière pour ouvrir le module complémentaire du numéro de projet cloud donné dans le panneau latéral. Étant donné que la propriété startActivityOnOpen a été définie sur "false", le bouton de démarrage de l'activité est désactivé jusqu'à ce que ActivityStartingState soit défini. Pour en savoir plus, consultez Utiliser l'état de démarrage de l'activité.

Une fois l'activité lancée, les autres utilisateurs de l'appel sont invités à lancer ou à installer le module complémentaire.

L'exemple de module complémentaire "Animation" sur GitHub inclut cet exemple dans un module complémentaire complet. Lorsque la page d'index de l'application Web associée au module complémentaire s'affiche, l'utilisateur qui présente l'application est invité à installer ou à configurer le module complémentaire.

Exemple: Chargement sur la scène principale

Dans l'exemple de code suivant, un utilisateur qui partage l'écran d'une page Web dans Meet contenant le code suivant est invité à lancer le module complémentaire:

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    mainStageUrl: MAIN_STAGE_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

Remplacez les éléments suivants :

  • CLOUD_PROJECT_NUMBER: chaîne. Numéro de votre projet Google Cloud.
  • MAIN_STAGE_URL: chaîne. URL de la scène principale.

Lorsque l'utilisateur partage la page depuis l'écran de l'appel Meet, une bannière de présentation s'affiche dans Meet. Cliquez sur le bouton de la bannière pour ouvrir le module complémentaire du numéro de projet Cloud donné dans l'étape principale. La propriété mainStageUrl est chargée, et la propriété additionalData permet de définir l'état de démarrage de l'activité du module complémentaire. Les autres utilisateurs de l'appel sont immédiatement invités à installer ou à lancer le module complémentaire.

Exemple: Chargement dans le panneau latéral

Dans l'exemple de code suivant, un écran utilisateur partage une page avec un module complémentaire qui souhaite démarrer dans le panneau latéral plutôt que dans la scène principale:

<script>
meet.addon.screensharing.exposeToMeetWhenScreensharing(
  {
    cloudProjectNumber: CLOUD_PROJECT_NUMBER,
    startActivityOnOpen: true,
    sidePanelUrl: SIDE_PANEL_URL,
    additionalData: "{\"selected_item\": \"42\"}",
  }
);
</script>

Remplacez les éléments suivants :

  • CLOUD_PROJECT_NUMBER: chaîne. Numéro de votre projet Cloud.
  • SIDE_PANEL_URL: chaîne. URL du panneau latéral.

Lorsque l'utilisateur partage la page depuis l'écran de l'appel Meet, une bannière de présentation s'affiche dans Meet. Cliquez sur le bouton de la bannière pour ouvrir le module complémentaire du numéro de projet cloud donné dans le panneau latéral. La propriété sidePanelUrl est chargée, et la propriété additionalData permet de définir l'état de démarrage de l'activité du module complémentaire. Les autres utilisateurs de l'appel sont immédiatement invités à installer ou à lancer le module complémentaire.

Mise en correspondance des origines

Les origines fournies dans la propriété mainStageUrl et la propriété sidePanelUrl sont comparées aux origines du fichier manifeste du module complémentaire du numéro de projet Cloud fourni. Si tout correspond, l'utilisateur est autorisé à lancer le module complémentaire.

De plus, l'origine du site qui lance le partage d'écran doit être indiquée dans le champ addOnOrigins du fichier manifeste du module complémentaire.

Pour en savoir plus, consultez la section Sécurité des modules complémentaires.