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

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

בדף הזה נסביר איך לקדם תוסף למשתמשים בזמן שיתוף מסך של כרטיסייה ב-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 של SDK של תוספי Meet.

קודם כול, מתקינים את חבילת ה-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, מוסיפים לאפליקציה את תג הסקריפט הבא:

<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. לחיצה על הלחצן בבאנר פותחת את התוסף של מספר הפרויקט ב-Cloud בשלב הראשי. המאפיין 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. לחיצה על הלחצן בבאנר פותחת את התוסף של מספר הפרויקט ב-Cloud בחלונית הצדדית. המאפיין sidePanelUrl נטען, והמאפיין additionalData משמש להגדרת מצב ההתחלה של הפעילות בתוסף. משתמשים אחרים בשיחה יתבקשו להתקין או להפעיל את התוסף באופן מיידי.

התאמה למקור

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

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

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