טשטוש הרקע הוא פונקציה פופולרית באפליקציות מודרניות לשיחות ועידה בווידאו. המצלמה מבדילה באופן אוטומטי בין הרקע לבין האדם שמול המצלמה, מטשטשת את הסביבה תוך שמירה על המיקוד באדם.
ה-Background Blur API מאפשר להסתיר את הרקע באינטרנט. ה-API הזה מאפשר לאפליקציות אינטרנט לבקש ממערכת ההפעלה להחיל ביעילות את אפקט טשטוש הרקע על פיד הווידאו של המצלמה. כך אין צורך להחיל את האפקט באופן ידני באמצעות מסגרות של למידת מכונה כמו TensorFlow.js, Mediapipe או פתרונות מבוססי-ענן, שדורשים עיבוד של כל פריים וידאו בנפרד.
הפעלת Background Blur API
כברירת מחדל, ממשק ה-API של טשטוש הרקע לא מופעל ב-Chrome, אבל אפשר להתנסות בו ב-Chrome 114 על ידי הפעלה מפורשת של הפונקציונליות. ניתן להפעיל אותו באופן מקומי על ידי הפעלת הדגל 'תכונות ניסיוניות של פלטפורמת האינטרנט' ב-chrome://flags/#enable-experimental-web-platform-features.
כדי להפעיל את התכונה לכל המבקרים באפליקציה, אנחנו עורכים גרסת טרום-השקה שתסתיים בגרסה 117 של Chrome (3 בנובמבר 2023). כדי להשתתף בתוכנית הניסוי, צריך להירשם ולצרף אלמנט meta עם אסימון הניסיון של המקור בכותרת ה-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 עם הצעות ושאלות.
נשמח לשמוע מה דעתך: האם חשיפת טשטוש הרקע כערך בוליאני מתאימה לצרכים שלך, או שמתאים יותר גישה מפורטת יותר כמו 'קל', 'חזק', 'מושבת', גם אם היא לא תואמת למה שחשוף בכל מערכות ההפעלה.