Размытие фона — популярная функция в современных приложениях для видеоконференций. Он автоматически отличает фон от человека перед камерой, размывая окружение, сохраняя при этом фокус на человеке.
API Background Blur предоставляет в Интернет возможности скрытия фона. Этот API позволяет веб-приложениям запрашивать операционную систему для эффективного применения эффекта размытия фона к видеопотоку камеры. Это устраняет дорогостоящую необходимость ручного применения эффекта с помощью платформ машинного обучения, таких как TensorFlow.js, Mediapipe, или облачных решений, которые требуют индивидуальной обработки каждого видеокадра.
Включите API размытия фона
По умолчанию API размытия фона не включен в Chrome, но с ним можно поэкспериментировать в Chrome 114, явно включив эту функцию. Вы можете активировать его локально, включив флаг «Экспериментальные функции веб-платформы» на chrome://flags/#enable-experimental-web-platform-features .
Чтобы включить эту функцию для всех посетителей вашего приложения, в настоящее время проводится пробная версия Origin , которая завершится в Chrome 117 (3 ноября 2023 г.). Чтобы принять участие в пробной версии, зарегистрируйтесь и включите мета-элемент с токеном исходной пробной версии в HTML- или HTTP-заголовок. Дополнительную информацию см. в разделе Начало работы с пробными версиями Origin .
Наблюдайте за изменениями размытия фона
Логический параметр backgroundBlur в MediaStreamTrack позволяет узнать, применяет ли операционная система размытие фона на мультимедийном устройстве. Кроме того, когда пользователь включает или выключает размытие фона с помощью возможностей операционной системы, в MediaStreamTrack запускается событие "configurationchange" .
В следующем фрагменте кода показано, как отслеживать изменения размытия фона на мультимедийном устройстве, к которому пользователь предоставил доступ.
// 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 с предложениями и вопросами.
Мы хотели бы услышать ваши мысли о том, соответствует ли вашим потребностям выставление размытия фона в виде логического значения или более подходящим будет более детальный подход, такой как «легкий», «сильный», «выключенный», даже если это не так. совместим с тем, что доступно во всех операционных системах.