בקרות שיתוף מסך לשמירה על הפרטיות

François Beaufort
François Beaufort
GitHub
Elad Alon

אפשר לשתף כרטיסיות, חלונות ומסכים כבר בפלטפורמת האינטרנט באמצעות Screen Recording API. בקצרה, getDisplayMedia() מאפשר למשתמש לבחור מסך או חלק מהמסך (כמו חלון) כדי לצלם אותו בתור שידור מדיה. לאחר מכן ניתן יהיה להקליט את השידור או לשתף אותו עם אנשים אחרים ברשת. במאמר הזה מוצגים כמה שינויים שבוצעו לאחרונה ב-API, כדי לשמור טוב יותר על הפרטיות ולמנוע שיתוף של מידע אישי בטעות.

ריכזנו כאן רשימה של אמצעי בקרה שאפשר להשתמש בהם כדי לשתף את המסך תוך שמירה על הפרטיות:

  • האפשרות displaySurface יכולה לציין שאפליקציית האינטרנט מעדיפה להציע סוג מסוים של משטח תצוגה (כרטיסיות, חלונות או מסכים).
  • אפשר להשתמש באפשרות monitorTypeSurfaces כדי למנוע מהמשתמש לשתף את כל המסך.
  • האפשרות surfaceSwitching מציינת אם Chrome צריך לאפשר למשתמש לעבור באופן דינמי בין כרטיסיות משותפות.
  • אפשר להשתמש באפשרות selfBrowserSurface כדי למנוע מהמשתמש לשתף את הכרטיסייה הנוכחית. כך אפשר להימנע מ'היכל המראות' !
  • האפשרות systemAudio מבטיחה ש-Chrome יציע למשתמשים רק תיעוד אודיו רלוונטי.

שינויים ב-getDisplayMedia()

השינויים הבאים בוצעו ב-getDisplayMedia().

האפשרות displaySurface

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

הערכים לאפשרות displaySurface הם:

  • "browser" לכרטיסיות.
  • "window" לחלונות.
  • "monitor" למסכים.
const stream = await navigator.mediaDevices.getDisplayMedia({
  // Pre-select the "Window" pane in the media picker.
  video: { displaySurface: "window" },
});
צילום מסך של הכלי לבחירת מדיה, שכולל את הפריטים שנבחרו מראש
ה"חלון" היא מסומנת מראש בכלי לבחירת מדיה.

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

האפשרות monitorTypeSurfaces

כדי להגן על חברות מפני דליפת מידע פרטי עקב 'שגיאה של עובדים', אפליקציות אינטרנט לשיחות ועידה בווידאו יכולות עכשיו להגדיר את monitorTypeSurfaces לערך "exclude". לאחר מכן, Chrome יבטל מסכים בכלי לבחירת מדיה. כדי לכלול אותה, צריך להגדיר אותה ל-"include". כרגע, ערך ברירת המחדל של monitorTypeSurfaces הוא "include", אבל אנחנו ממליצים לאפליקציות אינטרנט להגדיר אותו במפורש, כי ברירת המחדל עשויה להשתנות בעתיד.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Remove the "Entire Screen" pane in the media picker.
  monitorTypeSurfaces: "exclude",
});
צילום מסך של הכלי לבחירת מדיה, ללא
הקטע 'כל המסך' החלונית לא גלויה בכלי לבחירת מדיה.

לתשומת ליבך, monitorTypeSurfaces: "exclude" בוטה באופן בלעדי מהdisplaySurface: "monitor".

האפשרות surfaceSwitching

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

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

אם המדיניות surfaceSwitching מוגדרת לערך "include", הדפדפן יחשוף את הלחצן הזה. אם המדיניות מוגדרת לערך "exclude", הלחצן לא יוצג למשתמש. מומלץ לאפליקציות אינטרנט להגדיר ערך מפורש, כי עם הזמן Chrome עשוי לשנות את ערך ברירת המחדל.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  // Ask Chrome to expose browser-level UX elements that allow
  // the user to switch the underlying track at any time,
  // initiated by the user and without prior action by the web app.
  surfaceSwitching: "include"
});

