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