Notă:
Acest articol este disponibil și aici.(Japoneză)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Introducere
A trecut ceva timp de când Amazon Chime SDK pentru versiunea Javascript „3.x” a fost lansată, dar în sfârșit am reușit să fac „demo-ul meu OSS” compatibil cu v3.x. Procedura de la v2.x la v3.x este descrisă în „documentația oficială”. Dacă vă gândiți să migrați de la v2.x la v3.x, vă rugăm să consultați „documentația oficială”.
Am adăugat o versiune simplificată a Center Stage la demo, împreună cu migrarea de la v.2.x la v.3.x. În acest articol, vă prezint cum să o implementez.
Ca aceasta.
Versiune simplificată a scenei centrale
Center Stage este o caracteristică a camerei recente ipad pro care recunoaște și urmărește automat chipul utilizatorului. Zoom și FaceTime oferă funcționalitatea centrală (Zoom, Facetime).
Nu am informații detaliate despre scena centrală, dar presupun că această scenă centrală utilizează funcțiile camerei iPad, cum ar fi mărirea și focalizarea pentru a obține date video. Exemplul de film capturat cu Center Stage este afișat „această pagină pe gizmodo (japonez)”.
În acest articol, vom încerca să creăm o versiune simplificată a unei funcționalități centrale folosind o cameră web obișnuită și un model de învățare automată. Mai exact, această funcție va detecta fețele din videoclipul camerei web și va decupa zona din jurul lor în aplicația Amazon Chime SDK pentru Javascript. Spre deosebire de scena centrală originală, această funcționalitate nu folosește funcții ale camerei precum zoom și focalizare, astfel încât viteza și calitatea imaginii nu sunt la fel de bune ca cele originale, dar avantajul este că nu necesită niciun hardware special în browser.
BlazeFace
Detectarea feței folosește modele de învățare automată, iar Mediapipe oferă un model ușor și foarte precis numit BlazeFace. Acest model poate detecta poziția unei fețe în timp real într-o imagine a camerei, așa cum se arată în figura de mai jos. În figura de mai jos, fața detectată este marcată cu un cadru roșu, dar o scenă centrală simplificată va decupa o zonă puțin mai mare decât cadrul roșu.
Acest model este foarte ușor și se știe că este mai rapid pe CPU (WASM+SIMD) decât pe WebGL.(ref)
„Cineva compară timpul de procesare al BlazeFace cu alte modele similare”. Aceste date arată că BlazeFace este destul de rapid.
Integrați cu Amazon Chime SDK pentru Javascript
Amazon Chime SDK pentru Javascript oferă un API pentru editarea videoclipurilor capturate de o cameră web înainte de a-l transfera pe server (Video Processing API). Pentru mai multe informații despre Video Processing API, vă rugăm să consultați „documentația oficială” sau „articolul meu anterior”.
După cum am menționat mai sus, BlazeFace pare să ruleze mai repede pe procesor (WASM+SIMD) decât folosind WebGL. În general, este mai bine să nu faceți o cantitate mare de procesare în firul principal (CPU) pentru aplicațiile care rulează într-un browser. Deci, am dori să rulăm BlazeFace pe un Webworker.
Figura de mai jos prezintă o diagramă de configurare aproximativă și fluxul de proces.
(1) Înregistrați videoclipuri cu o cameră web.
(2) Apelați procesul API Video Processor în demonstrația Amazon Chime SDK pentru Javascript. Procesul intern al API-ului Video Processor (VideoFrameProcessor) solicită procesarea de la Thread-ul principal la WebWorker, care localizează fața utilizatorului folosind BalzeFace și răspunde la Thread-ul principal. Thread.
(3) Main Thread decupează fața.
(4) Videoclipul tăiat este trimis la serverul Amazon Chime.
Modul WebWorker pentru BlazeFace
Pentru a rula BlazeFace cu WebWorker, este necesar să implementați coduri puțin supărătoare. Am publicat modulul npm pentru a rula BlazeFace pe WebWorker, așa că haideți să-l folosim de această dată pentru a omite scrierea codurilor supărătoare. „Codul sursă” și o „demo” a acestui modul sunt de asemenea disponibile, așa că dacă sunteți interesat, vă rugăm să verificați „depozitul”.
Demo-ul oferit aici poate fi făcut să se comporte în același mod ca scena centrală. Selectați „urmărire” din meniul derulant „mod aplicație” din partea dreaptă a paginii demo. Veți vedea un videoclip ca cel de mai jos. Partea stângă este imaginea originală, iar partea dreaptă este imaginea cu fața decupată cu cadrul central simplificat. Arată destul de bine.
În plus, încercați să comutați între WebGL și Wasm în meniul derulant „backend-selector”. Timpul de procesare per cadru este afișat în colțul din stânga sus și puteți vedea că Wasm procesează mai repede.
Implementarea
Pentru a implementa această funcționalitate în aplicația dvs., va trebui să implementați VideoFrameProcessor al API-ului Video Processor. Modulul npm de mai sus oferă metode pentru detectarea fețelor și calcularea poziției de tăiere, astfel încât este foarte ușor de implementat folosind aceste metode.
VideoFrameProcessor necesită implementarea unei metode de proces pentru a procesa videoclipul. Inițializați diferiții membri care vor fi utilizați în această metodă.
Managerul este modulul npm de mai sus (1). config și params configurează comportamentul managerului (2). În acest caz, dorim să rulăm programul în asm pe webworker, așa că setăm backendType la asm și processOnLocal la 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)
}
Metoda procesului în sine este următoarea. Pentru a identifica poziția feței folosind metoda predict a modulului npm (1). Calculați dreptunghiul care trebuie tăiat din poziția feței identificate (2). Dreptunghiul care trebuie decupat este scris în memoria tampon de imagine pentru ieșire (3) și returnat apelantului.
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;
}
Pentru detalii despre cum să înregistrați VideoFrameProcessor cu API-ul Video Processor, vă rugăm să consultați documentația oficială. Implementarea este disponibilă și în depozitul demo descris mai jos, așa că vă rugăm să consultați aceasta pentru mai multe detalii concrete.
Demo
O demonstrație care implementează versiunea simplificată a scenei centrale introdusă aici este disponibilă în următorul depozit.
Vă rugăm să clonați cu următoarele etichete dacă doriți să îl încercați, deoarece există posibilitatea de modificare în viitor. Vă rugăm să verificați depozitul pentru instrucțiuni de configurare.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Pentru a utiliza cadrul central, deschideți setările dispozitivului cu pictograma roată din antet și activați Center Stage în setările camerei. Apoi va funcționa așa cum se arată în videoclipul următor. Videoclipul este transmis din browserul din stânga către browserul din dreapta prin backend-ul Amazon Chime. Cred că nu este rău.
rezumat
În acest articol, am arătat cum să încorporez o versiune simplificată a funcționalității centrale într-o aplicație Amazon Chime SDK pentru Javascript. Deși nu este la fel de bun ca originalul, sperăm că va ajuta la realizarea unui nou UX pe browser fără a utiliza un dispozitiv special. De exemplu, ar fi posibil să plasați fețele tuturor participanților cu dimensiunile lor aliniate prin mărire.
Mulțumiri
Videoclipul și imaginile din text sunt de pe aceste site-uri.
„https://pixabay.com/ja/videos/”
Disclaimer
În niciun caz nu vom fi răspunzători pentru orice daune directe, indirecte, în consecință sau speciale care decurg din utilizarea sau incapacitatea de a utiliza software-ul de pe acest blog.
