Opgelet: Bij PHP-pagina's of serverpagina's wordt enkel de gerenderde html getoond.
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyAPP</title>
<!--APP STYLING-->
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css?v4.5">
<!--APP FUNCTIES :: CDN-connecties-->
<script src="https://cdn.publihub.media/lib/app.js?v95"></script>
<script src="https://www.leerschool.be/smarticles/bricks/crowl.fsbutton.js?v7"></script>
<script src="https://www.leerschool.be/smarticles/bricks/crowl.layers.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.processing.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.snapshotcamera.js?v13"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js"></script>
<script src="https://unpkg.com/ml5@1/dist/ml5.min.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.faceparts.js?v2"></script>
<script src="https://cdn.publihub.media/lib/crowl.layers.js?v2"></script>
</head>
<body data-theme="teletext">
<app-layers height="100vh">
<app-layer id="canvas-layer" z="2">
<app-part id="snapshot" style="opacity:0.9;"></app-part>
<app-snapshot target="snapshot" id="camera" nobutton label="MAAK FOTO" mirror="false" width="100%" height="100%" downloadimage uploadimage="https://cdn.publihub.media/uploads/?prefix=krismerckx&keycode=abc123"></app-snapshot>
</app-layer>
<app-layer id="overlay-layer1" z="10">
<app-facepart type="mouth"></app-facepart>
<app-facepart type="lefteye"></app-facepart>
<app-facepart type="righteye"></app-facepart>
</app-layer>
<app-layer id="overlay-layer2" z="3" x="100px" y="100px" backgroundcolor="rgba(0, 0, 255, 0.5)">
<app-part innerspace="13">
<h3>Extra inhoud boven canvas</h3>
</app-part>
</app-layer>
</app-layers>
<app-voice command="foto" id="maakfoto"></app-voice>
<script>
app.ready(function(){
id("maakfoto").after("listen").do(function(){
id("camera").takeSnapshot(camera.p5Context);
});
});
</script>
</body>
</html>