Shënim:
Ky artikull është gjithashtu i disponueshëm këtu. (Japonisht)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Prezantimi
Ka kaluar një kohë që nga lëshimi i Amazon Chime SDK për versionin Javascript 3.x, por më në fund arrita ta bëj demon time OSS të pajtueshme me v3.x. Procedura nga v2.x në v3.x përshkruhet në dokumentacionin zyrtar. Nëse po mendoni të migroni nga v2.x në v3.x, ju lutemi referojuni dokumentacionit zyrtar.
Unë kam shtuar një version të thjeshtuar të "Center Stage" në demonstrim së bashku me migrimin nga v.2.x në v.3.x. Në këtë artikull, unë prezantoj se si ta zbatojmë atë.
Si kjo.
Versioni i thjeshtuar i skenës qendrore
Qendra Stage është një veçori e kamerës së fundit ipad pro që njeh dhe ndjek automatikisht fytyrën e përdoruesit. Zoom dhe FaceTime ofrojnë funksionalitetin me skenën qendrore (Zoom, Facetime).
Nuk kam informacion të detajuar në lidhje me skenën qendrore, por supozoj se kjo skenë qendrore përdor funksionet e kamerës së iPad, të tilla si zmadhimi dhe fokusimi për të marrë të dhënat e videos. Modeli i filmit të kapur me Center Stage shfaqet kjo faqe në gizmodo (japoneze).
Në këtë artikull, ne do të përpiqemi të krijojmë një version të thjeshtuar të funksionalitetit të skenës qendrore duke përdorur një kamerë të zakonshme në internet dhe një model të mësimit të makinës. Në mënyrë të veçantë, ky funksion do të zbulojë fytyrat nga videoja e kamerës së internetit dhe do të presë zonën përreth tyre në aplikacionin Amazon Chime SDK për Javascript. Ndryshe nga skena qendrore origjinale, ky funksionalitet nuk përdor funksione të kamerës si zmadhimi dhe fokusi, kështu që shpejtësia dhe cilësia e imazhit nuk janë aq të mira sa origjinali, por avantazhi është se nuk kërkon ndonjë pajisje të veçantë në shfletues.
BlazeFace
Zbulimi i fytyrës përdor modele të mësimit të makinerive dhe Mediapipe ofron një model të lehtë dhe shumë të saktë të quajtur BlazeFace. Ky model mund të zbulojë pozicionin e një fytyre në kohë reale në një imazh të kamerës, siç tregohet në figurën më poshtë. Në figurën më poshtë, fytyra e zbuluar është shënuar me një kornizë të kuqe, por një skenë qendrore e thjeshtuar do të pritet në një zonë pak më të madhe se korniza e kuqe.
Ky model është shumë i lehtë dhe dihet se është më i shpejtë në CPU (WASM+SIMD) sesa në WebGL. (ref)
"Dikush po krahason kohën e përpunimit të BlazeFace me modele të tjera të ngjashme". Këto të dhëna tregojnë se BlazeFace është mjaft i shpejtë.
Integro me Amazon Chime SDK për Javascript
Amazon Chime SDK për Javascript ofron një API për redaktimin e videos së kapur nga një webcam përpara se ta transferojë atë në server (API për përpunimin e videos). Për më shumë informacion në lidhje me API-në e përpunimit të videove, ju lutemi referojuni "dokumentacionit zyrtar" ose "artikullit tim të mëparshëm".
Siç u përmend më lart, BlazeFace duket se funksionon më shpejt në CPU (WASM+SIMD) sesa duke përdorur WebGL. Në përgjithësi, është më mirë të mos bëni një sasi të madhe përpunimi në fillin kryesor (CPU) për aplikacionet që funksionojnë në një shfletues. Pra, ne do të dëshironim të ekzekutonim BlazeFace në një Webworker.
Figura më poshtë tregon një diagram të përafërt të konfigurimit dhe rrjedhës së procesit.
(1) Regjistroni video me një kamerë në internet.
(2) Thirrni procesin e API të procesorit të videove në Amazon Chime SDK për demonstrimin e Javascript. Procesi i brendshëm i API-së së procesorit të videove (VideoFrameProcessor) kërkon përpunim nga Tema kryesore në WebWorker, i cili lokalizon fytyrën e përdoruesit duke përdorur BalzeFace dhe i përgjigjet Temës kryesore. Tema.
(3) Tema kryesore shkurton fytyrën.
(4) Videoja e shkurtuar dërgohet te serveri i Amazon Chime.
Moduli WebWorker për BlazeFace
Për të ekzekutuar BlazeFace me WebWorker, është e nevojshme të zbatohen kode pak problematike. Unë kam publikuar modulin npm për të ekzekutuar BlazeFace në WebWorker, kështu që le ta përdorim këtë herë për të kapërcyer shkrimin e kodeve të mundimshme. "Kodi burimor" dhe "demo" i këtij moduli janë gjithashtu të disponueshme, kështu që nëse jeni të interesuar, ju lutemi kontrolloni "depo".
Demoja e ofruar këtu mund të bëhet që të sillet në të njëjtën mënyrë si skena qendrore. Zgjidhni "ndjekjen" nga menyja tërheqëse "modaliteti i aplikacionit" në anën e djathtë të faqes demo. Do të shihni një video si kjo më poshtë. Ana e majtë është imazhi origjinal dhe ana e djathtë është imazhi me fytyrën e prerë me kornizën qendrore të thjeshtuar. Duket mjaft mirë.
Për më tepër, provoni të kaloni midis WebGL dhe Wasm në menynë tërheqëse të "përzgjedhësve të pasme". Koha e përpunimit për kornizë shfaqet në këndin e sipërm majtas dhe mund të shihni se Wasm po përpunon më shpejt.
Zbatimi
Për të zbatuar këtë funksionalitet në aplikacionin tuaj, do t'ju duhet të implementoni VideoFrameProcessor të API-së së Video Processor. Moduli i mësipërm npm ofron metoda për zbulimin e fytyrave dhe llogaritjen e pozicionit të shkurtimit, kështu që është shumë e lehtë të zbatohet duke përdorur këto metoda.
VideoFrameProcessor kërkon zbatimin e një metode procesi për të përpunuar videon. Inicializoni anëtarët e ndryshëm që do të përdoren në këtë metodë.
Menaxheri është moduli i mësipërm npm (1). konfigurimi dhe parametrat konfigurojnë sjelljen e menaxherit (2). Në këtë rast, ne duam ta ekzekutojmë programin në asm në webworker, kështu që vendosim backendType në asm dhe processOnLocal në 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)
}
Vetë metoda e procesit është si më poshtë. Për të identifikuar pozicionin e fytyrës duke përdorur metodën e parashikimit të modulit npm (1). Llogaritni drejtkëndëshin që do të pritet nga pozicioni i fytyrës së identifikuar (2). Drejtkëndëshi që do të pritet shkruhet në buferin e imazhit për dalje (3) dhe i kthehet telefonuesit.
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;
}
Për detaje se si të regjistroni VideoFrameProcessor me API-në e Video Processor, ju lutemi referojuni dokumentacionit zyrtar. Zbatimi është gjithashtu i disponueshëm në depo demo të përshkruar më poshtë, prandaj ju lutemi referojuni asaj për detaje më konkrete.
Demo
Një demonstrim që zbaton versionin e thjeshtuar të skenës qendrore të prezantuar këtu është i disponueshëm në depon e mëposhtme.
Ju lutemi klononi me etiketat e mëposhtme nëse dëshironi ta provoni, pasi ekziston mundësia e modifikimit në të ardhmen. Ju lutemi kontrolloni depon për udhëzimet e konfigurimit.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Për të përdorur kornizën qendrore, hapni cilësimet e pajisjes me ikonën e ingranazhit në kokë dhe aktivizoni "Faza qendrore" në cilësimet e kamerës. Më pas do të funksionojë siç tregohet në videon e mëposhtme. Videoja transmetohet nga shfletuesi në të majtë në shfletuesin në të djathtë përmes backend-it të Amazon Chime. Unë mendoj se nuk është keq.
Përmbledhje
Në këtë artikull, unë kam treguar se si të inkorporoj një version të thjeshtuar të funksionalitetit të skenës qendrore në një Amazon Chime SDK për aplikacionin Javascript. Megjithëse nuk është aq i mirë sa origjinali, shpresojmë se do të ndihmojë në realizimin e një UX të ri në shfletues pa përdorur një pajisje të veçantë. Për shembull, do të ishte e mundur të vizatoheshin fytyrat e të gjithë pjesëmarrësve me madhësitë e tyre të rreshtuara duke zmadhuar.
Mirënjohje
Videoja dhe imazhet në tekst janë nga këto faqe.
https://pixabay.com/ja/videos/
Mohim përgjegjësie
Në asnjë rast nuk do të jemi përgjegjës për ndonjë dëmtim të drejtpërdrejtë, të tërthortë, pasues ose të veçantë që rrjedh nga përdorimi ose pamundësia për të përdorur softuerin në këtë blog.
