CrowlKit - Lichaamsinteractie

Libraries toevoegen

Zorg dat de volgende libraries aanwezig zijn in je pagina:

Opgelet: in dit geval is de correcte ML5-libary van heel groot belang. Vermits daar meerdere versies van bestaan, is het bijzonder belangrijk dat je onderstaande versie gebruikt!
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.min.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.processing.js?v3"></script>
<script src="https://cdn.publihub.media/lib/app.js?v3"></script>
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.body.js?v3"></script>

Lichaamsherkenning activeren

Je kan op 2 manieren lichaamsherkenning activeren in je pagina:

  1. Met een app-body-element
  2. Met CrowlKit-code

1. App-body

Voeg een app-body-element toe aan je pagina. Het heeft geen zin om dit element meermaals aan je pagina toe te voegen. 

<app-part id="body-container"></app-part>
<app-body show-video="false" fullscreen="true" skeleton="true" bodyimages="true" detect-multiple-bodies="true" transparent-background="true" target="body-container"></app-body>

Dit element kent meerdere attributen:

  • show-video: true of false. Als deze waarde op "true" staat, dan is het webcambeeld zichtbaar op de achtergrond.
  • fullscreen: true of false. Als deze waarde op "true" staat, dan wordt heel je beeldscherm gevuld.
  • skeleton: true of false. Als deze waarde op "true" staat, dan wordt er onder elk herkend lichaam een virtueel skelet getekend. 
  • bodyimages: true of false. Als deze waarde op "true" staat, dan worden er op hoofd, handen en lichaam PNG-afbeeldingen geladen. Zie verder in deze pagina. 
  • detect-multiple-bodies: true of false. Als deze waarde op "true" staat, dan worden alle lichamen in het camerabeeld herkend. Staat de waarde op "false", dan wordt enkel het eerste lichaam dat in beeld verschijnt, getoond. 
  • transparent-background: Als deze waarde op "true" staat, dan is de achtergrond transparant. Dat wil dan zeggen dat je achter het camerabeeld een foto of kleur kan plaatsen, of een of meer andere lagen. 
  • target: het id van het element waarin je het beeld wil tonen

2. Toevoegen met KitCode

Je kan lichaamsherkenning ook rechtstreeks in KitCode activeren. In dat geval moet je geen app-body-element toevoegen, maar voeg je de code toe in het <script>-element.

const options = {
   showVideo: false,         
   fullscreen: true,       
   skeleton: true,      
   bodyimages: true,
   detectMultipleBodies: true,  
   transparentBackground: true,  
   target: "body-container"
};

const mybody = new BodyPoses(options);
Je merkt dat in dat geval de benamingen van de attributen enigszins anders zijn geschreven: show-video heeft in dit geval showVideo enz. 

Data opvragen

Je kan op meerdere manieren data opvragen:

  • poses: alle gegevens van alle herkende lichaamsdelen
  • headsway: de beweging van elk aanwezig hoofd
  • leftarmwave: de beweging van elke linkerarm
  • lefthandmove: de beweging van elke linkerhand
  • rightarmwave; de beweging van elke rechterarm
  • righthandmove: de beweging van elke rechterhand
  • walking: welke lichamen aan het wandelen zijn
  • stoppedWalking: welke lichamen gestopt zijn met wandelen
  • leftlegmove: de beweging van elk linkerbeen
  • rightlegmove: de beweging van elk rechterbeen

Stel je voor dat we hoofdbewegingen willen registreren:

webapp.after("headsway").do(function(data){
    let aantalhoofden = data.detail.length;
    let hoofdbeweging = data.detail;
    let welkhoofd = hoofdbeweging.index;
    let xpositie_hoofd = hoofdbeweging.x;
    let ypositie_hoofd = hoofdbeweging.y;
    terminal("Hoofd " + welkhoofd + " bevindt zich op x = " + xpositie_hoofd + " en y = " + ypositie_hoofd);
});

Data opvragen uit "poses" 

Je kan voor elk gedetecteerd lichaam de positie van elk onderdeel opvragen. 

app.ready(function(){
  webapp.after("poses").do(
     function(data){
         let aantallichamen = data.detail.length;
         let eerstelichaam = data.detail[0];
     }
  );
});  

De variabele "aantallichamen" geeft het aantal herkende lichamen weer. Stop dit niet in een appalert want anders verschijnen er voortdurend appalert-meldingen, tot mogelijk 60 keer per seconde. 

Als er één lichaam aanwezig is, dan vraag je het eerste lichaam op met data.detail[0]. Voor het tweede lichaam vervang je de 0 door 1 enz.

1. Box

  • yMin: Minimum y-coördinaat van de box
  • xMin: Minimum x-coördinaat van de box
  • yMax: Maximum y-coördinaat van de box
  • xMax: Maximum x-coördinaat van de box
  • width: Breedte van de box
  • confidence: Vertrouwensscore voor de box

2. ID

  • id: Identificatie-ID van het gedetecteerde lichaam

3. Keypoints

Array van keypoints voor verschillende lichaamsdelen. Elke keypoint heeft de volgende eigenschappen:

  • x: x-coördinaat van het keypoint
  • y: y-coördinaat van het keypoint
  • name: Naam van het lichaamsdeel (bijv. "nose", "left_eye", "right_shoulder", etc.)
  • confidence: Vertrouwensscore van het keypoint

4. Individuele lichaamsdelen

  • nose: Neus
  • left_eye: Linkeroog
  • right_eye: Rechtoog
  • left_ear: Linkeroor
  • right_ear: Rechtoor
  • left_shoulder: Linkerschouder
  • right_shoulder: Rechterschouder
  • left_elbow: Linkerelleboog
  • right_elbow: Rechterelleboog
  • left_wrist: Linkerpols
  • right_wrist: Rechterpols
  • left_hip: Linkerheup
  • right_hip: Rechterheup
  • left_knee: Linkerknie
  • right_knee: Rechterknie
  • left_ankle: Linkerenkel
  • right_ankle: Rechterenkel

Als je de x-positie van de neus wil opvragen, dan doe je dat vervolgens op deze manier voor het "eerst herkende lichaam":

app.ready(function(){
  webapp.after("poses").do(
     function(data){
         let aantallichamen = data.detail.length;
         if(aantallichamen > 0){
              let eerstelichaam = data.detail[0];
              let nose = eerstelichaam.nose.x;
              terminal(nose);
         }
     }
  );
});

Body-images vervangen

uitleg volgt

Demo

Bekijk de demo:  https://cdn.publihub.media/demos/app/body5.html?
Volgende pagina