// request camera with ideal settings const constraints = video: width: ideal: 1920 , height: ideal: 1080 , facingMode: "user" // front-facing by default for webcams, "environment" for back if mobile but we keep user , audio: false ;
.btn-secondary:hover background: var(--bg-elevated); border-color: var(--muted);
Integrating live video into a website used to require heavy plugins like Flash or complex streaming servers. Today, lightweight software like EvoCam combined with modern HTML and JavaScript allows you to publish live webcam feeds directly to your web pages with minimal overhead.
<html> <body> <h1>Evocam Webcam</h1> <img src="http://192.168.0.100:8080/video.mjpg" /> <br /> <input type="range" id="brightness" min="-100" max="100" value="0"> <label for="brightness">Brightness</label> <script> document.getElementById("brightness").oninput = function() var brightness = this.value; var xhr = new XMLHttpRequest(); xhr.open("GET", "http://192.168.0.100:8080/set?brightness=" + brightness, true); xhr.send(); ; </script> </body> </html>
: Users can modify the HTML templates to change how the webcam feed is presented, allowing for personalized layouts or integration into existing websites. evocam webcam html
// also click on card -> download that specific image (optional nice feature) document.querySelectorAll('.snap-card').forEach(card => card.addEventListener('click', (e) => // if the click is on delete badge, we skip (already handled) if(e.target.classList.contains('delete-badge')) return; const id = parseInt(card.getAttribute('data-id')); const found = snapshotsArray.find(s => s.id === id); if(found) downloadImage(found.dataURL, `evocam_$found.timestamp.png`);
.snap-card width: 85px; height: 65px;
Replace YOUR_PUBLIC_IP with your actual external IP address or domain name, and 8080 with the port you configured inside EvoCam. Use code with caution. Step-by-Step Configuration Checklist
: It eliminates the need for third-party hosting by running a small HTTP server directly on your Mac. // request camera with ideal settings const constraints
);
To embed a remote network camera stream on your site, use the standard HTML5 element alongside a Javascript helper library like Hls.js to ensure compatibility across all desktop and mobile browsers.
/* button panel */ .button-panel display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 0.5rem; margin-bottom: 1.5rem;
This guide covers how EvoCam handles web publishing, the HTML code required to embed the stream, and how to configure your network for live viewing. How EvoCam Web Publishing Works // also click on card -> download that
Notes:
.btn-primary background: var(--accent); color: var(--bg);
if (cameras.length > 0) await startCamera(cameras[0].deviceId);
Are you trying to view the stream or remotely (over the internet) ?