Huomautus:
Tämä artikkeli on saatavilla myös täältä. (japaniksi)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Johdanto
On kulunut jonkin aikaa siitä, kun Amazon Chime SDK for Javascript -versio 3.x julkaistiin, mutta sain vihdoin tehdä OSS-demostani yhteensopivan v3.x:n kanssa. Menettely v2.x:stä v3.x:ään on kuvattu virallisessa dokumentaatiossa. Jos aiot siirtyä v2.x:stä v3.x:ään, katso "virallista dokumentaatiota".
Olen lisännyt demoon yksinkertaistetun version Center Stagesta ja siirtynyt versiosta 2.x v.3.x:ään. Tässä artikkelissa esittelen kuinka se toteutetaan.
Kuten tämä.
Keskuslavan yksinkertaistettu versio
Center Stage on viimeisimmän ipad pro -kameran ominaisuus, joka tunnistaa ja seuraa automaattisesti käyttäjän kasvoja. Zoom ja FaceTime tarjoavat toiminnot keskipisteellä ("Zoom", "Facetime").
Minulla ei ole tarkempia tietoja keskipisteestä, mutta oletan, että tämä keskipiste hyödyntää ipadin kameratoimintoja, kuten zoomausta ja tarkennusta videotietojen saamiseksi. Center Stage -sovelluksella kuvattu esimerkkielokuva näytetään tämä sivu Gizmodossa (japanilainen).
Tässä artikkelissa yritämme luoda yksinkertaistetun version keskitason toiminnallisuudesta tavallisella verkkokameralla ja koneoppimismallilla. Tämä toiminto havaitsee kasvot verkkokameravideosta ja rajaa niitä ympäröivän alueen Amazon Chime SDK for Javascript -sovelluksessa. Alkuperäisestä keskipisteestä poiketen tämä toiminto ei käytä kameran toimintoja, kuten zoomausta ja tarkennusta, joten sen nopeus ja kuvanlaatu eivät ole yhtä hyviä kuin alkuperäisessä, mutta etuna on, että se ei vaadi selaimeen mitään erikoislaitteita.
BlazeFace
Kasvojentunnistus käyttää koneoppimismalleja, ja Mediapipe tarjoaa kevyen ja erittäin tarkan mallin nimeltä BlazeFace. Tämä malli voi havaita kasvojen sijainnin reaaliajassa kamerakuvassa alla olevan kuvan mukaisesti. Alla olevassa kuvassa havaitut kasvot on merkitty punaisella kehyksellä, mutta yksinkertaistettu keskipiste rajautuu hieman punaista kehystä suuremmalle alueelle.
Tämä malli on erittäin kevyt ja sen tiedetään olevan nopeampi suorittimella (WASM+SIMD) kuin WebGL:llä.(ref)
"Joku vertaa BlazeFacen käsittelyaikaa muihin vastaaviin malleihin". Nämä tiedot osoittavat, että BlazeFace on melko nopea.
Integroi Amazon Chime SDK:n Javascriptille
Amazon Chime SDK for Javascript tarjoaa API:n web-kameran kaapatun videon muokkaamiseen ennen sen siirtämistä palvelimelle (Video Processing API). Lisätietoja Video Processing API:sta on "virallisessa dokumentaatiossa" tai "edellisessä artikkelissani".
Kuten edellä mainittiin, BlazeFace näyttää toimivan nopeammin suorittimella (WASM+SIMD) kuin WebGL:n avulla. Yleisesti ottaen on parempi olla tekemättä suurta käsittelyä pääsäikeessä (CPU) sellaisille sovelluksille, jotka toimivat selaimessa. Joten haluaisimme käyttää BlazeFacea Webworkerissä.
Alla oleva kuva näyttää karkean konfigurointikaavion ja prosessin kulun.
(1) Tallenna video verkkokameralla.
(2) Kutsu Video Processor API -prosessi Amazon Chime SDK for Javascript -demossa. Video Processor API:n (VideoFrameProcessor) sisäinen prosessi pyytää käsittelyä pääsäikeestä WebWorkerille, joka paikantaa käyttäjän kasvot BalzeFacen avulla ja vastaa pääsäikeeseen. Lanka.
(3) Pääsäie leikkaa kasvot.
(4) Leikattu video lähetetään Amazon Chimen palvelimelle.
WebWorker-moduuli BlazeFacelle
Jotta BlazeFace voidaan ajaa WebWorkerin kanssa, on tarpeen ottaa käyttöön hieman hankalia koodeja. Olen julkaissut npm-moduulin BlazeFacen suorittamiseksi WebWorkerissa, joten käytetään sitä tällä kertaa häiritsevien koodien kirjoittamisen väliin. Tämän moduulin "lähdekoodi" ja "demo" ovat myös saatavilla, joten jos olet kiinnostunut, tarkista "arkisto".
Tässä tarjottu demo voidaan saada toimimaan samalla tavalla kuin keskuslava. Valitse "seuranta" esittelysivun oikealla puolella olevasta "sovellustila" -pudotusvalikosta. Näet alla olevan kaltaisen videon. Vasen puoli on alkuperäinen kuva ja oikea puoli on kuva, jonka kasvot on leikattu yksinkertaistetulla keskikehyksellä. Se näyttää aika hyvältä.
Kokeile lisäksi vaihtaa WebGL:n ja Wasmin välillä "backend-selector" -pudotusvalikosta. Käsittelyaika kehystä kohti näkyy vasemmassa yläkulmassa, ja näet, että Wasm käsittelee nopeammin.
Toteutus
Jotta voit ottaa tämän toiminnon käyttöön sovelluksessasi, sinun on otettava käyttöön Video Processor API:n VideoFrameProcessor. Yllä oleva npm-moduuli tarjoaa menetelmiä kasvojen havaitsemiseen ja trimmausasennon laskemiseen, joten se on erittäin helppo toteuttaa näillä menetelmillä.
VideoFrameProcessor vaatii prosessimenetelmän toteuttamisen videon käsittelemiseksi. Alusta tässä menetelmässä käytettävät eri jäsenet.
Hallinnoija on yllä oleva npm-moduuli (1). config ja params määrittävät johtajan toiminnan (2). Tässä tapauksessa haluamme ajaa ohjelman asm-muodossa webworkerissä, joten asetamme backendTypeksi asm ja processOnLocaliksi 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)
}
Itse prosessimenetelmä on seuraava. Kasvojen sijainnin tunnistaminen npm-moduulin ennustamismenetelmällä (1). Laske rajattava suorakulmio tunnistetusta pinnasta (2). Rajattava suorakulmio kirjoitetaan kuvapuskuriin tulostusta varten (3) ja palautetaan kutsujalle.
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;
}
Lisätietoja VideoFrameProcessorin rekisteröinnistä Video Processor API:lla on virallisessa dokumentaatiossa. Toteutus on saatavilla myös alla kuvatussa demo-arkistossa, joten katso siitä tarkemmat tiedot.
Demo
Tässä esitellyn keskipisteen yksinkertaistetun version toteuttava demo on saatavilla seuraavassa arkistossa.
Kloonaa seuraavilla tunnisteilla, jos haluat kokeilla sitä, koska sitä on mahdollista muokata tulevaisuudessa. Tarkista arkistosta asennusohjeet.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Jos haluat käyttää keskikehystä, avaa laitteen asetukset rataskuvakkeella otsikossa ja ota Center Stage käyttöön kameran asetuksista. Se toimii sitten seuraavan videon osoittamalla tavalla. Video välitetään vasemmalla olevasta selaimesta oikealla olevaan selaimeen Amazon Chimen taustajärjestelmän kautta. Mielestäni se ei ole huono.
Yhteenveto
Tässä artikkelissa olen näyttänyt, kuinka yksinkertaistettu versio keskitason toiminnoista sisällytetään Amazon Chime SDK:n Javascript-sovellukseen. Vaikka se ei ole yhtä hyvä kuin alkuperäinen, toivomme, että se auttaa toteuttamaan uuden käyttökokemuksen selaimessa ilman erityistä laitetta. Voit esimerkiksi laatoittaa kaikkien osallistujien kasvot koot kohdistettuina lähentämällä.
Kiitokset
Tekstissä oleva video ja kuvat ovat peräisin näiltä sivustoilta.
https://pixabay.com/ja/videos/
Vastuuvapauslauseke
Emme ole missään tapauksessa vastuussa suorista, epäsuorista, välillisistä tai erityisistä vahingoista, jotka johtuvat tämän blogin ohjelmiston käytöstä tai kyvyttömyydestä käyttää.
