Overlay: Reversecamera with guidelines
Posted: Tue Aug 26, 2025 9:20 pm
Another example,
this time the reversecamera with guidelines
I've simply added a overlay with a transparent .png to the camera example from GitHub (https://github.com/wiboma/hudiy/blob/ma ... amera.html).
The image must be named "lines.png" or yo have to change the name in the html file/code.
And you have to put the image in the same folder as the html file.
this time the reversecamera with guidelines
I've simply added a overlay with a transparent .png to the camera example from GitHub (https://github.com/wiboma/hudiy/blob/ma ... amera.html).
The image must be named "lines.png" or yo have to change the name in the html file/code.
And you have to put the image in the same folder as the html file.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body {
margin: 0;
padding: 0;
background: black;
height: 100%;
overflow: hidden;
}
video, img#overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
}
/* Overlay does not intercept clicks into the stream */
img#overlay {
pointer-events: none;
}
</style>
</head>
<body>
<video id="cam" autoplay playsinline></video>
<!-- Your transparent PNG as overlay -->
<img id="overlay" src="lines.png" alt="Overlay" />
<script>
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
document.getElementById('cam').srcObject = stream;
})
.catch(err => {
console.error("Camera error:", err);
});
</script>
</body>
</html>