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

François Beaufort

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().

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

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

כשמגדירים את המאפיין 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 במחשב.

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

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

משוב

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

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

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

• מפרסמים בעיית מפרט במאגר GitHub או מוסיפים הערות לגבי בעיה קיימת.

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

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

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

פנייה לתמיכה

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

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

קישורים שימושיים

• מפרט
• הודעת הסבר בנושא displaySurface
• הודעת הסבר בנושא monitorTypeSurfaces
• הודעת הסבר בנושא surfaceSwitching
• הודעת הסבר בנושא selfBrowserSurface
• הודעת הסבר בנושא systemAudio
• בדיקת התג

אישורים

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

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