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

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

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

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

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

אם ההבטחה לא תבוצע, היא תידחה. זה יקרה אם:

• המטבע 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);

הסתרה והסתרה של תוכן

עבור צילום אזור, יש להתייחס רק למיקום ולגודל של היעד, ולא ל-z-index. המערכת תצלם פיקסלים שמכילים את היעד. חלקים חסומים של היעד לא יתפסו.

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

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

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

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

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

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

הדגמה (דמו)

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

תמיכת דפדפן

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

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

הנה הצצה למה שצפוי בעתיד הקרוב, שישפרו את שיתוף המסך באינטרנט:

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

משוב

צוות Chrome וקהילת תקני האינטרנט רוצים לשמוע על החוויות שלך עם Region Capture.

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

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

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

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

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

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

הבעת תמיכה

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

שלח ציוץ אל @ChromiumDev וספר לנו איפה אתה משתמש בו ובאיזה אופן.

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

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

אישורים

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