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

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

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

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

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

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

האפשרות displaySurface

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

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

• "browser" לכרטיסיות.
• "window" ל-Windows.
• "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 זמינה בגרסה 105 של Chrome למחשב.

• monitorTypeSurfaces זמין ב-Chrome 119 במחשב.

משוב

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

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

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

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

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

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

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

הבעת תמיכה

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

שלח ציוץ אל @ChromiumDev וספר לנו איפה אתה משתמש בו ובאיזה אופן.

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

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

אישורים

דמות גיבורה מאת ג'ון שנובריץ'.

תודה על קריאת המאמר Rachel Andrew.