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

François Beaufort

Elad Alon

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

תודות

תודה ל-Rachel Andrew על הבדיקה