Забележка:
Тази статия е достъпна и тук. (Японски)
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 към демонстрацията заедно с миграцията от v.2.x към v.3.x. В тази статия представям как да го приложа.
Като този.
Опростена версия на Center Stage
Center Stage е функция на новата камера на ipad pro, която разпознава и автоматично следва лицето на потребителя. Zoom и FaceTime предлагат функционалност с централно ниво (Zoom, Facetime).
Нямам подробна информация за централната сцена, но предполагам, че тази централна сцена използва функциите на камерата на iPad, като мащабиране и фокусиране за получаване на видео данни. Примерният филм, заснет с Center Stage, е показан на тази страница в gizmodo (японски).
В тази статия ще се опитаме да създадем опростена версия на функционалност на централната сцена, използвайки обикновена уеб камера и модел за машинно обучение. По-конкретно, тази функция ще открие лица от видеото на уеб камерата и ще изреже областта около тях в приложението Amazon Chime SDK за Javascript. За разлика от оригиналната централна сцена, тази функционалност не използва функции на камерата като увеличение и фокус, така че скоростта и качеството на изображението не са толкова добри, колкото оригинала, но предимството е, че не изисква специален хардуер в браузъра.
BlazeFace
Разпознаването на лица използва модели за машинно обучение, а Mediapipe предлага лек и много точен модел, наречен BlazeFace. Този модел може да открие позицията на лице в реално време в изображение от камера, както е показано на фигурата по-долу. На фигурата по-долу откритото лице е маркирано с червена рамка, но опростената централна сцена ще изреже до област, малко по-голяма от червената рамка.
Този модел е много лек и е известно, че е по-бърз на CPU (WASM+SIMD), отколкото на WebGL.(ref)
„Някой сравнява времето за обработка на BlazeFace с други подобни модели“. Тези данни показват, че BlazeFace е доста бърз.
Интегрирайте с Amazon Chime SDK за Javascript
Amazon Chime SDK за Javascript предоставя API за редактиране на видео, заснето от уеб камера, преди да го прехвърлите на сървъра (API за обработка на видео). За повече информация относно API за обработка на видео, моля, вижте официалната документация или предишната ми статия.
Както бе споменато по-горе, BlazeFace изглежда работи по-бързо на процесора (WASM+SIMD), отколкото при използване на WebGL. Най-общо казано, по-добре е да не извършвате голямо количество обработка в главната нишка (CPU) за приложения, които се изпълняват в браузър. И така, бихме искали да стартираме 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 в падащото меню „бекенд селектор“. Времето за обработка на кадър се показва в горния ляв ъгъл и можете да видите, че Wasm обработва по-бързо.
Внедряване
За да внедрите тази функционалност във вашето приложение, ще трябва да внедрите VideoFrameProcessor на API на видео процесора. Горният npm модул предоставя методи за откриване на лица и изчисляване на позицията за изрязване, така че е много лесно да се приложи с помощта на тези методи.
VideoFrameProcessor изисква внедряването на метод на процес за обработка на видеото. Инициализирайте различните членове, които да се използват в този метод.
Мениджърът е горният npm модул (1). config и params конфигурират поведението на мениджъра (2). В този случай искаме да стартираме програмата в asm на webworker, така че задаваме 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/
Опровержение
В никакъв случай няма да носим отговорност за преки, косвени, последващи или специални щети, произтичащи от използването или невъзможността за използване на софтуера в този блог.
