Webcam-to-webpage python script written over 2017's Xmas vacation for the purpose of checking in on my cat.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

75 lines
2.5 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CAT</title>
<script type='application/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='application/javascript'>
var last_update = Date.now() // milisecond timestamp
$(document).ready(function() {
var html = $("html");
var indicator = $(".indicator");
websocket = (window.location.href + "ws").replace("http", "ws"); // Will break if http appears later in the url
if (window.WebSocket) {
ws = new WebSocket(websocket);
}
else if (window.MozWebSocket) {
ws = MozWebSocket(websocket);
}
else {
console.log('WebSocket Not Supported');
return;
}
window.onbeforeunload = function(e) {
ws.close(1000);
};
ws.onmessage = function (evt) {
// console.log(evt.data)
html.css("background-image", "url(" + evt.data + ")")
console.log("Got message length " + evt.data.length)
last_update = Date.now()
};
ws.onopen = function() {
indicator.css("background-color", "#090")
console.log("connected")
};
ws.onclose = function(evt) {
console.log("disconnected")
indicator.css("background-color", "#F00")
};
setInterval(function(){
indicator.html((Date.now() - last_update)/1000)
}, 200)
});
</script>
<style>
html {
background-attachment: fixed;
background-clip: border-box;
background-image: url(/latest.jpg);
background-position-x: 50%;
background-position-y: 50%;
background-size: cover;
}
.indicator {
position: absolute;
top: 20px;
left: 20px;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
color: #fff;
font-family: sans-serif;
font-size: 10px;
background-color: #FF0;
padding: 15px 0px;
line-height: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="indicator">0</div>
</body>
</html>