Promuovere un componente aggiuntivo agli utenti tramite la condivisione schermo

Promozione di un componente aggiuntivo tramite la condivisione dello schermo.

In questa pagina viene descritto come promuovere un componente aggiuntivo agli utenti mentre condividete una scheda con Google Meet inserendo una piccola quantità di codice su un'altra pagina web.

La exposeToMeetWhenScreensharing() consente al sito di inviare informazioni a Meet quando la relativa scheda è condivisa sullo schermo. Queste informazioni vengono utilizzate nell'esperienza con il componente aggiuntivo di Meet quando l'utente fa clic su "Avvia attività" nel banner della presentazione se ha installato il componente aggiuntivo. Se l'utente non ha installato il componente aggiuntivo quando condivide una scheda, gli viene chiesto di installarlo.

La AddonScreenshareInfo contiene cinque proprietà che possono essere aggiunte in base al caso d'uso:

  • additionalData: Informazioni che il componente aggiuntivo può utilizzare per inizializzarsi. Può essere impostata solo se la proprietà startActivityOnOpen è true e può essere acceduta utilizzando ActivityStartingState. Per ulteriori informazioni, vedi Ottenere lo stato di inizio dell'attività.

  • cloudProjectNumber: Obbligatorio. Il numero del tuo progetto Google Cloud.

  • mainStageUrl: l'URL che viene aperto nella fase principale all'avvio del componente aggiuntivo, ad esempio https://www.example.com. L'URL deve appartenere allo stesso origin come URL specificati in del componente aggiuntivo.

  • sidePanelUrl: L'URL che viene aperto dal riquadro laterale una volta che il componente aggiuntivo come https://www.example.com. L'URL deve appartenere alla stessa origine degli URL specificati nel manifest del componente aggiuntivo.

  • startActivityOnOpen: obbligatoria. Indica se avviare il componente aggiuntivo dell'attività in Meet non appena l'utente avvia la dal banner della presentazione. Deve essere vero se viene utilizzata la proprietà mainStageUrl.

Installa e importa l'SDK

Puoi accedere all'SDK utilizzando npm o gstatic.

Se il tuo progetto utilizza npm, puoi seguire le istruzioni per il pacchetto npm SDK dei componenti aggiuntivi di Meet.

Installa innanzitutto il pacchetto npm:

npm install @googleworkspace/meet-addons

L'SDK di Meet Add-ons è disponibile importando l'interfaccia MeetAddonScreenshareExport:

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

Per gli utenti di TypeScript, le definizioni di TypeScript vengono pacchettizzate con il modulo.

gstatic

L'SDK dei componenti aggiuntivi di Google Meet è disponibile come bundle JavaScript da gstatic, un dominio che pubblica contenuti statici.

Per utilizzare l'SDK Meet Add-ons, aggiungi il seguente tag script alla tua app:

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

L'SDK dei componenti aggiuntivi di Meet è disponibile tramite l'interfaccia di MeetAddon in window.meet.addon.

Esempio: caricamento nel riquadro laterale senza avviare un'attività

Nel seguente codice di esempio, una schermata utente condivide una pagina con un plug-in che deve modificare le autorizzazioni delle risorse prima che l'attività possa essere avviata. A causa di questo requisito, il plug-in deve essere avviato nel riquadro laterale, senza che l'attività venga avviata per tutti.

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

Sostituisci quanto segue:

  • CLOUD_PROJECT_NUMBER: stringa. Il numero del tuo progetto progetto cloud.
  • SIDE_PANEL_URL: stringa. L'URL del riquadro laterale.

Quando l'utente nella schermata della chiamata di Meet condivide la pagina, vede un banner di una presentazione in Meet. Se fai clic sul pulsante nel banner, viene aperto il componente aggiuntivo per il numero del progetto cloud specificato nel riquadro laterale. Poiché il startActivityOnOpen è stata impostata su false, il pulsante di avvio dell'attività viene disattivato finché ActivityStartingState impostato. Per ulteriori informazioni, consulta Utilizzare lo stato iniziale dell'attività.

Una volta avviata l'attività, agli altri utenti della chiamata viene chiesto di avviare o installare il componente aggiuntivo.

L'add-on di esempio "Animation" su GitHub include questo esempio come parte di un add-on completo. Quando viene visualizzata la pagina di indice dell'app web associata al componente aggiuntivo, all'utente che presenta il componente aggiuntivo viene chiesto di installarlo o configurarlo.

Esempio: caricamento nella schermata principale

Nel seguente esempio di codice, un utente che condivide lo schermo in Meet contenente il codice seguente viene chiesto di avviare l'app Componente aggiuntivo:

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

Sostituisci quanto segue:

  • CLOUD_PROJECT_NUMBER: stringa. Il numero del progetto Google Cloud.
  • MAIN_STAGE_URL: stringa. L'URL dello stage principale.

Quando l'utente nella schermata della chiamata di Meet condivide la pagina, visualizza un banner della presentazione in Meet. Se fai clic sul pulsante del banner, si apre il componente aggiuntivo per il numero del progetto cloud specificato nella fase principale. La proprietà mainStageUrl viene caricata e la proprietà additionalData viene utilizzata per impostare lo stato iniziale dell'attività del componente aggiuntivo. Gli altri utenti che partecipano alla chiamata viene subito chiesto di installare o avviare il componente aggiuntivo.

Esempio: caricamento nel riquadro laterale

Nel seguente esempio di codice, una schermata dell'utente condivide una pagina con un plug-in che vuole essere avviato nel riquadro laterale anziché nello stage principale:

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

Sostituisci quanto segue:

  • CLOUD_PROJECT_NUMBER: stringa. Il numero del tuo progetto progetto cloud.
  • SIDE_PANEL_URL: stringa. L'URL del riquadro laterale.

Quando l'utente nella schermata della chiamata di Meet condivide la pagina, vede un banner di una presentazione in Meet. Se fai clic sul pulsante nel banner, viene aperto il componente aggiuntivo per il numero del progetto cloud specificato nel riquadro laterale. La proprietà sidePanelUrl viene caricata e la proprietà additionalData viene utilizzata per impostare lo stato iniziale dell'attività del componente aggiuntivo. Gli altri utenti che partecipano alla chiamata viene subito chiesto di installare o avviare il componente aggiuntivo.

Corrispondenza origine

Le origini fornite nella proprietà mainStageUrl e nella proprietà sidePanelUrl vengono confrontate con le origini nel manifest del componente aggiuntivo del numero del progetto cloud fornito. Se tutto corrisponde, l'utente avviare il componente aggiuntivo.

Devi inoltre indicare l'origine del sito che avvia la condivisione schermo nel campo addOnOrigins nel componente aggiuntivo del file manifest.

Per ulteriori informazioni, consulta Sicurezza dei componenti aggiuntivi.