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

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

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

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

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

מידע על נקודת האחיזה לצילום

נקודת אחיזה הצילום מורכבת משני חלקים משלימים:

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

הצד המצולם

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

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

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

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

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

הצד המצולם

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

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

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

// 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 בלבד).

דוגמה

כדי לשחק עם נקודת האחיזה לצילום, מריצים את הדוגמה ב-Glitch. חשוב לבדוק את קוד המקור.

הדגמות

חלק מההדגמות זמינות בכתובת:

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

זיהוי תכונות

כדי לבדוק אם getCaptureHandle() נתמך, צריך להשתמש בקוד:

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

כדי לבדוק אם navigator.mediaDevices.setCaptureHandleConfig() נתמך, צריך להשתמש בקוד:

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

מה עושים אחר כך

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

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

משוב

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

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

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

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

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

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

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

פנייה לתמיכה

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

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

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

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

אישורים

תודה לג'ו מדלי על סקירת המאמר הזה.