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

François Beaufort

Elad Alon

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

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

מידע על צילום אזור

אז יצרתם אתר עם Dynamic Content™. זוהי אפליקציית האינטרנט הטובה ביותר אי פעם, והאנשים לא מפסיקים להשתמש בה, לרוב בשיתוף פעולה. השלב הבא יכול להיות הטמעת יכולות של כנסים וירטואליים. אתם מחליטים להשתמש באפשרות הזו. עובדים בשיתוף עם ספק קיים של שירות לשיחות ועידה בווידאו, ומטמיעים את אפליקציית האינטרנט שלו כ-iframe מקור חוצה. אפליקציית האינטרנט לשיחות ועידה בווידאו מתעדת את הכרטיסייה הנוכחית כטראק וידאו ומעבירה אותו למשתתפים מרחוק.

אזור התוכן הראשי מופיע בכחול, וה-iframe מאתר אחר מופיע באדום.

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

אז נשתמש בתכונה 'צילום אזור'. בדף שלכם יש Element, אולי <div>, שמכיל את התוכן הראשי. נקראים אותו mainContentArea. אתם רוצים שאפליקציית האינטרנט לשיחות ועידה בווידאו תצלם ותשתף מרחוק את האזור שמוגדר על ידי תיבת הגבול של הרכיב הזה. כך מפיקים CropTarget מ-mainContentArea. מעבירים את CropTarget הזה לאפליקציית האינטרנט של שיתוף המסך. אחרי חיתוך הטראק של הסרטון באמצעות CropTarget הזה, התמונות בטראק הזה מורכבות עכשיו רק מהפיקסלים שנמצאים בתוך תיבת הגבול של mainContentArea. אם mainContentArea משתנה בגודל, בצורה או במיקום, הטראק של הסרטון משתנה בהתאם, בלי צורך בהזנה נוספת מאף אחת מהאפליקציות לאינטרנט.

נעבור שוב על השלבים האלה:

כדי להגדיר CropTarget באפליקציית האינטרנט, קוראים ל-CropTarget.fromElement() עם האלמנט שבחרתם כקלט.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

מעבירים את CropTarget לאפליקציית האינטרנט לשיחות ועידה בווידאו.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

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

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Et voilà! סיימת.

ירידה לעומק

זיהוי תכונות

כדי לבדוק אם יש תמיכה ב-CropTarget.fromElement(), משתמשים ב-:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

הפקת יעד חיתוך

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

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

בניגוד ל-Element, אובייקט CropTarget הוא ניתן לסריאליזציה. אפשר להעביר אותו למסמך אחר באמצעות Window.postMessage(), למשל.

הערה: לפני Chrome 106, הבקשה CropTarget.fromElement(mainContentArea) הייתה נדחית אם הסוג של mainContentArea לא היה <div> או iframe.

חיתוך

כשמצלמים את הכרטיסייה, טראק הווידאו נוצר כ-BrowserCaptureMediaStreamTrack, שהוא תת-סוג של MediaStreamTrack. המחלקה המשנית הזו חושפת את cropTo(). קוראים ל-track.cropTo(cropTarget) כדי להתחיל חיתוך לפי קווי המתאר של mainContentArea (הרכיב שממנו נגזר cropTarget).

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

אם הפעולה נכשלת, ה-Promise נדחה. זה יקרה אם:

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

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

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

כדי לחזור למצב ללא חיתוך, צריך להפעיל את cropTo() עם null.

// Stop cropping.
await track.cropTo(null);

תוכן חסום ותוכן שחוסם

ב-Region Capture, רק המיקום והגודל של היעד חשובים, ולא z-index. הפיקסלים שמסתירים את היעד ייקלטו. חלקים מוסתרים של היעד לא יתועדו.

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

התנהגות של 'צילום אזור' עם תוכן חוסם.

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

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

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

אפליקציית אינטרנט שמכילה שקפים והערות של הדוברים.
לא מומלץ לשתף את ההערות מרחוק. צילום אזור של קליפ.

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

ב-Chrome מוצג גבול כחול סביב שולי הכרטיסיות שצולמו. בדרך כלל, כשחותכים תמונה ב-Chrome, מופיע מסגרת כחולה סביב היעד שנחתך.

הדגמה (דמו)

כדי לשחק עם Region Capture, אפשר להריץ את הדמו ב-Glitch. מומלץ לבדוק את קוד המקור.

תמיכה בדפדפנים

תמיכה בדפדפנים

• 104
• 104
• x
• x

התכונה 'צילום אזור' זמינה ב-Chrome 104 במחשב בלבד.

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

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

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

משוב

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

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

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

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

בעיה בהטמעה?

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

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

הצגת תמיכה

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

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

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

• מפרט
• הסבר
• בדיקת התג
• באג ב-Chromium
• הערך ב-ChromeStatus.com

תודות

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