Compartir pantalla para promocionar un complemento entre los usuarios

Promocionar un complemento mediante el uso compartido de pantalla.

En esta página, se describe cómo promocionar un complemento a los usuarios mientras compartes la pantalla de una pestaña con Google Meet colocando una pequeña cantidad de código en otra página web.

El método exposeToMeetWhenScreensharing() permite que el sitio envíe información a Meet cuando se comparte la pantalla de su pestaña. Esta información se usa en la experiencia del complemento con Meet cuando el usuario hace clic en "Iniciar actividad" en el banner de presentación si tiene instalado el complemento. Si el usuario no tiene instalado el complemento cuando comparte una pestaña en la pantalla, se le solicita que lo instale.

El objeto AddonScreenshareInfo contiene cinco propiedades que se pueden agregar según el caso de uso:

  • additionalData: Información que el complemento puede usar para inicializarse. Solo se puede establecer si la propiedad startActivityOnOpen es verdadera y se puede acceder a ella con ActivityStartingState. Para obtener más información, consulta Cómo obtener el estado de inicio de la actividad.

  • cloudProjectNumber: Obligatorio. El número de tu proyecto de Google Cloud.

  • mainStageUrl: Es la URL que abre el escenario principal una vez que se inicia el complemento, como https://www.example.com. La URL debe pertenecer al mismo origen que las URL especificadas en el manifiesto del complemento.

  • sidePanelUrl: Es la URL que abre el panel lateral una vez que se inicia el complemento, como https://www.example.com. La URL debe pertenecer al mismo origen que las URLs especificadas en el manifiesto del complemento.

  • startActivityOnOpen: Obligatorio. Indica si se debe iniciar la experiencia del complemento de actividad en Meet de inmediato cuando el usuario inicia el complemento desde el banner de presentación. Debe ser verdadero si se usa la propiedad mainStageUrl.

Instala y, luego, importa el SDK

Puedes acceder al SDK con npm o gstatic.

Si tu proyecto usa npm, puedes seguir las instrucciones del paquete npm del SDK de complementos de Meet.

Primero, instala el paquete npm:

npm install @googleworkspace/meet-addons

Luego, el SDK de complementos de Meet estará disponible mediante la importación de la interfaz MeetAddonScreenshareExport:

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

En el caso de los usuarios de TypeScript, las definiciones de TypeScript se empaquetan con el módulo.

gstatic

El SDK de complementos de Google Meet está disponible como un paquete de JavaScript desde gstatic, un dominio que entrega contenido estático.

Para usar el SDK de complementos de Meet, agrega la siguiente etiqueta de secuencia de comandos a tu app:

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

El SDK de complementos de Meet está disponible a través de la interfaz MeetAddon en window.meet.addon.

Ejemplo: Carga en el panel lateral sin iniciar una actividad

En el siguiente ejemplo de código, una pantalla del usuario comparte una página con un complemento que debe ajustar los permisos de recursos antes de que se pueda iniciar la actividad. Debido a este requisito, el complemento se debe iniciar en el panel lateral, sin que se inicie la actividad para todos.

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

Reemplaza lo siguiente:

  • CLOUD_PROJECT_NUMBER: Es una cadena. El número de proyecto de tu proyecto de Cloud.
  • SIDE_PANEL_URL: Es una cadena. Es la URL del panel lateral.

Cuando el usuario de la pantalla de llamada de Meet comparte la página, ve un banner de presentación en Meet. Si haces clic en el botón del banner, se abrirá el complemento del número de proyecto de la nube determinado en el panel lateral. Como la propiedad startActivityOnOpen se estableció como falsa, el botón de inicio de actividad se inhabilita hasta que se establece ActivityStartingState. Para obtener más información, consulta Cómo usar el estado de inicio de la actividad.

Una vez que se inicia la actividad, se les solicita a los demás usuarios de la llamada que inicien o instalen el complemento.

El complemento de ejemplo"Animation" en GitHub incluye este ejemplo como parte de un complemento completo. Cuando se presenta la página de índice de la app web asociada con el complemento, se le solicita al usuario que lo instale o configure.

Ejemplo: Carga en el escenario principal

En la siguiente muestra de código, se le solicita al usuario que comparte la pantalla de una página web en Meet que contiene el siguiente código que inicie el complemento:

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

Reemplaza lo siguiente:

  • CLOUD_PROJECT_NUMBER: Es una cadena. El número de proyecto de tu proyecto de Google Cloud.
  • MAIN_STAGE_URL: Es una cadena. La URL de la escena principal.

Cuando el usuario de la pantalla de llamada de Meet comparte la página, ve un banner de presentación en Meet. Cuando se hace clic en el botón del banner, se abre el complemento del número de proyecto de la nube determinado en la etapa principal. Se carga la propiedad mainStageUrl y se usa la propiedad additionalData para establecer el estado de inicio de la actividad del complemento. A los demás usuarios de la llamada se les solicita de inmediato que instalen o inicien el complemento.

Ejemplo: Cárgalo en el panel lateral

En la siguiente muestra de código, la pantalla de un usuario comparte una página con un complemento que quiere comenzar en el panel lateral en lugar de la etapa principal:

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

Reemplaza lo siguiente:

  • CLOUD_PROJECT_NUMBER: Es una cadena. El número de proyecto de tu proyecto de Cloud.
  • SIDE_PANEL_URL: Es una cadena. Es la URL del panel lateral.

Cuando el usuario de la pantalla de llamada de Meet comparte la página, ve un banner de presentación en Meet. Si haces clic en el botón del banner, se abrirá el complemento del número de proyecto de Cloud en el panel lateral. Se cargará la propiedad sidePanelUrl y se usará la propiedad additionalData para establecer el estado de inicio de la actividad del complemento. A los demás usuarios de la llamada se les solicita de inmediato que instalen o inicien el complemento.

Coincidencia de origen

Los orígenes proporcionados en las propiedades mainStageUrl y sidePanelUrl se comparan con los orígenes en el manifiesto del complemento del número de proyecto de la nube proporcionado. Si todo coincide, el usuario puede iniciar el complemento.

Además, el origen del sitio que inicia la función de compartir pantalla debe aparecer en el campo addOnOrigins del manifiesto del complemento.

Para obtener más información, consulta Seguridad de los complementos.