Evocam’s standout feature is its built-in web server. Once activated, it generates a unique code that you can copy and paste into any website builder (WordPress, Wix, Squarespace) or raw HTML document.
<!-- CONTROL BUTTONS --> <div class="controls"> <button id="startCameraBtn" class="primary">🎥 Start Camera</button> <button id="stopCameraBtn" class="danger">⏹️ Stop Camera</button> <button id="snapshotBtn" class="primary">📷 Take Snapshot</button> <button id="clearSnapshotsBtn">🗑️ Clear Gallery</button> </div>
</script> </body> </html>
.btn-secondary:hover background: var(--bg-elevated); border-color: var(--muted);
.logo-icon width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--bg); font-size: 16px; box-shadow: 0 0 20px var(--accent-glow);
/* Glow effect */ .glow box-shadow: 0 0 40px -10px var(--accent);
app.get('/proxy/mjpeg', async (req, res) => const camResp = await fetch('http://cam:8080/videofeed', headers: Authorization: 'Basic ...' ); res.setHeader('Content-Type', camResp.headers.get('content-type')); camResp.body.pipe(res); );
Here's an example HTML structure:
/* Recording indicator */ @keyframes rec-blink 0%, 100% opacity: 1; 50% opacity: 0.3;
button.primary background: #3b82f6; border-color: #3b82f6; color: white; box-shadow: 0 4px 8px -2px #3b82f680;
Note: CORS matters. The video/image origin must allow cross-origin use (Access-Control-Allow-Origin) if you want to draw frames to a canvas.
.snapshot-grid img max-width: 180px; border-radius: 20px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.2); border: 2px solid white; background: white;
button.danger background: #fee2e2; border-color: #fecaca; color: #b91c1c;
button.primary:hover background: #2563eb; transform: scale(0.97);
<div class="evocam-container"> <div class="cam-header"> <div class="title-badge"> <h1>◈ EVOCAM</h1> <span class="version">live studio</span> </div> <div class="status-led"> <div class="led" id="statusLed"></div> <span class="status-text" id="statusMessage">offline</span> </div> </div>
Evocam’s standout feature is its built-in web server. Once activated, it generates a unique code that you can copy and paste into any website builder (WordPress, Wix, Squarespace) or raw HTML document.
<!-- CONTROL BUTTONS --> <div class="controls"> <button id="startCameraBtn" class="primary">🎥 Start Camera</button> <button id="stopCameraBtn" class="danger">⏹️ Stop Camera</button> <button id="snapshotBtn" class="primary">📷 Take Snapshot</button> <button id="clearSnapshotsBtn">🗑️ Clear Gallery</button> </div>
</script> </body> </html>
.btn-secondary:hover background: var(--bg-elevated); border-color: var(--muted);
.logo-icon width: 32px; height: 32px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--bg); font-size: 16px; box-shadow: 0 0 20px var(--accent-glow);
/* Glow effect */ .glow box-shadow: 0 0 40px -10px var(--accent);
app.get('/proxy/mjpeg', async (req, res) => const camResp = await fetch('http://cam:8080/videofeed', headers: Authorization: 'Basic ...' ); res.setHeader('Content-Type', camResp.headers.get('content-type')); camResp.body.pipe(res); );
Here's an example HTML structure:
/* Recording indicator */ @keyframes rec-blink 0%, 100% opacity: 1; 50% opacity: 0.3;
button.primary background: #3b82f6; border-color: #3b82f6; color: white; box-shadow: 0 4px 8px -2px #3b82f680;
Note: CORS matters. The video/image origin must allow cross-origin use (Access-Control-Allow-Origin) if you want to draw frames to a canvas.
.snapshot-grid img max-width: 180px; border-radius: 20px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.2); border: 2px solid white; background: white;
button.danger background: #fee2e2; border-color: #fecaca; color: #b91c1c;
button.primary:hover background: #2563eb; transform: scale(0.97);
<div class="evocam-container"> <div class="cam-header"> <div class="title-badge"> <h1>◈ EVOCAM</h1> <span class="version">live studio</span> </div> <div class="status-led"> <div class="led" id="statusLed"></div> <span class="status-text" id="statusMessage">offline</span> </div> </div>
