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

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

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 שנוצר באופן אקראי ככינוי ואת המקור לכל אפליקציית אינטרנט שמתבצע בה תיעוד.

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 על בדיקת המאמר הזה.