{"id":868,"date":"2026-03-15T12:39:42","date_gmt":"2026-03-15T11:39:42","guid":{"rendered":"https:\/\/www.db0npr.de\/?page_id=868"},"modified":"2026-03-17T11:05:21","modified_gmt":"2026-03-17T10:05:21","slug":"live-webcam","status":"publish","type":"page","link":"https:\/\/www.db0npr.de\/index.php\/live-webcam\/","title":{"rendered":"Live WebCam"},"content":{"rendered":"<p>Die Blickrichtung der Kamera ist Osten und hinter einer Glasscheibe, daher kann es zu spiegelungen oder Beschlag und Tropfen auf der Scheibe kommen.<\/p>\n\n    <div id=\"video-container\" style=\"position: relative; max-width: 800px; margin: 0 auto; background: #000; border-radius: 8px; overflow: hidden;\">\n        \n        <div id=\"timer-wrap\" style=\"position: absolute; top: 10px; right: 15px; z-index: 20; color: white; font-size: 140%; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.8);\">\n            \u23f3 <span id=\"stream-timer\">30:00<\/span>\n        <\/div>\n\n        <video id=\"player\" autoplay muted playsinline style=\"width: 100%; display: block;\"><\/video>\n        \n        <div id=\"reload-overlay\" style=\"display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); color:white; flex-direction:column; justify-content:center; align-items:center; z-index:30; text-align:center;\">\n            <p style=\"font-size:140%; margin-bottom:15px; font-weight:bold;\">\u00dcbertragung beendet<\/p>\n            <p style=\"margin-bottom:20px;\">Zum Schutz der Bandbreite wurde der Stream gestoppt.<\/p>\n            <button onclick=\"location.reload();\" style=\"padding: 10px 20px; cursor: pointer; background: transparent; color: white; border: 2px solid white; border-radius: 5px; font-size: 110%;\">Stream neu starten<\/button>\n        <\/div>\n\n        <div id=\"overlay\" style=\"\n            position: absolute;\n            bottom: 8px;\n            left: 50%;\n            transform: translateX(-50%);\n            color: #0f0;\n            background: rgba(0,0,0,0.5);\n            padding: 4px 10px;\n            font-family: monospace;\n            font-size: 10px;\n            border-radius: 6px;\n            display: flex;\n            gap: 12px;\n            align-items: center;\n            white-space: nowrap;\n            z-index: 15;\n        \">\n            <span>\ud83d\udce1 DB0NPR online<\/span>\n            <span id=\"temp\">\ud83c\udf21\ufe0f -- \u00b0C<\/span>\n        <\/div>\n    <\/div>\n\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n    <script>\n        var video = document.getElementById(\"player\");\n        var timerDisplay = document.getElementById(\"stream-timer\");\n        var overlay = document.getElementById(\"reload-overlay\");\n        var hls;\n        var timeLeft = 1800; \/\/ 30 Minuten in Sekunden\n\n        \/\/ 1. Stream starten\n        if (Hls.isSupported()) {\n            hls = new Hls();\n            hls.loadSource(\"https:\/\/ais.db0npr.de\/cam1\/index.m3u8\");\n            hls.attachMedia(video);\n            video.play();\n        } else if (video.canPlayType(\"application\/vnd.apple.mpegurl\")) {\n            video.src = \"https:\/\/ais.db0npr.de\/cam1\/index.m3u8\";\n            video.play();\n        }\n\n        \/\/ 2. Countdown Funktion\n        function startCountdown() {\n            var counter = setInterval(function() {\n                timeLeft--;\n                \n                var mins = Math.floor(timeLeft \/ 60);\n                var secs = timeLeft % 60;\n                timerDisplay.innerText = mins + \":\" + (secs < 10 ? \"0\" : \"\") + secs;\n\n                if (timeLeft <= 0) {\n                    clearInterval(counter);\n                    stopStream();\n                }\n            }, 1000);\n        }\n\n        \/\/ 3. Stream stoppen\n        function stopStream() {\n            if (hls) { hls.destroy(); }\n            video.pause();\n            video.src = \"\";\n            overlay.style.display = \"flex\";\n            document.getElementById(\"timer-wrap\").style.display = \"none\";\n        }\n\n        \/\/ 4. Wetter API (Temperatur)\n        function updateTemp() {\n            fetch(\"https:\/\/api.open-meteo.com\/v1\/forecast?latitude=50.5&longitude=7.1&current_weather=true\")\n                .then(res => res.json())\n                .then(data => {\n                    var t = data.current_weather.temperature;\n                    document.getElementById(\"temp\").innerHTML = \"\ud83c\udf21\ufe0f \" + t.toFixed(1) + \" \u00b0C\";\n                })\n                .catch(() => {\n                    document.getElementById(\"temp\").innerHTML = \"\ud83c\udf21\ufe0f N\/A\";\n                });\n        }\n\n        startCountdown();\n        updateTemp();\n        setInterval(updateTemp, 60000);\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Die Blickrichtung der Kamera ist Osten und hinter einer Glasscheibe, daher kann es zu spiegelungen oder Beschlag und Tropfen auf der Scheibe kommen.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-868","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/pages\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/comments?post=868"}],"version-history":[{"count":43,"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/pages\/868\/revisions"}],"predecessor-version":[{"id":927,"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/pages\/868\/revisions\/927"}],"wp:attachment":[{"href":"https:\/\/www.db0npr.de\/index.php\/wp-json\/wp\/v2\/media?parent=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}