שיתוף כרטיסיות טוב יותר באמצעות ידית הצילום

François Beaufort

Elad Alon

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

כמה דוגמאות שממחישות את היתרונות.

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

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

מידע על ידית הצילום

התכונה 'צילום מסך' מורכבת משני חלקים משלימים:

• אפליקציות אינטרנט שנתפסו יכולות להסכים לחשוף מידע מסוים למקורות מסוימים באמצעות navigator.mediaDevices.setCaptureHandleConfig().
• אחרי הלכידה, אפליקציות אינטרנט יכולות לקרוא את המידע הזה באמצעות getCaptureHandle() באובייקטים של MediaStreamTrack.

הצד שצולם

אפליקציות אינטרנט יכולות לחשוף מידע לאפליקציות אינטרנט אחרות שרוצות ללכוד מידע. היא עושה זאת על ידי קריאה ל-navigator.mediaDevices.setCaptureHandleConfig() עם אובייקט אופציונלי שמורכב מהמאפיינים הבאים:

• handle: יכולה להיות כל מחרוזת באורך של עד 1,024 תווים.
• ‫exposeOrigin: אם true, יכול להיות שהמקור של אפליקציית האינטרנט שצולמה ייחשף לאפליקציות אינטרנט שמצלמות.
• ‫permittedOrigins: הערכים התקינים הם (1) מערך ריק, (2) מערך עם הפריט היחיד "*" או (3) מערך של מקורות. אם permittedOrigins כולל את הפריט היחיד "*", אז כל אפליקציות האינטרנט שמתעדות את CaptureHandle יכולות לראות אותו. אחרת, אפשר לראות אותו רק באפליקציות אינטרנט שמתעדות את המקור שלו ב-permittedOrigins.

בדוגמה הבאה מוצג UUID שנוצר באופן אקראי כ-handle והמקור של כל אפליקציית אינטרנט שמתעדת את הנתונים.

const config = {
  handle: crypto.randomUUID(),
  exposeOrigin: true,
  permittedOrigins: ['*'],
};
navigator.mediaDevices.setCaptureHandleConfig(config);

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

הצד שמתועד

אפליקציית האינטרנט שמבצעת את הצילום מחזיקה בסרטון MediaStreamTrack, ויכולה לקרוא את פרטי ה-handle של הצילום על ידי קריאה ל-getCaptureHandle() באותו MediaStreamTrack. הקריאה הזו מחזירה null אם אין אפשרות ללכידת נתונים, או אם לאפליקציית האינטרנט שמתעדת את הנתונים אין הרשאה לקרוא אותם. אם יש ידית ללכידה, ואפליקציית האינטרנט ללכידה נוספה ל-permittedOrigins, הקריאה הזו מחזירה אובייקט עם המאפיינים הבאים:

• ‫handle: ערך המחרוזת שהוגדר על ידי אפליקציית האינטרנט שתועדה באמצעות navigator.mediaDevices.setCaptureHandleConfig().
• ‫origin: המקור של אפליקציית האינטרנט שתועדה אם הערך של exposeOrigin הוגדר כ-true. אחרת, הוא לא מוגדר.

בדוגמה הבאה אפשר לראות איך קוראים את פרטי ה-handle של הלכידה מתוך רצועת וידאו.

// Prompt the user to capture their display (screen, window, tab).
const stream = await navigator.mediaDevices.getDisplayMedia();

// Check if the video track is exposing information.
const [videoTrack] = stream.getVideoTracks();
const captureHandle = videoTrack.getCaptureHandle();
if (captureHandle) {
  // Use captureHandle.origin and captureHandle.handle...
}

אפשר לעקוב אחרי שינויים ב-CaptureHandle על ידי האזנה לאירועים ב-"capturehandlechange" באובייקט MediaStreamTrack. השינויים מתרחשים כש:

• השיחות שמתבצעות באפליקציית האינטרנט navigator.mediaDevices.setCaptureHandleConfig().
• ניווט בין מסמכים מתרחש באפליקציית האינטרנט שתועדה.

videoTrack.addEventListener('capturehandlechange', event => {
  captureHandle = event.target.getCaptureHandle();
  // Consume new capture handle...
});

אבטחה ופרטיות

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

הערה: navigator.mediaDevices.setCaptureHandleConfig() זמין רק למסגרות ראשיות ברמה העליונה בהקשרים של גלישה מאובטחת (HTTPS בלבד).

דוגמה

כדי להתנסות ב-Capture Handle, אפשר להריץ את הדוגמה.

הדגמות

דוגמאות זמינות בכתובת:

• שלט רחוק
• זיהוי של צילום עצמי

זיהוי תכונות

כדי לבדוק אם יש תמיכה ב-getCaptureHandle(), משתמשים בפקודה:

if ('getCaptureHandle' in MediaStreamTrack.prototype) {
  // getCaptureHandle() is supported.
}

כדי לבדוק אם יש תמיכה ב-navigator.mediaDevices.setCaptureHandleConfig(), משתמשים בפקודה:

if ('setCaptureHandleConfig' in navigator.mediaDevices) {
  // navigator.mediaDevices.setCaptureHandleConfig() is supported.
}

המאמרים הבאים

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

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

משוב

צוות Chrome והקהילה של תקני האינטרנט רוצים לשמוע על החוויות שלכם עם Capture Handle.

נשמח לקבל ממך פרטים על העיצוב

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

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

בעיה בהטמעה?

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

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

תומכים ביוצרים

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

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

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

• מפרט
• סרטון הסבר
• בדיקת תגים
• באג ב-Chromium
• רישום ב-ChromeStatus.com

תודות

תודה ל-Joe Medley על בדיקת המאמר הזה.