Piezīme:
Šis raksts ir pieejams arī šeit. (japāņu valodā)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Ievads
Ir pagājis kāds laiciņš, kopš tika izlaists Amazon Chime SDK Javascript versijai 3.x, taču beidzot varēju padarīt savu OSS demo saderīgu ar v3.x. Procedūra no v2.x uz v3.x ir aprakstīta "oficiālajā dokumentācijā". Ja domājat par migrēšanu no v2.x uz v3.x, lūdzu, skatiet "oficiālo dokumentāciju".
Demonstrācijai esmu pievienojis vienkāršotu Center Stage versiju, kā arī migrēšanu no v.2.x uz v.3.x. Šajā rakstā es iepazīstināšu ar to, kā to īstenot.
Kā šis.
Centra skatuves vienkāršotā versija
Center Stage ir jaunākās ipad pro kameras funkcija, kas atpazīst un automātiski seko lietotāja sejai. Tālummaiņa un FaceTime piedāvā funkcionalitāti ar centrālo skatuvi ("Zoom", "Facetime").
Man nav detalizētas informācijas par centrālo skatuvi, taču es pieņemu, ka šajā centrālajā zonā tiek izmantotas ipad kameras funkcijas, piemēram, tālummaiņa un fokusēšana, lai iegūtu video datus. Ar Center Stage uzņemtā filmas paraugs tiek rādīts šī lapa vietnē Gizmodo (japāņu valodā).
Šajā rakstā mēs mēģināsim izveidot centrālās stadijas funkcionalitātes vienkāršotu versiju, izmantojot parastu tīmekļa kameru un mašīnmācīšanās modeli. Konkrēti, šī funkcija atklās sejas no tīmekļa kameras video un apgriezīs ap tām esošo apgabalu lietojumprogrammā Amazon Chime SDK Javascript. Atšķirībā no sākotnējās centrālās skatuves šī funkcionalitāte neizmanto tādas kameras funkcijas kā tālummaiņa un fokuss, tāpēc tās ātrums un attēla kvalitāte nav tik laba kā oriģinālam, taču priekšrocība ir tāda, ka tai nav nepieciešama īpaša pārlūkprogrammas aparatūra.
BlazeFace
Sejas noteikšana izmanto mašīnmācīšanās modeļus, un Mediapipe piedāvā vieglu un ļoti precīzu modeli BlazeFace. Šis modelis kameras attēlā var noteikt sejas stāvokli reāllaikā, kā parādīts attēlā zemāk. Tālāk esošajā attēlā noteiktā seja ir atzīmēta ar sarkanu rāmi, bet vienkāršotā centrālais posms tiks apgriezts līdz apgabalam, kas ir nedaudz lielāks par sarkano rāmi.
Šis modelis ir ļoti viegls, un ir zināms, ka tas darbojas ātrāk ar CPU (WASM+SIMD) nekā WebGL. (atsauce)
"Kāds salīdzina BlazeFace apstrādes laiku ar citiem līdzīgiem modeļiem." Šie dati liecina, ka BlazeFace ir diezgan ātrs.
Integrējiet ar Amazon Chime SDK Javascript
Amazon Chime SDK for Javascript nodrošina API, lai rediģētu tīmekļa kamerā uzņemto video pirms tā pārsūtīšanas uz serveri (Video Processing API). Lai iegūtu papildinformāciju par video apstrādes API, lūdzu, skatiet "oficiālo dokumentāciju" vai "manu iepriekšējo rakstu".
Kā minēts iepriekš, šķiet, ka BlazeFace darbojas ātrāk CPU (WASM+SIMD), nekā izmantojot WebGL. Vispārīgi runājot, labāk neveikt lielu apstrādi galvenajā pavedienā (CPU) lietojumprogrammām, kas darbojas pārlūkprogrammā. Tātad, mēs vēlētos palaist BlazeFace tīmekļa darbiniekā.
Zemāk esošajā attēlā ir parādīta aptuvena konfigurācijas diagramma un procesa plūsma.
(1) Uzņemiet video, izmantojot tīmekļa kameru.
(2) Izsauciet video procesora API procesu Amazon Chime SDK Javascript demonstrācijai. Video procesora API (VideoFrameProcessor) iekšējais process pieprasa apstrādi no galvenā pavediena uz WebWorker, kas, izmantojot BalzeFace, atrod lietotāja seju un reaģē uz galveno pavedienu. Pavediens.
(3) Galvenais pavediens apgriež seju.
(4) Apgrieztais video tiek nosūtīts uz Amazon Chime serveri.
WebWorker modulis priekš BlazeFace
Lai palaistu BlazeFace ar WebWorker, ir jāievieš mazliet apgrūtinoši kodi. Esmu publicējis npm moduli, lai palaistu BlazeFace vietnē WebWorker, tāpēc šoreiz izmantosim to, lai izlaistu rakstīt traucējošus kodus. Ir pieejams arī šī moduļa avota kods un demonstrācija, tādēļ, ja jūs interesē, lūdzu, pārbaudiet repozitoriju.
Šeit sniegto demonstrāciju var likt darboties tāpat kā centrālajai skatuvei. Demonstrācijas lapas labajā pusē esošajā nolaižamajā izvēlnē “Lietojumprogrammas režīms” atlasiet “izsekošana”. Jūs redzēsit videoklipu, piemēram, zemāk redzamo. Kreisajā pusē ir sākotnējais attēls, bet labajā pusē ir attēls ar izgrieztu seju, izmantojot vienkāršoto centra rāmi. Tas izskatās diezgan labi.
Turklāt nolaižamajā izvēlnē “backend-selector” mēģiniet pārslēgties starp WebGL un Wasm. Apstrādes laiks vienam kadram tiek parādīts augšējā kreisajā stūrī, un jūs varat redzēt, ka Wasm apstrādā ātrāk.
Īstenošana
Lai ieviestu šo funkcionalitāti savā lietojumprogrammā, jums būs jāievieš video procesora API VideoFrameProcessor. Iepriekš minētais npm modulis nodrošina metodes seju noteikšanai un apgriešanas pozīcijas aprēķināšanai, tāpēc to ir ļoti viegli ieviest, izmantojot šīs metodes.
VideoFrameProcessor video apstrādei ir jāievieš procesa metode. Inicializējiet dažādus šajā metodē izmantojamos elementus.
Pārzinis ir iepriekš minētais npm modulis (1). config un parametri konfigurē pārvaldnieka darbību (2). Šajā gadījumā mēs vēlamies palaist programmu asm tīmekļa darbinī, tāpēc iestatījām backendType uz asm un processOnLocal uz 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)
}
Pati procesa metode ir šāda. Lai noteiktu sejas stāvokli, izmantojot npm moduļa prognozēšanas metodi (1). Aprēķiniet apgriežamo taisnstūri no identificētās sejas pozīcijas (2). Apgriežamais taisnstūris tiek ierakstīts attēla buferī izvadei (3) un atgriezts zvanītājam.
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;
}
Lai iegūtu sīkāku informāciju par to, kā reģistrēt VideoFrameProcessor ar video procesora API, lūdzu, skatiet oficiālo dokumentāciju. Ieviešana ir pieejama arī tālāk aprakstītajā demonstrācijas repozitorijā, tāpēc, lūdzu, skatiet to, lai iegūtu sīkāku informāciju.
Demonstrācija
Demonstrācija, kurā tiek ieviesta šeit ieviestā centra posma vienkāršotā versija, ir pieejama nākamajā repozitorijā.
Ja vēlaties to izmēģināt, lūdzu, klonējiet ar tālāk norādītajiem tagiem, jo nākotnē pastāv iespēja veikt izmaiņas. Lūdzu, pārbaudiet repozitorijā iestatīšanas norādījumus.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Lai izmantotu centrālo rāmi, atveriet ierīces iestatījumus ar zobrata ikonu galvenē un kameras iestatījumos iespējojiet Center Stage. Pēc tam tas darbosies, kā parādīts nākamajā videoklipā. Videoklips tiek pārsūtīts no pārlūkprogrammas kreisajā pusē uz pārlūkprogrammu labajā pusē, izmantojot Amazon Chime aizmugursistēmu. Es domāju, ka tas nav slikti.
Kopsavilkums
Šajā rakstā esmu parādījis, kā Amazon Chime SDK Javascript lietojumprogrammai iekļaut centrālās funkcionalitātes vienkāršotu versiju. Lai gan tas nav tik labs kā oriģināls, mēs ceram, ka tas palīdzēs realizēt jaunu UX pārlūkprogrammā, neizmantojot īpašu ierīci. Piemēram, tuvinot būtu iespējams izkārtot visu dalībnieku sejas un to izmērus.
Pateicības
Video un attēli tekstā ir no šīm vietnēm.
https://pixabay.com/ja/videos/
"https://www.irasutoya.com/"
Atruna
Mēs nekādā gadījumā neesam atbildīgi par tiešiem, netiešiem, izrietošiem vai īpašiem zaudējumiem, kas radušies, izmantojot vai nespējot izmantot šajā emuārā esošo programmatūru.
