{"id":38,"date":"2026-05-29T20:32:15","date_gmt":"2026-05-29T20:32:15","guid":{"rendered":"https:\/\/beversuden.nl\/?page_id=38"},"modified":"2026-06-12T04:54:32","modified_gmt":"2026-06-12T04:54:32","slug":"38-2","status":"publish","type":"page","link":"https:\/\/beversuden.nl\/","title":{"rendered":""},"content":{"rendered":"\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\" style=\"background:#0d0f14;padding:40px;\">\n\n<style>\n  body { background:#0d0f14; }\n\n  .tabs {\n    display:flex;\n    gap:20px;\n    margin-bottom:30px;\n  }\n  .tab {\n    padding:12px 22px;\n    border-radius:12px;\n    background:rgba(255,255,255,0.05);\n    color:#ccc;\n    cursor:pointer;\n    transition:0.3s;\n    backdrop-filter:blur(10px);\n    border:1px solid rgba(255,255,255,0.08);\n  }\n  .tab:hover {\n    color:#fff;\n    border-color:rgba(255,255,255,0.18);\n  }\n  .tab.active {\n    background:rgba(255,255,255,0.12);\n    color:#fff;\n    border-color:rgba(255,255,255,0.25);\n  }\n\n  .tabcontent {\n    display:none;\n    animation: fadeIn 0.4s ease;\n  }\n  @keyframes fadeIn {\n    from {opacity:0;}\n    to {opacity:1;}\n  }\n\n  .glassbox {\n    background: rgba(255,255,255,0.05);\n    backdrop-filter: blur(12px);\n    border: 1px solid rgba(255,255,255,0.08);\n    border-radius: 16px;\n    padding: 20px;\n    box-shadow: 0 0 25px rgba(0,0,0,0.4);\n    transition: 0.3s ease;\n  }\n  .glassbox:hover {\n    border-color: rgba(255,255,255,0.18);\n    box-shadow: 0 0 35px rgba(0,0,0,0.55);\n  }\n\n  h1, h2, p { color:#e6e6e6; }\n<\/style>\n\n<h1 class=\"has-text-align-center\" style=\"font-size:46px;margin-bottom:10px;\">\n  BeversUden \u2013 Live Monitoring Dashboard\n<\/h1>\n\n<p class=\"has-text-align-center\" style=\"font-size:18px;color:#9aa0a6;margin-bottom:40px;\">\n  Live camerabeelden &amp; realtime P2000 meldingen\n<\/p>\n\n<!-- TABS -->\n<div class=\"tabs\">\n  <div class=\"tab active\" onclick=\"openTab('cam1')\">Camera 1<\/div>\n  <div class=\"tab\" onclick=\"openTab('cam2')\">Camera 2<\/div>\n  <div class=\"tab\" onclick=\"openTab('p2000')\">P2000<\/div>\n<\/div>\n\n<!-- CAMERA 1 -->\n<div id=\"cam1\" class=\"tabcontent\" style=\"display:block;\">\n  <div class=\"glassbox\">\n    <h2>Camera 1<\/h2>\n    <video id=\"player1\" controls=\"\" autoplay=\"\" muted=\"\" style=\"width:100%;border-radius:12px;background:#000;height:500px;\"><\/video>\n  <\/div>\n<\/div>\n\n<!-- CAMERA 2 -->\n<div id=\"cam2\" class=\"tabcontent\">\n  <div class=\"glassbox\">\n    <h2>Camera 2<\/h2>\n    <video id=\"player2\" controls=\"\" autoplay=\"\" muted=\"\" style=\"width:100%;border-radius:12px;background:#000;height:500px;\"><\/video>\n  <\/div>\n<\/div>\n\n<!-- P2000 -->\n<div id=\"p2000\" class=\"tabcontent\">\n  <div class=\"glassbox\">\n    <h2>P2000 Meldingen \u2013 Brabant\u2011Noord<\/h2>\n    <iframe src=\"https:\/\/p2000.page\/plaats\/uden\"style=\"width:100%;height:900px;border:0;border-radius:12px; loading=\"lazy\">\n    <\/iframe>\n  <\/div>\n<\/div>\n\n<!-- TAB SCRIPT -->\n<script>\nfunction openTab(name) {\n  document.querySelectorAll('.tabcontent').forEach(el => el.style.display = 'none');\n  document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));\n  document.getElementById(name).style.display = 'block';\n  event.target.classList.add('active');\n}\n<\/script>\n\n<!-- HLS PLAYER SCRIPT -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n<script>\n  function loadStream(videoElementId, streamUrl) {\n    var video = document.getElementById(videoElementId);\n    if (Hls.isSupported()) {\n      var hls = new Hls();\n      hls.loadSource(streamUrl);\n      hls.attachMedia(video);\n    } else if (video.canPlayType('application\/vnd.apple.mpegurl')) {\n      video.src = streamUrl;\n    }\n  }\n\n  \/\/ Vul hier jouw Synology IP in\n  loadStream(\"player1\", \"http:\/\/212.127.153.244:8083\/streams\/cam1\/index.m3u8\");\n  loadStream(\"player2\", \"http:\/\/212.127.153.244:8083\/streams\/cam2\/index.m3u8\");\n<\/script>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-38","page","type-page","status-publish","hentry"],"blocksy_meta":{"page_structure_type":"default","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/beversuden.nl\/index.php?rest_route=\/wp\/v2\/pages\/38","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beversuden.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beversuden.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beversuden.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beversuden.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=38"}],"version-history":[{"count":32,"href":"https:\/\/beversuden.nl\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions"}],"predecessor-version":[{"id":80,"href":"https:\/\/beversuden.nl\/index.php?rest_route=\/wp\/v2\/pages\/38\/revisions\/80"}],"wp:attachment":[{"href":"https:\/\/beversuden.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=38"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}