דף זה תורגם על ידי Cloud Translation API.

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

François Beaufort

Elad Alon

תמיכה בדפדפן

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

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

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

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

איור של אפקט היכל המראות

מידע על הכינוי של תיעוד דיגיטלי

הכינוי לצילום מורכב משני חלקים משלימים:

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

הדוגמה הבאה מראה איך לקרוא את פרטי ה-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 בסטרימינג של הווידאו. מנגנון Capture Handle מספק מנגנון פשוט, אמין ומאובטח יותר. הוא גם מאפשר לאפליקציית האינטרנט שמתעדת את הקהל – לבחור מקורות או את כל האינטרנט.

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

דוגמה

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

הדגמות

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

זיהוי תכונות

כדי לבדוק אם יש תמיכה ב-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.

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

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

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

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

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

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

פנייה לתמיכה

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

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

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

תודות

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