פלטפורמת האינטרנט כבר מאפשרת לאפליקציית אינטרנט לצלם מסלול וידאו מהכרטיסייה הנוכחית. כיום הוא נשלח עם Region תופסת 'צילום אזור', מנגנון לחיתוך הטראקים האלה מהסרטונים. אפליקציית האינטרנט מקצה חלק מהכרטיסייה הנוכחית כאזור העניין שלו, והדפדפן חותך את כל הפיקסלים מחוץ לאזור הזה.
בעבר, אפליקציות אינטרנט יכלו לחתוך טראקים של סרטונים 'באופן ידני'. כלומר, אפליקציות אינטרנט יכולות להשפיע ישירות על כל פריים. זה לא היה עוצמתי או ביצועים טובים. 'צילום אזור' מתייחס לחסרונות האלה. אפליקציית האינטרנט יכולה עכשיו להורות לדפדפן לבצע את העבודה מטעמו.
מידע על צילום אזורים
אז יצרתם אתר עם תוכן דינמי (TMD). היא אפליקציית האינטרנט הטובה ביותר בעולם, ואנשים פשוט לא יכולים להפסיק להשתמש בה, לעיתים קרובות בשיתוף פעולה. בשלב הבא, אפשר להטמיע יכולות של שיחות ועידה וירטואליות. אתם מחליטים להמשיך בדרך הזו. אתם מתחברים לספק שירות קיים של שיחות ועידה בווידאו ומטמיעים את אפליקציית האינטרנט שלו כ-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.
}
הפקת CropTarget
נתמקד ברכיב שנקרא 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. להיות חשוב לבדוק את קוד המקור.
תמיכה בדפדפנים
תמיכה בדפדפן
- 104
- 104
- x
- x
התכונה 'צילום אזור' זמינה רק ב-Chrome 104 במחשב.
המאמרים הבאים
הנה הצצה למה שצפוי בעתיד הקרוב שישפר את שיתוף המסך באינטרנט:
- התכונה 'צילום אזור' תתמוך בצילומי מסך של כרטיסיות אחרות.
- האפשרות מיקוד מותנה תאפשר לאפליקציית האינטרנט לצילום המסך להנחות את הדפדפן להעביר את המיקוד למסך התצוגה שצולמה או להימנע משינוי כזה של המיקוד.
- יכול להיות שיסופק Capture API ברמת הרכיב.
משוב
צוות Chrome וקהילת תקני האינטרנט מעוניינים לשמוע על החוויה שלכם עם 'צילום אזורי'.
נשמח לשמוע על העיצוב
האם יש משהו בתכונה 'צילום אזור' שלא פועל כצפוי? או שיש שיטות או מאפיינים חסרים שתצטרכו ליישם את הרעיון שלכם? יש לך שאלה או הערה לגבי מודל האבטחה?
- אפשר לדווח על בעיית מפרט במאגר GitHub או להוסיף רעיונות לגבי בעיה קיימת.
נתקלתם בבעיה בהטמעה?
מצאת באג בהטמעה של Chrome? או שההטמעה שונה מהמפרט?
- דווחו על באג בכתובת https://new.crbug.com. חשוב לכלול כמה שיותר פרטים והוראות פשוטות לשחזור הקובץ. Glitch היא אפשרות טובה לשיתוף תגובות מהירות וקלות.
פנייה לתמיכה
יש לך אפשרות להשתמש ב'צילום אזורי'? התמיכה הציבורית שלך עוזרת לצוות Chrome לתת עדיפות לתכונות, ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהם.
שליחת ציוץ אל @ChromiumDev והראו לנו איפה ואיך אתם משתמשים בו.
קישורים שימושיים
אישורים
תודה לג'ו מדלי על סקירת המאמר הזה.