CrowlKit - Virtuele spiegel en camera

Je kan eenvoudig een deel van je app of je ganse pagina omtoveren in een camera of een "virtuele spiegel". 

Libraries toevoegen

Zorg dat de volgende libraries zijn toegevoegd aan de head van je document. 

Opgelet: zorg er voor dat elke libary slechts één keer voorkomt.  
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.processing.js"></script>
<script src="https://cdn.publihub.media/lib/app.js"></script>
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">
<script src="https://cdn.publihub.media/lib/crowl.snapshotcamera.js?v13"></script>

Een camera/spiegel toevoegen

Je kan nu een camera-element aan je pagina toevoegen. Je moet ook een element aanmaken waarin het beeld zal worden weergegeven:

<app-part id="snapshot"></app-part>
<app-snapshot target="snapshot" id="camera" label="MAAK FOTO" nobutton downloadimage mirror="true" width="100%" height="100%"></app-snapshot>

Met het app-part-element maken we een container om het beeld in weer te geven. Het app-snapshot-element activeert het camera- of spiegel -element.

Het app-snapshot-element kan meerdere attributen ontvangen:

  • target: verwijzing naar het id van het  element waarin de camera/spiegel wordt getoond. 
  • id: een uniek id voor het camera-element.
  • label: Het opschrift van de knop om foto's vast te leggen
  • nobutton: wil je enkel een spiegel maken, dan kan je best het nobutton-attribuut toevoegen
  • downloadimage: dit attribuut zorgt ervoor dat elke foto automatisch wordt gedownload
  • mirror: Zet je deze waarde op "true", dan gedraagt het camerabeeld zich als een virtuele spiegel. Een tekst zal dus echt in spiegelbeeld worden getoond. 
  • width: de breedte in pixels. Je kan een waarde invullen zoals "800". Wil je het zo breed als je scherm maken dan voer je 100% in als waarde. Opgelet: lagere percentages worden niet herkend.
  • height: de hoogte in pixels. Je kan een waarde invullen zoals "600". Wil je het zo hoog als je scherm maken, dan voer je 100% in. Opgelet: lagere percentages worden niet herkend.
  • uploadimage: Je kan de gemaakte afbeelding ook uploaden naar een serverpagina om de foto online te bewaren. 

Data opvragen

Je kan met KitCode de gegevens van de gemaakte foto opvragen: Data.detail.base64 bevat de ganse foto in base64-codering. Je kan die foto op die manier zelfs tonen in een afbeeldingselement op je pagina. 

id("camera").after("snapshot").do(function(data){
    id("mijnfoto").changeFeature("src", data.detail.base64);
});   

Maak een afbeeldingselement aan in je pagina of app. 

<img src="" id="fototonen"/>

Vervolgens kan je de gemaakte foto met code aan dat afbeeldingselement toevoegen:

id("camera").after("snapshot").do(function(data){
    id("mijnfoto").changeFeature("src", data.detail.base64);
});

Automatisch foto's maken

Je kan ook automatisch een foto maken na een bepaalde tijd. In het onderstaande codevoorbeeld maken we automatisch een foto na 3 seconden (3000).

id("camera").after('p5-initialized').do(function(){
  var camera = id("camera");
  setTimeout(() => {
      camera.takeSnapshot(camera.p5Context);
  }, 3000);
});

Bovenstaand codevoorbeeld maakt één keer een foto. Het is ook mogelijk om een foto te maken met een bepaald "interval":

id("camera").after('p5-initialized').do(function(){
    var camera = id("camera");
    setInterval(() => {
        camera.takeSnapshot(camera.p5Context);
    }, 3000); // Neem elke 3000 milliseconden (3 seconden) een snapshot
});

Foto's uploaden

Als je over een toegangssleutel beschikt, dan kan je je afbeeldingen ook uploaden. Daarvoor moet je het app-snapshot-element het attribuut uploadimage toekennen.  

uploadimage="https://cdn.publihub.media/uploads/?prefix=krismerckx&keycode=abc123"

De link bestaat uit drie delen:

  1. https://cdn.publihub.media/uploads/?
  2. prefix: hier kan je een eigen prefix invullen. Dit prefix mag enkel letters bevatten. Dus geen vreemde tekens of spaties. 
  3. keycode: Jouw toegangssleutel. De server controleert of je toegangssleutel bestaat en ook of je mag verzenden vanaf jouw website. De twee moeten dus corresponderen. Je kan één sleutel slechts vanaf één website/domeinnaam gebruiken. 
<app-snapshot 
target="snapshot" 
id="camera" 
label="MAAK FOTO" 
downloadimage 
mirror="true" 
width="100%" 
height="100%" 
uploadimage="https://cdn.publihub.media/uploads/?prefix=krismerckx&keycode=abc123"
></app-snapshot>

Nadat de upload is voltooid, stuurt de server je het adres van je afbeelding terug:

id("camera").after("uploadresult").do(function(data){
   id("mijnfoto").changeFeature("src", data.detail.imageUrl);
});

Er kan natuurlijk ook wat fout gaan, bijvoorbeeld als je een foute keycode gebruikt of als je geen toegang hebt: Dan is het handig dat je de fouten kan bekijken om na te gaan wat fout loopt. 

id("camera").after("uploaderror").do(function(data){
   terminal(data.detail);
});

Keycode nodig?

Heb je een keycode nodig? Stuur me een bericht en vraag er eentje aan. 

Een eigen uploadpagina

Je kan natuurlijk ook je eigen UPLOAD-pagina maken. Zorg dat je upload-pagina/script dan een JSON-bestand retourneert In het geval van een correcte afhandeling moet jouw uploadscript de volgende json retourneren:

{
    "image_url": "https://www.jouwdomein.com/uploads/afbeelding123.jpg"
}

In het geval een fout, moet de volgende JSON terugkeren:

{
    "error": "De foutmelding..."
}
Volgende pagina