Spaces:
Sleeping
Sleeping
File size: 4,296 Bytes
d1782cb 36fdddd d1782cb 36fdddd 5db156f d1782cb 5db156f d1782cb 5db156f d1782cb 36fdddd 5db156f 36fdddd d1782cb 36fdddd d1782cb 36fdddd 5db156f 36fdddd 5db156f 36fdddd 5db156f 36fdddd 5db156f 36fdddd d1782cb 36fdddd d1782cb 5db156f 36fdddd 5db156f d1782cb 36fdddd d1782cb 36fdddd 5db156f d1782cb 36fdddd 5db156f 36fdddd 5db156f d1782cb 36fdddd 5db156f d1782cb 36fdddd 5db156f 36fdddd d1782cb 5db156f 36fdddd 5db156f 36fdddd d1782cb 5db156f 36fdddd 5db156f d1782cb 5db156f 36fdddd d1782cb 5db156f 36fdddd 5db156f 36fdddd 5db156f d1782cb 5db156f 36fdddd 5db156f 36fdddd d1782cb ce14d19 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <!DOCTYPE html>
<html>
<head>
<title>HarshDhane Camera Viewer</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #232526, #414345);
margin: 0;
padding: 20px;
min-height: 100vh;
color: white;
text-align: center;
}
.header {
padding: 20px;
margin-bottom: 30px;
background: rgba(0, 0, 0, 0.4);
border-radius: 15px;
max-width: 800px;
margin: 20px auto;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
color: #fdbb2d;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto 30px;
}
.video-container {
max-width: 800px;
margin: 0 auto;
background: rgba(0, 0, 0, 0.6);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}
.video-feed {
width: 100%;
display: block;
}
.status-bar {
background: rgba(0, 0, 0, 0.8);
padding: 15px;
font-size: 1.1rem;
}
.online-status {
color: #00ff00;
font-weight: bold;
}
.connection-info {
margin-top: 25px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
max-width: 800px;
margin: 25px auto;
font-size: 1rem;
}
.source-url {
background: rgba(0, 0, 0, 0.5);
padding: 8px 15px;
border-radius: 5px;
font-family: monospace;
word-break: break-all;
display: inline-block;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="header">
<h1>HARSH DHANE CAMERA VIEWER</h1>
<p class="subtitle">Live surveillance feed from HarshDhane Camera System</p>
</div>
<div class="video-container">
<img class="video-feed" src="{{ camera_url }}/video_feed" alt="Live Camera Feed">
<div class="status-bar">
Connection Status: <span class="online-status">● LIVE</span> | Streaming from HarshDhane Camera
</div>
</div>
<div class="connection-info">
<p>Connected to HarshDhane Camera System</p>
<div class="source-url">{{ camera_url }}/video_feed</div>
<p>Streaming at 30 FPS | Secure Connection 🔒</p>
</div>
<script>
// Auto-reconnect if stream fails
const videoFeed = document.querySelector('.video-feed');
const statusIndicator = document.querySelector('.online-status');
function checkStream() {
if (videoFeed.complete && videoFeed.naturalHeight === 0) {
statusIndicator.textContent = '● RECONNECTING';
statusIndicator.style.color = '#ffcc00';
console.log('Stream disconnected. Reconnecting...');
// Add timestamp to bypass cache
videoFeed.src = "{{ camera_url }}/video_feed?" + new Date().getTime();
// Check again after 2 seconds
setTimeout(() => {
if (videoFeed.complete && videoFeed.naturalHeight > 0) {
statusIndicator.textContent = '● LIVE';
statusIndicator.style.color = '#00ff00';
} else {
statusIndicator.textContent = '● OFFLINE';
statusIndicator.style.color = '#ff0000';
}
}, 2000);
}
}
// Check stream every 5 seconds
setInterval(checkStream, 5000);
// Initial check
window.addEventListener('load', () => {
setTimeout(checkStream, 3000);
});
</script>
</body>
</html> |