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

François Beaufort
François Beaufort
GitHub
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() יכולה להשתמש בו.

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

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

  • Chrome: ‏ 105.
  • Edge: ‏ 105.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

  • התכונה systemAudio זמינה ב-Chrome 105 במחשב.

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

  • Chrome: ‏ 119.
  • Edge: ‏ 119.
  • Firefox: לא נתמך.
  • Safari: לא נתמך.

  • התכונה monitorTypeSurfaces זמינה ב-Chrome 119 במחשב.

משוב

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

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

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

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

בעיה בהטמעה?

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

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

הצגת תמיכה

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

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

תודות

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