קידום תוסף למשתמשים באמצעות שיתוף המסך

קידום תוסף באמצעות שיתוף מסך.

בדף הזה נסביר איך לקדם תוסף למשתמשים בזמן שיתוף מסך של כרטיסייה ב-Google Meet, על ידי הוספת כמות קטנה של קוד לדף אינטרנט אחר.

השיטה exposeToMeetWhenScreensharing() מאפשרת לאתר לשלוח מידע ל-Meet כשמשתפים את המסך של הכרטיסייה שלו. המידע הזה משמש בחוויית השימוש בתוסף ב-Meet כשהמשתמש לוחץ על 'התחלת הפעילות' בבאנר של המצגת, אם התוסף מותקן. אם התוסף לא מותקן אצל המשתמש כשהוא משתף כרטיסייה במסך, תופיע בקשה להתקין אותו.

האובייקט AddonScreenshareInfo מכיל חמישה מאפיינים שאפשר להוסיף בהתאם לתרחיש לדוגמה:

  • additionalData: מידע שבעזרתו התוסף יכול לאתחל את עצמו. אפשר להגדיר את הערך רק אם המאפיין startActivityOnOpen מוגדר כ-True ואפשר לגשת אליו באמצעות ActivityStartingState. מידע נוסף זמין במאמר קבלת המצב ההתחלתי של הפעילות.

  • cloudProjectNumber: חובה. מספר הפרויקט ב-Google Cloud.

  • mainStageUrl: כתובת ה-URL שהשלב הראשי נפתח כשהתוסף מתחיל, למשל https://www.example.com. כתובת ה-URL חייבת להיות שייכת לאותו מקור של כתובות ה-URL שצוינו במניפסט של התוסף.

  • sidePanelUrl: כתובת ה-URL שבה נפתחת החלונית הצדדית אחרי שהתוסף מופעל, למשל https://www.example.com. כתובת ה-URL חייבת להשתייך לאותו מקור כמו כתובות ה-URL שצוינו במניפסט של התוסף.

  • startActivityOnOpen: חובה. האם להתחיל את חוויית השימוש בתוסף הפעילות ב-Meet מיד כשהמשתמש מפעיל את התוסף מהבאנר של שיתוף המסך. חייב להיות true אם נעשה שימוש במאפיין mainStageUrl.

התקנה וייבוא של ה-SDK

אפשר לגשת ל-SDK באמצעות npm או באמצעות gstatic.

אם בפרויקט שלכם נעשה שימוש ב-npm, תוכלו לפעול לפי ההוראות ל חבילת ה-npm של Meet Add-ons SDK.

קודם כול, מתקינים את חבילת ה-npm:

npm install @googleworkspace/meet-addons

לאחר מכן תוכלו לייבא את הממשק של MeetAddonScreenshareExport כדי להשתמש ב-SDK לתוספים ל-Meet:

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

משתמשי TypeScript יכולים למצוא את ההגדרות של TypeScript בתוך החבילה של המודול.

Gstatic

ה-SDK של תוספי Google Meet זמין כחבילת JavaScript מ-gstatic, דומיין שמציג תוכן סטטי.

כדי להשתמש ב-SDK של Meet Add-ons SDK, צריך להוסיף לאפליקציה את תג הסקריפט הבא:

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

ערכת ה-SDK של תוספי Meet זמינה דרך הממשק MeetAddon בקטע window.meet.addon.

דוגמה: טעינת פעילות בלוח הצדדי בלי להתחיל אותה

בדוגמת הקוד הבאה, מסך המשתמש משתף דף עם תוסף שצריך לשנות את הרשאות המשאבים לפני שאפשר להתחיל את הפעילות. בגלל הדרישה הזו, צריך להפעיל את התוסף בחלונית הצדדית, בלי שהפעילות תתחיל לכולם.

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

מחליפים את מה שכתוב בשדות הבאים:

  • CLOUD_PROJECT_NUMBER: מחרוזת. מספר הפרויקט ב-Cloud.
  • SIDE_PANEL_URL: מחרוזת. כתובת ה-URL של חלונית הצד.

כשהמשתמש במסך השיחה ב-Meet משתף את הדף, הוא רואה באנר של הצגה ב-Meet. לחיצה על הלחצן בבאנר פותחת את התוסף של מספר הפרויקט ב-Cloud בחלונית הצדדית. מכיוון שהמאפיין startActivityOnOpen הוגדר כ-false, הלחצן להפעלת הפעילות מושבת עד להגדרת ActivityStartingState. מידע נוסף זמין במאמר שימוש במצב ההתחלה של הפעילות.

אחרי שהפעילות תתחיל, משתתפים אחרים בשיחה יקבלו בקשה להפעיל או להתקין את התוסף.

הדוגמה הזו כלולה בתוסף לדוגמה 'אנימציה' ב-GitHub כחלק מתוסף מלא. כשמוצג דף האינדקס של אפליקציית האינטרנט שמשויכת לתוסף, המשתמש שמציג את האפליקציה מתבקש להתקין או להגדיר את התוסף.

דוגמה: טעינה בשלב הראשי

בדוגמת הקוד הבאה, משתמש שמשתף מסך של דף אינטרנט ב-Meet שמכיל את הקוד הבא יתבקש להפעיל את התוסף:

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

מחליפים את מה שכתוב בשדות הבאים:

  • CLOUD_PROJECT_NUMBER: מחרוזת. מספר הפרויקט ב-Google Cloud.
  • MAIN_STAGE_URL: מחרוזת. כתובת ה-URL של הבמה הראשית.

כשהמשתמש במסך השיחה ב-Meet משתף את הדף, הוא רואה באנר של הצגה ב-Meet. לחיצה על הלחצן שבבאנר פותחת את התוסף של מספר הפרויקט בענן בשלב הראשי. המאפיין mainStageUrl נטען, והמאפיין additionalData משמש להגדרת מצב ההתחלה של הפעילות בתוסף. שאר המשתמשים בשיחה יתבקשו להתקין או להפעיל את התוסף.

דוגמה: טעינה בחלונית הצדדית

בדוגמה הבאה של הקוד, מסך של משתמש משתף דף עם תוסף שרוצה להתחיל בחלונית הצדדית במקום בשלב הראשי:

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

מחליפים את מה שכתוב בשדות הבאים:

  • CLOUD_PROJECT_NUMBER: מחרוזת. מספר הפרויקט ב-Cloud.
  • SIDE_PANEL_URL: מחרוזת. כתובת ה-URL של חלונית הצד.

כשהמשתמשים במסך השיחה ב-Meet משתפים את הדף, הם רואים באנר של מצגת ב-Meet. לחיצה על הלחצן שבבאנר תפתח את התוסף של מספר הפרויקט הרלוונטי בענן בחלונית הצדדית. המאפיין sidePanelUrl נטען, והמאפיין additionalData משמש להגדרת מצב ההתחלה של התוסף. משתמשים אחרים בשיחה יתבקשו להתקין או להפעיל את התוסף באופן מיידי.

התאמה למקור

המערכת משווה בין המקורות שצוינו בנכס mainStageUrl ובנכס sidePanelUrl לבין המקורות שמפורטים במניפסט של התוסף שמכיל את מספר הפרויקט ב-Cloud. אם הכל תואם, המשתמש יכול להפעיל את התוסף.

בנוסף, צריך לציין את המקור של האתר שמתחיל את שיתוף המסך בשדה addOnOrigins במניפסט התוספים.

מידע נוסף זמין במאמר אבטחת התוספים.