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şiye odaklanırken çevreyi bulanıklaştırır.
Arka Plan Bulanıklaştırma API'si, web'e arka plan gizleme özellikleri sunar. Bu API, web uygulamalarının işletim sisteminden arka plan bulanıklaştırma efektini kameranın video feed'ine verimli bir şekilde uygulamasını istemesini sağlar. Bu sayede, TensorFlow.js, Mediapipe gibi makine öğrenimi çerçeveleri veya her video karesinin ayrı ayrı işlenmesi gereken bulut tabanlı çözümler aracılığıyla efekti manuel olarak uygulamak için gereken maliyetli işlem ortadan kalkar.
Arka Plan Bulanıklaştırma API'sini etkinleştir
Arka Plan Bulanıklaştırma API'si Chrome'da varsayılan olarak etkin değildir ancak işlev açıkça etkinleştirilerek Chrome 114'te denenebilir. chrome://flags/#enable-experimental-web-platform-features adresinde "Deneysel Web Platformu özellikleri" bayrakını etkinleştirerek yerel olarak etkinleştirebilirsiniz.
Bu özelliği uygulamanızın tüm ziyaretçileri için etkinleştirmek üzere bir kaynak denemesi devam etmektedir ve bu deneme Chrome 117'de (3 Kasım 2023) sona erecektir. Deneme sürümüne katılmak için kaydolun ve HTML veya HTTP üst bilgisine kaynak deneme jetonunu içeren bir meta öğe ekleyin. Daha fazla bilgi için Kaynak denemelerini kullanmaya başlama başlıklı makaleyi inceleyin.
Arka plan bulanıklaştırma değişikliklerini gözlemleme
MediaStreamTrack üzerindeki backgroundBlur doğru/yanlış ayarı, işletim sisteminin medya cihazında arka plan bulanıklaştırma uygulayıp uygulamadığını öğrenmenizi sağlar. Ayrıca, kullanıcı bir işletim sistemi olanağı aracılığıyla arka plan bulanıklığını etkinleştirdiğinde veya devre dışı bıraktığında MediaStreamTrack üzerinde bir "configurationchange" etkinliği tetiklenir.
Aşağıdaki kod snippet'inde, kullanıcının erişim izni verdiği bir medya cihazında arka plan bulanıklığındaki değişikliklerin nasıl izleneceği gösterilmektedir.
// 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 üzerindeki backgroundBlur dizisi özelliği, medya cihazında arka plan bulanıklaştırmayı kontrol edip edemeyeceğinizi öğrenmenizi sağlar. Tanımlanmamışsa veya yalnızca bir değer ([true] veya [false]) içeriyorsa kamera arka plan bulanıklığını kontrol edemezsiniz. İki değer içeriyorsa işletim sisteminden arka plan bulanıklaştırma efektini kameranın video feed'inde etkinleştirmesini istemek için MediaStreamTrack üzerinde applyConstraints() yöntemini kullanabilirsiniz. Döndürülen söz, başarılı olduğunda çözülür ve hata olduğunda reddedilir.
Aşağıdaki kod snippet'inde, kullanıcının erişim izni verdiği bir medya cihazında kameranın arka plan bulanıklığını nasıl kontrol edeceğiniz gösterilmektedir.
// 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'daki 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 olanak tanır. Windows, arka plan bulanıklığını gözlemlemenize ve kontrol etmenize olanak tanır.
Demo
Arka plan bulanıklığını açıp kapatabilir ve resmi örnek ile oynayarak 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ştirici geri bildirimleri çok önemlidir. Lütfen öneri ve sorularınızla birlikte GitHub'da sorun bildirin.
Arka plan bulanıklığını bir boole değeri olarak göstermenin ihtiyaçlarınıza uygun olup olmadığı veya tüm işletim sistemlerinde gösterilenlerle uyumlu olmasa bile "hafif", "güçlü", "kapalı" gibi daha ayrıntılı bir yaklaşımın daha uygun olup olmadığı hakkındaki görüşlerinizi öğrenmekten memnuniyet duyarız.