Примечание.
Эта статья также доступна здесь. (на японском языке)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Введение
Прошло много времени с тех пор, как Amazon Chime SDK для Javascript версии 3.x был выпущен, но мне наконец удалось сделать мою демонстрацию OSS совместимой с v3.x. Процедура перехода с v2.x на v3.x описана в официальной документации. Если вы думаете о переходе с v2.x на v3.x, обратитесь к официальной документации.
Я добавил упрощенную версию Center Stage в демо вместе с переходом с версии 2.x на версию 3.x. В этой статье я расскажу, как это реализовать.
Так.
Упрощенная версия Center Stage
Center Stage — это функция новейшей камеры ipad pro, которая распознает лицо пользователя и автоматически следует за ним. Zoom и FaceTime предлагают функциональность с центральной сценой (Zoom, Facetime).
У меня нет подробной информации о центральной сцене, но я предполагаю, что эта центральная сцена использует функции камеры iPad, такие как масштабирование и фокусировка, для получения видеоданных. Образец фильма, снятого с помощью Center Stage, показан на этой странице gizmodo (японский).
В этой статье мы попробуем создать упрощенную версию функционала центральной сцены, используя обычную веб-камеру и модель машинного обучения. В частности, эта функция будет обнаруживать лица на видео с веб-камеры и обрезать область вокруг них в приложении Amazon Chime SDK для Javascript. В отличие от оригинальной центральной сцены, эта функция не использует функции камеры, такие как масштабирование и фокусировка, поэтому ее скорость и качество изображения не так хороши, как у оригинала, но преимущество в том, что она не требует специального оборудования в браузере.
BlazeFace
Обнаружение лиц использует модели машинного обучения, а Mediapipe предлагает облегченную и очень точную модель под названием BlazeFace. Эта модель может определять положение лица в режиме реального времени на изображении с камеры, как показано на рисунке ниже. На рисунке ниже обнаруженное лицо отмечено красной рамкой, но упрощенная центральная сцена обрезает область, немного превышающую красную рамку.
Эта модель очень легкая и, как известно, работает быстрее на ЦП (WASM+SIMD), чем на WebGL. (ref)
Кто-то сравнивает время обработки BlazeFace с другими подобными моделями. Эти данные показывают, что BlazeFace довольно быстр.
Интеграция с Amazon Chime SDK для Javascript
Amazon Chime SDK для Javascript предоставляет API для редактирования видео, снятого веб-камерой, перед его передачей на сервер (API обработки видео). Для получения дополнительной информации об API обработки видео см. официальную документацию или мою предыдущую статью.
Как упоминалось выше, BlazeFace работает быстрее на процессоре (WASM+SIMD), чем при использовании WebGL. Вообще говоря, лучше не выполнять большой объем обработки в основном потоке (ЦП) для приложений, работающих в браузере. Итак, мы хотели бы запустить BlazeFace на Webworker.
На рисунке ниже показана грубая схема конфигурации и схема процесса.
(1) Захватите видео с помощью веб-камеры.
(2) Вызовите процесс API видеопроцессора в демонстрационной версии Amazon Chime SDK для Javascript. Внутренний процесс API видеопроцессора (VideoFrameProcessor) запрашивает обработку из основного потока в WebWorker, который находит лицо пользователя с помощью BalzeFace и отвечает основному потоку. Поток.
(3) Основной поток обрезает лицо.
(4) Обрезанное видео отправляется на сервер Amazon Chime.
Модуль WebWorker для BlazeFace
Чтобы запустить BlazeFace с WebWorker, необходимо реализовать несколько хлопотный код. Я опубликовал модуль npm для запуска BlazeFace в WebWorker, поэтому давайте на этот раз воспользуемся им, чтобы не писать проблемный код. Также доступны исходный код и демо этого модуля, поэтому, если вы заинтересованы, пожалуйста, проверьте репозиторий.
Представленную здесь демонстрацию можно заставить вести себя так же, как центральную сцену. Выберите «отслеживание» в раскрывающемся меню «режим приложения» в правой части демонстрационной страницы. Вы увидите видео, подобное приведенному ниже. Левая сторона — это исходное изображение, а правая сторона — это изображение с лицом, вырезанным с упрощенной центральной рамкой. Это выглядит довольно хорошо.
Кроме того, попробуйте переключиться между WebGL и Wasm в раскрывающемся меню «backend-selector». Время обработки каждого кадра отображается в верхнем левом углу, и вы можете видеть, что Wasm обрабатывает быстрее.
Выполнение
Чтобы реализовать эту функциональность в своем приложении, вам потребуется реализовать VideoFrameProcessor API видеопроцессора. Приведенный выше модуль npm предоставляет методы для обнаружения лиц и вычисления положения обрезки, поэтому его очень легко реализовать с помощью этих методов.
VideoFrameProcessor требует реализации метода процесса для обработки видео. Инициализируйте различные члены, которые будут использоваться в этом методе.
Менеджером является указанный выше модуль npm (1). config и params настраивают поведение менеджера (2). В этом случае мы хотим запустить программу на ассемблере на веб-воркере, поэтому мы устанавливаем для backendType значение asm, а для processOnLocal — значение false (3).
private targetCanvas: HTMLCanvasElement = document.createElement('canvas');
private targetCanvasCtx: CanvasRenderingContext2D = this.targetCanvas.getContext('2d')!;
private canvasVideoFrameBuffer = new CanvasVideoFrameBuffer(this.targetCanvas);
private manager = new BlazefaceWorkerManager() // <--- (1)
private config = generateBlazefaceDefaultConfig(); // <---(2)
private params = generateDefaultBlazefaceParams(); // <---(2)
constructor() {
this.config.backendType = BackendTypes.wasm // <---(3)
this.config.processOnLocal = false // <---(3)
this.manager.init(this.config)
}
Сам процесс заключается в следующем. Чтобы определить положение лица, используйте метод предсказания модуля npm (1). Вычислите прямоугольник, который нужно обрезать, исходя из идентифицированного положения лица (2). Обрезаемый прямоугольник записывается в буфер изображения для вывода (3) и возвращается вызывающей программе.
process = async (buffers: VideoFrameBuffer[]): Promise<VideoFrameBuffer[]> => {
if (!buffers[0]) {
return buffers;
}
const canvas = buffers[0].asCanvasElement!()
if (!canvas) {
return buffers;
}
const prediction = await this.manager.predict(this.params, canvas as HTMLCanvasElement) // <--- (1)
const trackingArea = this.manager.fitCroppedArea(prediction, canvas.width, canvas.height, this.params.processWidth, this.params.processHeight, canvas.width, canvas.height, 1, 0.4, 0, 0); // <--- (2)
this.targetCanvasCtx.clearRect(0, 0, this.targetCanvas.width, this.targetCanvas.height)
this.targetCanvasCtx.drawImage(canvas, trackingArea.xmin, trackingArea.ymin, trackingArea.width, trackingArea.height, 0, 0, this.targetCanvas.width, this.targetCanvas.height); // <--- (3)
buffers[0] = this.canvasVideoFrameBuffer;
return buffers;
}
Подробную информацию о том, как зарегистрировать VideoFrameProcessor в API видеопроцессора, см. в официальной документации. Реализация также доступна в демонстрационном репозитории, описанном ниже, поэтому, пожалуйста, обратитесь к нему за более подробной информацией.
Демо
Демонстрация, реализующая представленную здесь упрощенную версию центральной сцены, доступна в следующем репозитории.
Пожалуйста, клонируйте со следующими тегами, если хотите попробовать, так как в будущем возможны изменения. Пожалуйста, проверьте репозиторий для получения инструкций по установке.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Чтобы использовать центральную рамку, откройте настройки устройства с помощью значка шестеренки в шапке и включите Center Stage в настройках камеры. Затем он будет работать, как показано в следующем видео. Видео передается из браузера слева в браузер справа через серверную часть Amazon Chime. Я думаю, это неплохо.
Краткое содержание
В этой статье я показал, как включить упрощенную версию центральной функциональности в приложение Amazon Chime SDK для Javascript. Хотя он не так хорош, как оригинал, мы надеемся, что он поможет реализовать новый UX в браузере без использования специального устройства. Например, можно было бы разместить лица всех участников так, чтобы их размеры были выровнены путем увеличения масштаба.
Благодарности
Видео и изображения в тексте взяты с этих сайтов.
https://pixabay.com/ja/videos/
Отказ от ответственности
Ни при каких обстоятельствах мы не несем ответственности за любые прямые, косвенные, косвенные или особые убытки, возникающие в результате использования или невозможности использования программного обеспечения в этом блоге.