האפשרות selfBrowserSurface

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

כדי להגן על המשתמשים מפני עצמם, אפליקציות אינטרנט לשיחות ועידה בווידאו יכולות עכשיו להגדיר את הכתובת selfBrowserSurface לערך "exclude". לאחר מכן, Chrome יחריג את הכרטיסייה הנוכחית מרשימת הכרטיסיות שמוצעות למשתמש. כדי לכלול אותה, צריך להגדיר אותה ל-"include". כרגע, ערך ברירת המחדל של selfBrowserSurface הוא "exclude", אבל אנחנו ממליצים לאפליקציות אינטרנט להגדיר אותו במפורש, כי ברירת המחדל עשויה להשתנות בעתיד.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  selfBrowserSurface: "exclude"  // Avoid 🦶🔫.
});
צילום מסך של הכלי לבחירת מדיה, לא כולל את הכרטיסייה הנוכחית
הכרטיסייה הנוכחית מוחרגת, רק הכרטיסייה השנייה מופיעה.

לתשומת ליבך, selfBrowserSurface: "exclude" מפורש לא קיים באופן הדדי עם preferCurrentTab: true.

האפשרות systemAudio

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

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

צילומי מסך של בוחרי המדיה עם שיתוף האודיו מהכרטיסייה
האודיו מהכרטיסייה 'שיתוף' מוצע ב'כרטיסיית Chrome' אבל לא ב'מסך מלא', .

כשמגדירים את המאפיין systemAudio לערך "exclude", אפליקציית אינטרנט יכולה למנוע בלבול של המשתמשים באמצעות אותות מעורבים. Chrome יציע להקליט אודיו לצד כרטיסיות וחלונות, אבל לא לצד מסכים.

const stream = await navigator.mediaDevices.getDisplayMedia({
  video: true,
  audio: true,           // Ask to capture audio; caveat follows.
  systemAudio: "exclude" // Do not offer to capture *system* audio.
});

כרגע, ערך ברירת המחדל של systemAudio הוא "include", אבל אנחנו ממליצים לאפליקציות אינטרנט להגדיר אותו במפורש, כי ברירת המחדל עשויה להשתנות בעתיד.

הדגמה (דמו)

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

תמיכה בדפדפנים

  • displaySurface, surfaceSwitching ו-selfBrowserSurface זמינים ב-Chrome 107 במחשב.

תמיכה בדפדפן

  • 105
  • 105
  • x
  • x

  • הגרסה systemAudio זמינה ב-Chrome 105 במחשב.

תמיכה בדפדפן

  • 119
  • 119
  • x
  • x

  • הגרסה monitorTypeSurfaces זמינה ב-Chrome 119 במחשב.

משוב

צוות Chrome וקהילת תקני האינטרנט רוצים לשמוע על החוויה שלכם עם אמצעי הבקרה האלה לשיתוף המסך.

נשמח לשמוע על העיצוב

האם יש משהו בפקדים האלה לשיתוף המסך שלא פועל כצפוי? או שיש שיטות או מאפיינים חסרים שתצטרכו ליישם את הרעיון שלכם? יש לך שאלה או הערה לגבי מודל האבטחה?

  • אפשר לדווח על בעיית מפרט במאגר GitHub או להוסיף רעיונות לגבי בעיה קיימת.

נתקלתם בבעיה בהטמעה?

מצאת באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?

  • דווחו על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים והוראות פשוטות לשחזור הקובץ. גליץ' הוא פתרון טוב לשיתוף קוד.

פנייה לתמיכה

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

שליחת ציוץ אל @ChromiumDev והראו לנו איפה ואיך אתם משתמשים בו.

אישורים

תמונה ראשית (Hero) של ג'ון שנובריץ'.

תודה לרייצ'ל אנדרו שכתבה את המאמר הזה.