Эта статья также доступна здесь. (Японский)
https://cloud.flect.co.jp/entry/2020/05/20/101615
(НОВАЯ СТАТЬЯ 20 октября 2020 г.):
Замена лица и виртуальный фон в вашем браузере
Ранее я рассказывал о SDK Amazon Chime.
В этом посте я продолжу работу с Amazon Chime SDK и покажу вам, как создавать собственные виртуальные фоны.
Виртуальные фоны - это функция, которая заменяет фон другим изображением, в основном, когда вы не хотите, чтобы другой человек видел вашу комнату.
Среди программного обеспечения для видеоконференций Zoom и MS Teams поддерживают виртуальные фоны, но Amazon Chime, Agora.io и Twillio, похоже, их не предлагают.
На этот раз в духе «если у вас его нет, просто сделайте это», я попробую создать виртуальный фон самостоятельно, используя Amazon Chime SDK для системы видеоконференцсвязи.
Кроме того, Twillio должна иметь возможность делать это описанным ниже способом. Пока читаю документы. (непроверенный).
Созданный виртуальный фон работает так.
SDK Amazon Chime для Javascript и MediaStream
Amazon Chime SDK для Javascript предоставляет методы для указания видео (включая аудио), которое будет передано другой стороне, для каждого из следующих типов видео.
- Фильм снят камерой
- Общий рабочий стол
- Файл фильма
Вызываемые методы разные, но внутреннее устройство работает одинаково. То есть в середине процесса создается MediaStream, затем из этого MediaStream считываются видеоданные.
Если вам интересно, здесь подробнее о MediaStream.
В официальных руководствах и многих демонстрациях Amazon Chime SDK, когда вы делитесь фильмом с камеры, методы Amazon Chime SDK перечисляют идентификаторы устройств с камерой и выбирают идентификатор устройства с одной камерой в качестве источника ввода.
Однако, как указано в документации SDK, можно передать MediaStream таким же способом.
Https://aws.github.io/amazon-chime-sdk-js/interfaces/audiovideofacade.html#choosevideoinputdevice
Итак, на самом деле, Amazon Chime SDK позволяет вам делиться чем угодно (?), Если у вас есть MediaStream. Это замечательно гибко. Уже сам по себе этот факт дает мне много идей о том, как его использовать! Но в этой статье я объясню, как на основе этого добиться виртуального фона.
BodyPix
Кстати, чтобы добиться виртуального фона, нам нужно идентифицировать человека и фон.
(Я также слышал слух, что виртуальный фон Zoom реализуется разницей фона за один раз, но это невозможно сделать только с разницей фона. Может быть.)
У Google есть очень быстрая и мощная JS-библиотека для идентификации людей и фонов вроде этой, BodyPix.
В BodyPix, если вы вводите ImageData, HTML CanvasElement, HTMLImageElement и т. Д. В качестве входных данных, он создает для вас изображение маски. Используя это, кажется возможным различать человека и фон пиксель за пикселем.
Реализует виртуальный фон
Итак, мы можем придумать способ добиться этого с помощью описанного выше.
- Сначала мы рисуем изображение с камеры в HTML CanvasElement.
- Затем этот HTMLCanvasElement вводится в BodyPix для создания изображения маски, которое идентифицирует человека и фон.
- Фон изображения, полученного с камеры, заменяется данными другого изображения и отображается в HTML CanvasElement.
- Мы получим MediaStream из этого элемента HTMLCanvasElement и установим для него значение chooseVideoInputDevice в Amazon Chime SDK.
Объединить видеоизображение и фон
Это конец моего объяснения всего изображения, но как на самом деле объединить фон и изображение, снятое с камеры?
Это будет постепенно заменять пиксель данных на пиксель. (Если есть более разумный способ сделать это, дайте мне знать.) Вы можете получить ImageData из HTMLCanvasElement, который содержит необработанную попиксельную информацию. Таким образом, формируя изображение, полученное с камеры, изображение маски, созданное с помощью BodyPix, и изображение для фона до одного и того же размера, вы можете сканировать одни и те же пиксели в порядке от левого верхнего угла каждого пикселя.
Это выглядит так.
Если пиксель замаскированного изображения (maskedImage) равен #ffffffff, фоновое изображение (bgImageData) заменяет изображение камеры (pixelData).
for (let rowIndex = 0; rowIndex < maskedImage.height; rowIndex++) {
for (let colIndex = 0; colIndex < maskedImage.width; colIndex++) {
const pix_offset = ((rowIndex * maskedImage.width) + colIndex) * 4
if (maskedImage.data[pix_offset] === 255 &&
maskedImage.data[pix_offset + 1] === 255 &&
maskedImage.data[pix_offset + 2] === 255 &&
maskedImage.data[pix_offset + 3] === 255
) {
pixelData[pix_offset] = bgImageData.data[pix_offset]
pixelData[pix_offset + 1] = bgImageData.data[pix_offset + 1]
pixelData[pix_offset + 2] = bgImageData.data[pix_offset + 2]
pixelData[pix_offset + 3] = bgImageData.data[pix_offset + 3]
} else {
pixelData[pix_offset] = maskedImage.data[pix_offset]
pixelData[pix_offset + 1] = maskedImage.data[pix_offset + 1]
pixelData[pix_offset + 2] = maskedImage.data[pix_offset + 2]
pixelData[pix_offset + 3] = maskedImage.data[pix_offset + 3]
}
}
}
Демо
Итак, я разместил на Heroku сайт, который включает эту логику. Попробуйте посмотреть, как это работает.
Время отклика немного ниже, чем у виртуальных фонов, таких как Zoom, но я думаю, что оно достаточно практично для работы в веб-браузере.
Кстати, BodyPix сам может выбирать компромисс между точностью и скоростью . Попробуйте найти правильные параметры для вашего случая использования.
Стенд для встреч Amazon Chime
Мы также создаем систему конференц-зала в качестве испытательного стенда для новых функций, использующих видеоконференцсвязь.
Она опубликована в следующих репозиториях.
Здесь, помимо видеоконференцсвязи с виртуальным фоном, вы также можете отправлять текстовые сообщения чат и отправка штампов.
Мы также используем AWS Lamda и DynamoDB для создания бессерверной среды. Если вам интересно, откройте его.
Ну наконец то
В этой статье я показал вам, как использовать Amazon Chime SDK для создания виртуального фона в системе видеоконференцсвязи.
В разгар катастрофы с короной все больше людей участвуют в видеоконференцсвязи из своих домов. Я думаю, что это вполне естественная просьба не позволять партнеру по видеоконференции видеть фон вашего дома. Я не знаю, почему в Amazon Chime не предлагаются виртуальные фоны, но я думаю, что они должны появиться в ближайшем будущем.
В этом случае нет необходимости реализовывать функцию виртуального фона самостоятельно, как я представил в этой статье. Однако, как мы показали, Amazon Chime SDK обладает высокой масштабируемостью, поскольку абстрагируется от того, что то, что совместно используется пользователями, является MediaStream. Вам решать, каким видео делиться, поэтому может быть интересно подумать об этом по-разному.
Кстати, я думаю, что можно использовать Zoom и MS Temas для анимации изображений камеры, которые я представил ранее, без использования виртуального видеоустройства (у меня может не хватить памяти).
