טשטוש הרקע הוא תכונה נפוצה באפליקציות מודרניות של שיחות ועידה בווידאו. המערכת מבדילה באופן אוטומטי בין הרקע לבין האדם שמול המצלמה. הסביבה מטשטשת את הסביבה תוך שמירה על המיקוד באדם.
ממשק ה-API של טשטוש רקע מספק לאינטרנט יכולות להסתרת רקע. ה-API הזה מאפשר לאפליקציות אינטרנט לבקש ממערכת ההפעלה להחיל ביעילות את אפקט טשטוש הרקע על פיד הווידאו של המצלמה. כך לא נדרש יישום ידני של ההשפעה באמצעות frameworks של למידת מכונה, כמו TensorFlow.js, Mediapipe או פתרונות מבוססי-ענן, שמחייבים עיבוד של כל פריים וידאו בנפרד.
הפעלת ה-API של טשטוש הרקע
כברירת מחדל, ה-BackgroundBackground API לא מופעל ב-Chrome, אבל אפשר להתנסות בו ב-Chrome 114 על ידי הפעלה מפורשת של הפונקציונליות הזו. ניתן להפעיל אותה באופן מקומי על ידי הפעלת הדגל 'תכונות ניסיוניות של פלטפורמת האינטרנט' ב-chrome://flags/#enable-experimental-web-platform-features.
כדי להפעיל אותה לכל המבקרים באפליקציה שלכם, מתבצעת כרגע גרסת מקור לניסיון, שתסתיים ב-Chrome 117 (3 בנובמבר 2023). כדי להשתתף בתקופת הניסיון, עליכם להירשם ולכלול מטא-רכיב עם אסימון המקור לניסיון, בכותרת ה-HTML או בכותרת ה-HTTP. מידע נוסף זמין בפוסט תחילת העבודה עם גרסאות מקור לניסיון.
זיהוי שינויים בטשטוש הרקע
ההגדרה הבוליאנית backgroundBlur במכשיר MediaStreamTrack מאפשרת לך לדעת אם מערכת ההפעלה מחילה טשטוש רקע במכשיר המדיה. בנוסף, כשהמשתמש מפעיל או משבית את טשטוש הרקע באמצעות מערכת הפעלה במחיר סביר, מופעל אירוע "configurationchange" במכשיר MediaStreamTrack.
קטע הקוד הבא מדגים איך לעקוב אחרי שינויים בטשטוש הרקע במכשיר מדיה שאליו המשתמש העניק גישה.
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Read current background blur value.
const [track] = stream.getVideoTracks();
let { backgroundBlur } = track.getSettings();
console.log(`Background blur is ${backgroundBlur ? "ON" : "OFF"}`);
// Listen to background blur changes.
track.addEventListener("configurationchange", () => {
if (backgroundBlur !== track.getSettings().backgroundBlur) {
backgroundBlur = track.getSettings().backgroundBlur;
console.log(`Background blur is now ${backgroundBlur ? "ON" : "OFF"}`);
}
});
הפעלה וכיבוי של טשטוש הרקע
יכולת המערך backgroundBlur במכשיר MediaStreamTrack מאפשרת לך לדעת אם יש לך אפשרות לשלוט בטשטוש הרקע במכשיר המדיה. אם התמונה לא מוגדרת או מכילה ערך אחד בלבד ([true] או [false]), לא ניתן לשלוט בטשטוש הרקע של המצלמה. אם הוא מכיל שני ערכים, אפשר להשתמש בשיטה applyConstraints() במכשיר MediaStreamTrack כדי לבקש ממערכת ההפעלה להחליף את אפקט טשטוש הרקע בפיד הווידאו של המצלמה. ההבטחה שהוחזרה תסתיים בהצלחה ותידחה במקרה של שגיאה.
קטע הקוד הבא מדגים איך לשלוט בטשטוש הרקע של המצלמה במכשיר מדיה שאליו המשתמש העניק גישה.
// Prompt the user to grant access to a camera.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
// Show camera video feed to the user (optional).
document.querySelector("video").srcObject = stream;
// Check whether the user can toggle background blur in the web app.
// If not, note that you may still want to apply it through a fallback
// software solution.
const [track] = stream.getVideoTracks();
if (track.getCapabilities().backgroundBlur?.length === 2) {
const button = document.querySelector("button");
button.addEventListener("click", toggleBackgroundBlurButtonClick);
button.disabled = false;
}
async function toggleBackgroundBlurButtonClick() {
const constraints = {
backgroundBlur: !track.getSettings().backgroundBlur,
};
// Request operating system to toggle background blur.
await track.applyConstraints(constraints);
const newSettings = track.getSettings();
log(`Background blur is now ${newSettings.backgroundBlur ? "ON" : "OFF"}`);
}
תמיכה בפלטפורמות
ה-API של טשטוש הרקע זמין ב-Chrome 114 ב-ChromeOS, ב-macOS וב-Windows.
כרגע, ב-ChromeOS וב-macOS אפשר לראות רק שינויים בטשטוש הרקע שהמשתמשים יכולים לבצע דרך ממשק המשתמש של מערכת ההפעלה, כמו מרכז הבקרה ב-macOS. Windows מאפשרת לך לראות את טשטוש הרקע ולשלוט בו.
הדגמה (דמו)
אפשר להחליף את מצב טשטוש הרקע ולראות שינויים על ידי משחק עם הדוגמה הרשמית. (כפי שצוין קודם לכן, הזמינות של התכונות האלה תלויה בתמיכה של הפלטפורמה).
משוב
משוב המפתחים חשוב מאוד בשלב זה, לכן אפשר לדווח על בעיות ב-GitHub בצירוף הצעות ושאלות.
נשמח לשמוע מה דעתכם לגבי השאלה אם חשיפת טשטוש הרקע כערך בוליאני מתאימה לצרכים שלכם, או אם גישה פרטנית יותר כמו "light" (תאורה), "strong" (חזקה) או "off" (כבוי) תהיה מתאימה יותר, גם אם היא לא תואמת למה שנחשפת בכל מערכות ההפעלה.
קישורים שימושיים
תמונה ראשית (Hero) מאת איו אוגונסיינד.