Размытие фона камеры

Франсуа Бофор
François Beaufort
GitHub

Размытие фона — популярная функция в современных приложениях для видеоконференций. Он автоматически отличает фон от человека перед камерой, размывая окружение, сохраняя при этом фокус на человеке.

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 с предложениями и вопросами.

Мы хотели бы услышать ваши мысли о том, соответствует ли вашим потребностям использование размытия фона в виде логического значения, или более подходящим будет более детальный подход, такой как «легкий», «сильный», «выключенный», даже если это не так. совместим с тем, что доступно во всех операционных системах.

Изображение героя от Айо Огунсейнде .