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

François Beaufort

Elad Alon

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

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

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

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

חיתוך

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

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

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

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

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

הדגמה (דמו)

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

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

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

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

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

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

משוב

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

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

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

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

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

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

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

הצגת תמיכה

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

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

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

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

תודות

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