Arka plan bulanıklaştırma, modern video konferans uygulamalarında popüler bir işlevdir. Arka planı kameranın önündeki kişiden otomatik olarak ayırt ederek kişinin odağını korurken çevreyi bulanıklaştırır.
Arka Plan Bulanıklaştırma API'sı, web'e arka plan gizleme özelliklerini sunar. Bu API, web uygulamalarının işletim sisteminden kameranın video feed'ine arka plan bulanıklaştırma efektini etkin bir şekilde uygulamasını istemesini sağlar. Bu sayede TensorFlow.js, Mediapipe gibi makine öğrenimi çerçeveleri veya her video karesinin ayrı ayrı işlenmesini gerektiren bulut tabanlı çözümler aracılığıyla efektin manuel olarak uygulanmasına gerek kalmaz.
Arka Plan Bulanıklığı API'sini etkinleştir
Arka Plan Bulanıklığı API'si varsayılan olarak Chrome'da etkin değildir, ancak bu işlevi açık bir şekilde etkinleştirerek Chrome 114'te denenebilir. chrome://flags/#enable-experimental-web-platform-features adresindeki "Deneysel Web Platformu özellikleri" işaretini etkinleştirerek yerel olarak etkinleştirebilirsiniz.
Bu desteği uygulamanıza gelen tüm ziyaretçilerin kullanımına sunmak için şu anda devam eden bir kaynak denemesi var ve bu deneme Chrome 117'de (3 Kasım 2023) sona erecek şekilde ayarlandı. Denemeye katılmak için kaydolun ve HTML ya da HTTP başlığına kaynak deneme jetonuyla birlikte bir meta öğe ekleyin. Daha fazla bilgi edinmek için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.
Arka plan bulanıklığı değişikliklerini gözlemle
MediaStreamTrack öğesindeki backgroundBlur boole ayarı, işletim sisteminin medya cihazında arka plan bulanıklaştırma uygulayıp uygulamadığını bilmenizi sağlar. Buna ek olarak, kullanıcı bir işletim sistemi yardımıyla arka plan bulanıklaştırmayı açtığında veya kapattığında MediaStreamTrack üzerinde bir "configurationchange" etkinliği tetiklenir.
Aşağıdaki kod snippet'i, kullanıcının erişim izni verdiği medya cihazında arka plan bulanıklığında yapılan değişikliklerin nasıl izleneceğini gösterir.
// 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"}`);
}
});
Arka plan bulanıklaştırmayı aç/kapat
MediaStreamTrack cihazındaki backgroundBlur dizisi özelliği, medya cihazında arka plan bulanıklaştırmayı kontrol edip edemeyeceğinizi bilmenizi sağlar. Tanımlanmamışsa veya yalnızca tek bir değer ([true] ya da [false]) içeriyorsa kamera arka plan bulanıklığını kontrol edemezsiniz. İki değer içeriyorsa MediaStreamTrack üzerinde applyConstraints() yöntemini kullanarak işletim sisteminden arka plan bulanıklaştırma efektini kameranın video feed'ine geçirmesini isteyebilirsiniz. Döndürülen söz, başarılı olunduğunda çözümlenir, hata durumunda ise reddedilir.
Aşağıdaki kod snippet'i, kullanıcının erişim izni verdiği bir medya cihazında kamera arka plan bulanıklığının nasıl kontrol edileceğini gösterir.
// 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"}`);
}
Platform desteği
Arka Plan Bulanıklaştırma API'si ChromeOS, macOS ve Windows'da Chrome 114'te kullanılabilir.
ChromeOS ve macOS şu anda yalnızca kullanıcının, işletim sistemi kullanıcı arayüzü (ör. macOS'teki Kontrol Merkezi) üzerinden yapabileceği arka plan bulanıklaştırma değişikliklerini gözlemlemenize izin vermektedir. Windows, arka plan bulanıklığını gözlemlemenize ve kontrol etmenize olanak tanır.
Demografi
Resmi örneği oynatarak arka plan bulanıklaştırmayı açıp değişiklikleri gözlemleyebilirsiniz. (Daha önce de belirtildiği gibi, bu özelliklerin kullanılabilirliği platformun desteğine bağlıdır.)
Geri bildirim
Bu aşamada geliştiricilerden gelen geri bildirimler çok önemlidir. Bu nedenle, sorunlarınızı GitHub'da belirterek önerilerinizi ve sorularınızı iletebilirsiniz.
Boole değeri olarak arka plan bulanıklaştırmanın ihtiyaçlarınıza uygun olup olmadığı veya "hafif", "güçlü", "kapalı" gibi daha ayrıntılı bir yaklaşımın tüm işletim sistemlerinde gösterilenlerle uyumlu olmasa bile daha uygun olup olmadığıyla ilgili düşüncelerinizi öğrenmek isteriz.
Faydalı bağlantı
Ayo Ogunseinde'nin ana görseli.