Camera Control Buttons<\/title>\n<style>\n \/* ========== THEME HOOKS & DEFAULTS ========== *\/\n :root{\n --row-from: var(--e-global-color-background, #075831);\n --row-to: var(--e-global-color-secondary, #000000);\n --btn-from: var(--e-global-color-primary, var(--wp--preset--color--base, #FFFFFF));\n --btn-to: var(--e-global-color-secondary,var(--wp--preset--color--contrast,#F5F8FF));\n --btn-text: #000000; \n --glow-rgb: 0, 174, 114;\n }\n \n \/* \u0e01\u0e25\u0e48\u0e2d\u0e07\u0e23\u0e27\u0e21\u0e1b\u0e38\u0e48\u0e21\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19 *\/\n .button-row{\n display:flex; justify-content:center; gap:8px; flex-wrap:wrap;\n padding:18px;\n border-radius:8px;\n position: relative;\n background: transparent !important;\n border: 0 !important;\n box-shadow: none !important;\n }\n\n \/* \u0e1b\u0e38\u0e48\u0e21\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 *\/\n .text-control-button{\n appearance:none; border:0; cursor:pointer; user-select:none;\n display:inline-flex; align-items:center; justify-content:center;\n height:30px; padding:0 16px; border-radius:9999px; \/* pill *\/\n font:600 14px\/1.0 system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Kanit\", sans-serif;\n color:var(--btn-text) !important;\n background:linear-gradient(180deg, var(--btn-from), var(--btn-to));\n box-shadow:0 2px 6px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.06);\n transition:transform .3s ease, filter .3s ease, box-shadow .3s ease, opacity .2s;\n text-shadow:none !important;\n position: relative;\n z-index: 1;\n }\n\n \/* Hover = glow + scale *\/\n .text-control-button:hover{\n animation:glowPulse 1.5s infinite alternate;\n transform:scale(1.05);\n filter:brightness(1.04);\n }\n\n \/* Focus \u0e08\u0e32\u0e01\u0e04\u0e35\u0e22\u0e4c\u0e1a\u0e2d\u0e23\u0e4c\u0e14\u0e43\u0e2b\u0e49\u0e40\u0e2b\u0e47\u0e19\u0e0a\u0e31\u0e14 *\/\n .text-control-button:focus-visible{\n outline:2px solid rgba(var(--glow-rgb), .9);\n outline-offset:2px;\n }\n\n \/* \u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07\u0e2a\u0e48\u0e07\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 \u0e1b\u0e34\u0e14\u0e04\u0e25\u0e34\u0e01\u0e0a\u0e31\u0e48\u0e27\u0e04\u0e23\u0e32\u0e27 *\/\n .text-control-button.is-busy{\n opacity:.7; pointer-events:none;\n }\n\n @keyframes glowPulse{\n 0% { box-shadow:0 2px 8px rgba(var(--glow-rgb), .30), inset 0 0 0 1px rgba(0,0,0,.06); }\n 100% { box-shadow:0 4px 16px rgba(var(--glow-rgb), .55), inset 0 0 0 1px rgba(0,0,0,.06); }\n }\n\n \/* ========== STYLE \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e16\u0e32\u0e19\u0e30 (\u0e41\u0e1a\u0e1a Toast \u0e40\u0e25\u0e47\u0e01\u0e46 \u0e01\u0e23\u0e13\u0e35 Text \u0e1b\u0e01\u0e15\u0e34) ========== *\/\n #status-popup {\n position: fixed;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%) translateY(20px);\n padding: 12px 24px;\n color: #fff;\n border-radius: 8px;\n font-family: system-ui, -apple-system, \"Kanit\", sans-serif;\n font-size: 14px;\n font-weight: 500;\n box-shadow: 0 8px 24px rgba(0,0,0,0.2);\n z-index: 9999;\n opacity: 0;\n visibility: hidden;\n transition: all 0.4s ease;\n text-align: center;\n max-width: 90vw;\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n }\n\n #status-popup.status-show {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .status-loading { background: rgba(0, 86, 179, 0.9); border: 1px solid rgba(255,255,255,0.2); }\n .status-success { background: rgba(15, 139, 60, 0.9); border: 1px solid rgba(255,255,255,0.2); }\n .status-error { background: rgba(211, 47, 47, 0.9); border: 1px solid rgba(255,255,255,0.2); }\n\n \/* Responsive *\/\n @media (max-width:600px){\n .text-control-button{ height:30px; font-size:13px; padding:0 14px; }\n #status-popup { font-size: 13px; bottom: 20px; padding: 10px 20px; }\n }\n<\/style>\n<\/head>\n<body>\n\n \n <div class=\"button-row\">\n <button type=\"button\" class=\"text-control-button\" data-action=\"floodlight\">Spotlights<\/button>\n <button type=\"button\" class=\"text-control-button\" data-action=\"opticalzoom\">Optical Zoom<\/button>\n <button type=\"button\" class=\"text-control-button\" data-action=\"ptzpatrol\">PTZ Patrol<\/button>\n <\/div>\n\n \n <div id=\"status-popup\"><\/div>\n\n <script>\n \/\/ \u0e41\u0e21\u0e47\u0e1b action -> endpoint\n const ENDPOINTS = {\n floodlight: 'https:\/\/850fl.ipcamcloud.net\/p850\/floodlight',\n opticalzoom: 'https:\/\/850oz.ipcamcloud.net\/p850\/opticalzoom',\n ptzpatrol: 'https:\/\/850pt.ipcamcloud.net\/p850\/ptzpatrol',\n };\n\n const statusPopup = document.getElementById('status-popup');\n let messageTimeout;\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\n function showMessage(text, type, duration = 10000) {\n clearTimeout(messageTimeout); \n statusPopup.textContent = text;\n statusPopup.className = `status-show status-${type}`; \n\n \/\/ \u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e32\u0e22\u0e44\u0e1b\u0e40\u0e2d\u0e07\u0e43\u0e19 10 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35\n messageTimeout = setTimeout(() => {\n statusPopup.classList.remove('status-show');\n }, duration);\n }\n\n \/\/ \u0e2a\u0e48\u0e07\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e41\u0e1a\u0e1a\u0e44\u0e21\u0e48\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\n document.querySelectorAll('.text-control-button').forEach(btn => {\n btn.addEventListener('click', async (e) => {\n const action = btn.dataset.action;\n const btnText = btn.textContent;\n const url = ENDPOINTS[action];\n if(!url) return;\n\n \/\/ \u0e01\u0e33\u0e25\u0e31\u0e07\u0e42\u0e2b\u0e25\u0e14\n btn.classList.add('is-busy');\n showMessage(`\u0e01\u0e33\u0e25\u0e31\u0e07\u0e40\u0e23\u0e35\u0e22\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25...`, 'loading');\n\n try{\n const res = await fetch(url, { method: 'GET' });\n if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);\n \n const responseText = await res.text();\n \n \/\/ \u0e40\u0e0a\u0e47\u0e04\u0e27\u0e48\u0e32\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a\u0e40\u0e1b\u0e47\u0e19 HTML \u0e40\u0e15\u0e47\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a (\u0e40\u0e0a\u0e48\u0e19 \u0e42\u0e04\u0e49\u0e14\u0e02\u0e2d\u0e07 IPCAM) \u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48\n if (responseText.toLowerCase().includes('<!doctype html>') || responseText.toLowerCase().includes('<html')) {\n statusPopup.classList.remove('status-show');\n \n const iframe = document.createElement('iframe');\n iframe.style.position = 'fixed';\n iframe.style.top = '0';\n iframe.style.left = '0';\n iframe.style.width = '100%';\n iframe.style.height = '100%';\n iframe.style.border = 'none';\n iframe.style.zIndex = '99999';\n iframe.style.backgroundColor = 'transparent';\n iframe.setAttribute('allow', 'autoplay'); \/\/ \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e17\u0e33\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\n \n document.body.appendChild(iframe);\n \n \/\/ ========== \u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 CSS ==========\n const customStyle = `\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;500;600;700&display=swap');\n \n \/* \u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e04\u0e48\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e2a\u0e38\u0e14 (body) \u0e43\u0e2b\u0e49\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e2a\u0e35\u0e40\u0e17\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e21\u0e32\u0e1a\u0e31\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32 *\/\n body { background-color: transparent !important; margin: 0; font-family: 'Kanit', sans-serif !important; }\n \n \/* \u0e22\u0e01\u0e40\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a \u0e1b\u0e25\u0e48\u0e2d\u0e22\u0e2a\u0e35 .overlay \u0e41\u0e25\u0e30 .popup \u0e43\u0e2b\u0e49\u0e17\u0e36\u0e1a\u0e15\u0e32\u0e21\u0e15\u0e49\u0e19\u0e09\u0e1a\u0e31\u0e1a *\/\n <\/style>\n `;\n\n \/\/ \u0e41\u0e17\u0e23\u0e01 Style \u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19 HTML \u0e1b\u0e25\u0e32\u0e22\u0e17\u0e32\u0e07\n let modifiedHTML = responseText;\n if (modifiedHTML.includes('<\/head>')) {\n modifiedHTML = modifiedHTML.replace('<\/head>', customStyle + '<\/head>');\n } else {\n modifiedHTML += customStyle;\n }\n \n \/\/ \u0e25\u0e1a\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e40\u0e01\u0e48\u0e32\u0e02\u0e2d\u0e07\u0e40\u0e0b\u0e34\u0e23\u0e4c\u0e1f\u0e40\u0e27\u0e2d\u0e23\u0e4c\n modifiedHTML = modifiedHTML.replace(\/background-color:\\s*#f0f2f5;\/gi, 'background-color: transparent;');\n \n iframe.contentWindow.document.open();\n iframe.contentWindow.document.write(modifiedHTML);\n iframe.contentWindow.document.close();\n\n \/\/ \u0e25\u0e1a iframe \u0e2d\u0e2d\u0e01\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01 12 \u0e27\u0e34\u0e19\u0e32\u0e17\u0e35\n setTimeout(() => {\n if(document.body.contains(iframe)) iframe.remove();\n }, 12000);\n \n } else {\n showMessage(`\u0e15\u0e2d\u0e1a\u0e01\u0e25\u0e31\u0e1a: ${responseText}`, 'success');\n }\n\n }catch(err){\n console.error(`${action} request failed`, err);\n showMessage(`\u0e44\u0e21\u0e48\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e44\u0e14\u0e49 (\u0e2d\u0e32\u0e08\u0e15\u0e34\u0e14\u0e1b\u0e31\u0e0d\u0e2b\u0e32 CORS \u0e2b\u0e23\u0e37\u0e2d\u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e40\u0e19\u0e47\u0e15)`, 'error');\n }finally{\n setTimeout(() => btn.classList.remove('is-busy'), 800); \n }\n });\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8dc169e e-flex e-con-boxed e-con e-child\" data-id=\"8dc169e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-9a1d841 e-flex e-con-boxed e-con e-child\" data-id=\"9a1d841\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b828bb elementor-widget-tablet__width-inherit at-heading-animation at-animation-heading-none elementor-widget elementor-widget-heading\" data-id=\"0b828bb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Watch a Real Reolink Camera Live<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d9abfe elementor-widget-tablet__width-inherit at-heading-animation at-animation-heading-none elementor-widget elementor-widget-heading\" data-id=\"6d9abfe\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Control the Reolink Camera Online<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e22e4e3 e-flex e-con-boxed e-con e-child\" data-id=\"e22e4e3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-45a5c4f elementor-widget__width-inherit elementor-widget-tablet__width-inherit at-heading-animation at-animation-heading-none elementor-widget elementor-widget-heading\" data-id=\"45a5c4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why This Reolink Live Demo Is Different<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd6d9bc elementor-widget__width-inherit elementor-widget-tablet__width-inherit at-heading-animation at-animation-heading-none elementor-widget elementor-widget-heading\" data-id=\"cd6d9bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Explore Reolink Camera Performance Before You Buy<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7f62d7 e-flex e-con-boxed e-con e-parent\" data-id=\"a7f62d7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"gradient"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-1199cb1 e-flex e-con-boxed e-con e-child\" data-id=\"1199cb1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-522168f elementor-widget elementor-widget-html\" data-id=\"522168f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.marquee-container {\n width: 100%;\n overflow: hidden;\n background: linear-gradient(to right, #075831, #000000);\n color: #FFFFFF;\n font-size: 18px;\n font-family: Arial, sans-serif;\n white-space: nowrap;\n padding: 10px 0;\n}\n\n.marquee-text {\n display: inline-block;\n padding-left: 100%;\n animation: scrollText 20s linear infinite;\n}\n\n@keyframes scrollText {\n 0% { transform: translateX(0%); }\n 100% { transform: translateX(-100%); }\n}\n\n@media (max-width: 600px) {\n .marquee-container {\n font-size: 14px;\n padding: 8px 0;\n }\n}\n<\/style>\n\n<div class=\"marquee-container\">\n <div class=\"marquee-text\">\nLive Streaming by Reolink P850 at 25fps | 4K Downscaled to Full HD | Real-Time Camera Control Available | Test Zoom and PTZ Functions While Watching Live | Approx. 10-Second Delay | Camera Returns to Default Position Automatically When Idle <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-83e248a elementor-widget elementor-widget-html\" data-id=\"83e248a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"yt-stream-container\" id=\"yt-camera-container\">\n \n \n <video id=\"hls-video\" class=\"yt-stream-video\" autoplay muted playsinline><\/video>\n \n \n <div class=\"premium-live-badge\" id=\"live-badge\">\n <svg class=\"live-signal-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path class=\"wave-outer\" d=\"M19.07 4.93C20.9453 6.80528 21.9984 9.34836 21.9984 12C21.9984 14.6516 20.9453 17.1947 19.07 19.07M4.93 19.07C3.05469 17.1947 2.00156 14.6516 2.00156 12C2.00156 9.34836 3.05469 6.80528 4.93 4.93\" stroke=\"#FF3B30\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <path class=\"wave-inner\" d=\"M15.53 8.47C16.4677 9.40764 16.9942 10.6792 16.9942 12C16.9942 13.3208 16.4677 14.5924 15.53 15.53M8.47 15.53C7.5323 14.5924 7.00578 13.3208 7.00578 10.6792 7.5323 9.40764 8.47 8.47\" stroke=\"#FF3B30\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n <circle class=\"center-dot\" cx=\"12\" cy=\"12\" r=\"3\" fill=\"#FF3B30\"\/>\n <\/svg>\n LIVE CCTV\n <\/div>\n\n<\/div>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/hls.js@latest\"><\/script>\n\n<script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n var video = document.getElementById('hls-video');\n var badge = document.getElementById('live-badge');\n var container = document.getElementById('yt-camera-container');\n var fadeTimer; \n \n \/\/ \u0e25\u0e34\u0e07\u0e01\u0e4c\u0e2a\u0e15\u0e23\u0e35\u0e21 .m3u8 \u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 (\u0e40\u0e08\u0e32\u0e30\u0e40\u0e2d\u0e32\u0e44\u0e1f\u0e25\u0e4c\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d\u0e21\u0e32\u0e40\u0e25\u0e22 \u0e44\u0e21\u0e48\u0e40\u0e2d\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e1e\u0e08)\n var streamSrc = \"https:\/\/live.ipcamshop.net\/memfs\/090a32eb-1f51-4f85-bac6-8a60dab87d83.m3u8\";\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e25\u0e48\u0e19\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d\n function setupVideo() {\n \/\/ 1. \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a PC, Android \u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e1e\u0e36\u0e48\u0e07 HLS.js\n if (Hls.isSupported()) {\n var hls = new Hls();\n hls.loadSource(streamSrc);\n hls.attachMedia(video);\n hls.on(Hls.Events.MANIFEST_PARSED, function() {\n video.play().catch(function(e) { console.log(\"Autoplay prevented:\", e); });\n });\n }\n \/\/ 2. \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a iPad \/ iPhone (Safari) \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e44\u0e1f\u0e25\u0e4c\u0e19\u0e35\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27 (Native) \u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49 HLS.js\n else if (video.canPlayType('application\/vnd.apple.mpegurl')) {\n video.src = streamSrc;\n video.addEventListener('loadedmetadata', function() {\n video.play().catch(function(e) { console.log(\"Autoplay prevented:\", e); });\n });\n }\n }\n\n \/\/ \u0e2a\u0e31\u0e48\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d\u0e17\u0e31\u0e19\u0e17\u0e35\n setupVideo();\n\n \/\/ \u0e23\u0e30\u0e1a\u0e1a Observer \u0e04\u0e37\u0e19\u0e04\u0e48\u0e32\u0e1b\u0e49\u0e32\u0e22 LIVE \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e35\u0e41\u0e25\u0e49\u0e27\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e14\u0e39\u0e43\u0e2b\u0e21\u0e48\n if ('IntersectionObserver' in window) {\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n badge.classList.remove('fade-out-hidden');\n clearTimeout(fadeTimer);\n \n fadeTimer = setTimeout(function() {\n badge.classList.add('fade-out-hidden');\n }, 10000);\n } else {\n clearTimeout(fadeTimer);\n }\n });\n }, { threshold: 0.1 }); \n \n observer.observe(container);\n } else {\n fadeTimer = setTimeout(function() {\n badge.classList.add('fade-out-hidden');\n }, 10000);\n }\n });\n<\/script>\n\n<style>\n \/* --- 1. \u0e01\u0e23\u0e2d\u0e1a\u0e2b\u0e25\u0e31\u0e01 --- *\/\n .yt-stream-container {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 9;\n background-color: #000;\n overflow: hidden;\n margin-bottom: 0px;\n display: block;\n border-radius: 0px;\n }\n \n \/* --- 2. \u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d\u0e2b\u0e25\u0e31\u0e01 --- *\/\n .yt-stream-video {\n width: 100%;\n height: 100%;\n object-fit: contain; \/* \u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e20\u0e32\u0e1e\u0e22\u0e37\u0e14\u0e2b\u0e14 *\/\n border: none;\n display: block;\n }\n\n \/* --- 3. \u0e14\u0e35\u0e44\u0e0b\u0e19\u0e4c\u0e1b\u0e49\u0e32\u0e22 LIVE CCTV --- *\/\n .premium-live-badge {\n position: absolute;\n top: 15px;\n right: 20px; \n z-index: 10;\n background: rgba(30, 30, 30, 0.75);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n color: #ffffff;\n padding: 6px 16px;\n font-size: 14px;\n font-weight: 600;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n letter-spacing: 0.5px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n gap: 10px;\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 4px 20px rgba(0,0,0,0.5);\n user-select: none;\n pointer-events: none;\n \n transition: opacity 1.5s ease-in-out, visibility 1.5s;\n opacity: 1;\n visibility: visible;\n }\n\n .premium-live-badge.fade-out-hidden {\n opacity: 0;\n visibility: hidden;\n }\n\n \/* --- 4. \u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e2a\u0e31\u0e0d\u0e0d\u0e32\u0e13 LIVE --- *\/\n .live-signal-icon { \n width: 20px;\n height: 20px; \n }\n \n .center-dot {\n animation: pulse-red 1.5s ease-in-out infinite;\n }\n\n .wave-inner {\n animation: pulse-wave 1.5s ease-in-out infinite;\n }\n\n .wave-outer {\n animation: pulse-wave 1.5s ease-in-out infinite 0.3s;\n }\n\n @keyframes pulse-red {\n 0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px #FF3B30); }\n 50% { opacity: 0.6; filter: drop-shadow(0 0 0px #FF3B30); }\n }\n\n @keyframes pulse-wave {\n 0%, 100% { opacity: 1; stroke: #FF3B30; }\n 50% { opacity: 0.2; stroke: #FF3B30; }\n }\n\n \/* --- 5. Responsive --- *\/\n @media (max-width: 768px) {\n .premium-live-badge {\n top: 10px; \n right: 10px; \n padding: 4px 12px; \n font-size: 12px; \n }\n .live-signal-icon { \n width: 16px; \n height: 16px; \n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d8f440c e-con-full e-flex e-con e-child\" data-id=\"d8f440c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"gradient"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b3a5019 elementor-widget-mobile__width-auto at-heading-animation at-animation-heading-none elementor-widget elementor-widget-heading\" data-id=\"b3a5019\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<div class=\"elementor-heading-title elementor-size-default\"><a href=\"\/live-watch\/\" target=\"_blank\">Watch Live (Full Screen)<\/a><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-05d68c8 e-flex e-con-boxed e-con e-child\" data-id=\"05d68c8\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a139c3d e-con-full e-flex e-con e-child\" data-id=\"a139c3d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ed7d26 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"6ed7d26\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"952\" data-end=\"1163\">Watch a real-time Reolink live camera demo directly from our website. This page lets you see an actual Reolink camera in action and experience live image quality, zoom performance, and remote control online<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9b8fb69 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"9b8fb69\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1182\" data-end=\"1415\">Unlike a normal product page, this Reolink camera live demo gives you a real view from an active camera. You can test how the camera responds, check video clarity, and explore how a Reolink PTZ camera performs in real conditions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40f8cc6 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"40f8cc6\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"1434\" data-end=\"1697\">This live page is designed for visitors who want to explore Reolink camera performance before choosing a system. If you are comparing CCTV brands or looking for a professional surveillance solution, this Reolink live demo gives you a direct experience online.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2ab2199 e-con-full e-flex e-con e-child\" data-id=\"2ab2199\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c26d58b at-image-animation at-animation-image-style-1 at-shiny-glass-effect elementor-widget__width-inherit elementor-widget elementor-widget-image\" data-id=\"c26d58b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t<figure class=\"wp-caption\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/ipcamstore.net\/product\/reolink-p850\/\" target=\"_blank\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"500\" src=\"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp\" class=\"attachment-full size-full wp-image-10607\" alt=\"Reolink PTZ camera live view\" srcset=\"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp 800w, https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view-300x188.webp 300w, https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view-768x480.webp 768w, https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view-18x12.webp 18w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t<figcaption class=\"widget-image-caption wp-caption-text\"><\/figcaption>\n\t\t\t\t\t\t\t\t\t\t<\/figure>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c64509f e-flex e-con-boxed e-con e-parent\" data-id=\"c64509f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-967eb84 e-flex e-con-boxed e-con e-child\" data-id=\"967eb84\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a9ba21d e-con-full e-flex e-con e-child\" data-id=\"a9ba21d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83e5f8e elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"83e5f8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3318\" data-end=\"3488\">Experience a real-time Reolink live camera demo directly from our website. This is not a simulation \u2014 you are watching a real Reolink camera stream online.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e2d68c elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"3e2d68c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Our live demo allows you to:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8072c77 commitment-list elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"8072c77\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":300,"ekit_we_effect_on":"none"}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">View actual CCTV footage in real time<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Test camera zoom and movement<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Experience image quality before buying<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Interact with the camera remotely<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2464ba3 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"2464ba3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>This demo uses a professional-grade camera (<a href=\"https:\/\/ipcamstore.net\/product\/reolink-p850\/\" target=\"_blank\" rel=\"noopener\">Reolink P850<\/a>), designed for commercial and industrial security projects.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-84b40a4 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"84b40a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Whether you're researching <a href=\"\/top-5-benefits-of-installing-cctv-cameras-at-home\/\">CCTV<\/a> systems or comparing brands, this Reolink live demo gives you a real-world experience you won\u2019t find elsewhere.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-08df9f5 e-con-full e-flex e-con e-child\" data-id=\"08df9f5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd79f6a section-heading at-heading-animation at-animation-heading-none elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"cd79f6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":100,"ekit_we_effect_on":"none"}\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span>Why This<\/span> Reolink Live Demo Is Unique<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-557dc01 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"557dc01\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p data-start=\"3575\" data-end=\"3796\">Unlike typical product pages, this <a href=\"https:\/\/www.youtube.com\/@ipcamshop\/live\" target=\"_blank\" rel=\"noopener\">Reolink live demo<\/a> lets you interact with a real CCTV system. You can test image clarity, zoom response, and real-time camera performance instantly.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f386e2 elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"1f386e2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":200,"ekit_we_effect_on":"none"}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Who Should Try This Live Demo<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4d8960 commitment-list elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-invisible elementor-widget elementor-widget-icon-list\" data-id=\"c4d8960\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":300,"ekit_we_effect_on":"none"}\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Business owners<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">System integrators<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Security professionals<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-check-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Anyone comparing CCTV brands<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-264a31b e-con-full e-flex e-con e-child\" data-id=\"264a31b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-415a91b elementor-align-left elementor-invisible elementor-widget elementor-widget-button\" data-id=\"415a91b\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"_animation":"fadeInUp","_animation_delay":500,"ekit_we_effect_on":"none"}\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/ipcamstore.net\/store\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"21\" height=\"21\" viewBox=\"0 0 21 21\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M18.4511 9.37805C16.0534 9.37805 13.8681 7.19372 13.8681 4.79501V3.81152H11.9011V4.79501C11.9011 6.5397 12.6663 8.17622 13.8671 9.37805H1.73193V11.345H13.8671C12.6663 12.5468 11.9011 14.1833 11.9011 15.928V16.9115H13.8681V15.928C13.8681 13.5293 16.0534 11.345 18.4511 11.345H19.4346V9.37805H18.4511Z\" fill=\"currentColor\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Explore Reolink Cameras<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-271b3e5 e-flex e-con-boxed e-con e-parent\" data-id=\"271b3e5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e0d73d elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"7e0d73d\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"ekit_we_effect_on":"none"}\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n\n<script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n\n<style>\n :root {\n --fm-accent: #10b981; \/* \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27 *\/\n --fm-bg-opacity: 0.55; \/* \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e48\u0e32\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e40\u0e1b\u0e47\u0e19 55% *\/\n }\n \n \/* \u0e15\u0e35\u0e40\u0e01\u0e23\u0e32\u0e30\u0e1b\u0e49\u0e2d\u0e07\u0e01\u0e31\u0e19\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e08\u0e32\u0e01\u0e18\u0e35\u0e21\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a *\/\n #ipcam-fm-wrapper, #ipcam-fm-wrapper * {\n box-sizing: border-box !important;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: normal;\n }\n\n \/* --- Main Navigation Box --- *\/\n .fm-nav {\n position: fixed;\n z-index: 99999;\n width: 250px !important; \/* \u0e25\u0e47\u0e2d\u0e04\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07 \u0e02\u0e22\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19\u0e19\u0e34\u0e14\u0e2b\u0e19\u0e48\u0e2d\u0e22\u0e01\u0e31\u0e19\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e43\u0e2b\u0e0d\u0e48 *\/\n max-width: 250px !important;\n border-radius: 12px;\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n background-color: rgba(15, 15, 15, var(--fm-bg-opacity));\n border: 1px solid rgba(255, 255, 255, 0.1);\n box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);\n transition: opacity 0.3s ease;\n color: #e5e7eb;\n user-select: none;\n touch-action: none; \n margin: 0 !important;\n padding: 0 !important;\n }\n\n \/* --- Header \/ Drag Handle --- *\/\n .fm-header {\n padding: 12px 16px !important;\n border-bottom: 1px solid rgba(255,255,255,0.08);\n display: flex !important;\n justify-content: space-between !important;\n align-items: center !important;\n flex-wrap: nowrap !important;\n background-color: rgba(0,0,0,0.25);\n border-radius: 12px 12px 0 0;\n cursor: grab;\n }\n .fm-header:active { cursor: grabbing; }\n \n .fm-title-group { \n display: flex !important; \n align-items: center !important; \n gap: 8px !important; \n font-size: 13px !important; \n font-weight: 700 !important; \n color: #fff !important; \n pointer-events: none;\n white-space: nowrap !important; \/* \u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49\u0e15\u0e01\u0e1a\u0e23\u0e23\u0e17\u0e31\u0e14 *\/\n flex-shrink: 0;\n margin: 0 !important;\n padding: 0 !important;\n }\n .fm-actions { \n display: flex !important; \n gap: 4px !important; \n flex-shrink: 0;\n flex-wrap: nowrap !important;\n }\n \n .fm-btn-icon {\n background: transparent !important; \n border: none !important; \n padding: 4px !important; \n margin: 0 !important;\n min-width: unset !important;\n height: auto !important;\n color: #9ca3af !important; \n border-radius: 4px !important; \n cursor: pointer !important; \n display: flex !important; \n align-items: center !important; \n justify-content: center !important; \n transition: all 0.2s !important;\n }\n .fm-btn-icon:hover { background-color: rgba(255,255,255,0.15) !important; color: #fff !important; }\n \/* \u0e41\u0e01\u0e49\u0e44\u0e02\u0e2a\u0e35\u0e1b\u0e38\u0e48\u0e21\u0e1b\u0e34\u0e14\u0e15\u0e2d\u0e19 hover \u0e43\u0e2b\u0e49\u0e2d\u0e34\u0e07\u0e15\u0e32\u0e21\u0e2a\u0e35\u0e17\u0e35\u0e48\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32 *\/\n .fm-btn-close:hover { color: var(--fm-accent) !important; }\n\n \/* --- Content Animations --- *\/\n .fm-content {\n transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;\n overflow: hidden;\n }\n .fm-open { \n max-height: 70vh !important; \n opacity: 1 !important; \n overflow-y: auto !important; \n }\n .fm-closed { \n max-height: 0px !important; \n opacity: 0 !important; \n pointer-events: none !important; \n }\n\n \/* \u0e41\u0e15\u0e48\u0e07 Scrollbar \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e2b\u0e23\u0e39 *\/\n .fm-open::-webkit-scrollbar { width: 5px; }\n .fm-open::-webkit-scrollbar-track { background: transparent; }\n .fm-open::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 5px; }\n .fm-open::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }\n\n \/* --- Category List --- *\/\n .fm-list { list-style: none !important; padding: 8px 12px !important; margin: 0 !important; }\n .fm-list li { margin: 0 0 4px 0 !important; padding: 0 !important; }\n .fm-cat-link {\n display: flex !important; \n align-items: center !important; \n gap: 10px !important; \n padding: 8px 12px !important; \n color: #d1d5db !important; \n text-decoration: none !important; \n font-size: 13px !important; \n border-radius: 6px !important; \n transition: all 0.2s !important; \n border-left: 3px solid transparent !important;\n overflow: hidden !important; \n box-sizing: border-box !important;\n width: 100% !important;\n margin: 0 !important;\n }\n .fm-cat-link:hover { \n color: #fff !important; \n background-color: rgba(255,255,255,0.08) !important;\n border-left-color: var(--fm-accent) !important;\n }\n .fm-cat-icon { width: 16px !important; height: 16px !important; opacity: 0.7 !important; flex-shrink: 0 !important; margin: 0 !important;}\n .fm-cat-link:hover .fm-cat-icon { opacity: 1 !important; color: var(--fm-accent) !important; }\n\n \/* --- Scrolling Text (Marquee) System --- *\/\n .fm-cat-text-wrap {\n flex: 1 !important;\n overflow: hidden !important;\n white-space: nowrap !important; \n position: relative !important;\n }\n .fm-cat-text-wrap.has-overflow {\n -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);\n mask-image: linear-gradient(to right, #000 85%, transparent 100%);\n }\n .fm-cat-text {\n display: inline-block !important;\n white-space: nowrap !important;\n margin: 0 !important;\n padding: 0 !important;\n }\n .fm-cat-text.is-long {\n animation: fm-marquee 4s linear infinite alternate;\n animation-play-state: paused; \n }\n .fm-cat-link:hover .fm-cat-text.is-long {\n animation-play-state: running; \n }\n\n @keyframes fm-marquee {\n 0%, 15% { transform: translateX(0); } \n 85%, 100% { transform: translateX(var(--move-dist)); } \n }\n\n \/* --- Bottom Link --- *\/\n .fm-view-all {\n display: flex !important; align-items: center !important; gap: 4px !important; padding: 12px 20px 16px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; font-size: 12px !important; font-weight: 500 !important; text-decoration: none !important; color: var(--fm-accent) !important; transition: filter 0.2s !important; margin: 0 !important;\n }\n .fm-view-all:hover { filter: brightness(1.3) !important; }\n\n \/* --- Settings Panel --- *\/\n .fm-settings { padding: 16px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }\n .fm-label { display: block !important; font-size: 12px !important; font-weight: 500 !important; color: #d1d5db !important; margin: 0 0 8px 0 !important; }\n .fm-slider { width: 100% !important; accent-color: var(--fm-accent) !important; cursor: pointer !important; margin: 0 !important;}\n \n .fm-color-group { display: flex !important; gap: 8px !important; margin: 0 !important;}\n .fm-color-btn {\n width: 22px !important; height: 22px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer !important; transition: transform 0.2s !important; padding: 0 !important; min-width: unset !important; margin: 0 !important;\n }\n .fm-color-btn.active { border-color: #fff !important; transform: scale(1.15) !important; }\n \n .fm-reset-btn {\n width: 100% !important; padding: 10px !important; background-color: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 6px !important; color: #fff !important; font-size: 12px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: background 0.2s !important; margin: 4px 0 0 0 !important; min-width: unset !important;\n }\n .fm-reset-btn:hover { background-color: rgba(255,255,255,0.15) !important; }\n\n \/* --- Floating Mini Button --- *\/\n .fm-float-btn {\n position: fixed !important; bottom: 24px !important; right: 24px !important; z-index: 99999 !important; background-color: var(--fm-accent) !important; color: #fff !important; padding: 14px !important; border-radius: 50px !important; border: none !important; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.4) !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; transition: transform 0.2s !important; margin: 0 !important; min-width: unset !important; line-height: 1 !important;\n }\n .fm-float-btn:hover { transform: scale(1.08) !important; }\n \/* \u0e19\u0e33 text-transform: uppercase !important; \u0e2d\u0e2d\u0e01 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e44\u0e21\u0e48\u0e1a\u0e31\u0e07\u0e04\u0e31\u0e1a\u0e1e\u0e34\u0e21\u0e1e\u0e4c\u0e43\u0e2b\u0e0d\u0e48 *\/\n .fm-float-text { display: none; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; padding: 0 4px !important; white-space: nowrap !important; margin: 0 !important;}\n .fm-float-btn:hover .fm-float-text { display: block !important; }\n\n \/* Utils *\/\n .fm-hidden { display: none !important; }\n<\/style>\n\n<div id=\"ipcam-fm-wrapper\" class=\"notranslate\" data-no-translation=\"true\">\n \n \n <nav id=\"fm-main-nav\" class=\"fm-nav fm-hidden\" aria-label=\"Product Categories\">\n \n \n <div id=\"fm-header\" class=\"fm-header\">\n <div class=\"fm-title-group\">\n <i data-lucide=\"move\" style=\"width:14px; height:14px; color: var(--fm-accent);\"><\/i>\n <span id=\"fm-title-text\">Quick Menu<\/span>\n <\/div>\n <div class=\"fm-actions\">\n <button id=\"fm-btn-settings\" class=\"fm-btn-icon\" title=\"Settings\"><i data-lucide=\"settings\" style=\"width:14px; height:14px;\"><\/i><\/button>\n <button id=\"fm-btn-back\" class=\"fm-btn-icon fm-hidden\" title=\"Back\"><i data-lucide=\"arrow-left\" style=\"width:14px; height:14px;\"><\/i><\/button>\n <button id=\"fm-btn-toggle\" class=\"fm-btn-icon\" title=\"Minimize\">\n <i data-lucide=\"chevron-up\" id=\"fm-icon-up\" style=\"width:16px; height:16px;\"><\/i>\n <i data-lucide=\"chevron-down\" id=\"fm-icon-down\" style=\"width:16px; height:16px;\" class=\"fm-hidden\"><\/i>\n <\/button>\n <button id=\"fm-btn-close\" class=\"fm-btn-icon fm-btn-close\" title=\"Close\"><i data-lucide=\"x\" style=\"width:16px; height:16px;\"><\/i><\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"fm-content-wrapper\" class=\"fm-content fm-open\">\n \n \n <div id=\"fm-view-categories\">\n <ul id=\"fm-category-list\" class=\"fm-list\">\n \n <\/ul>\n <a href=\"https:\/\/ipcamstore.net\/th\/store\/\" id=\"fm-view-all-link\" class=\"fm-view-all\">\n View All Products <i data-lucide=\"chevron-right\" style=\"width:14px; height:14px;\"><\/i>\n <\/a>\n <\/div>\n\n \n <div id=\"fm-view-settings\" class=\"fm-settings fm-hidden\">\n <div>\n <label class=\"fm-label\">\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e48\u0e07\u0e43\u0e2a: <span id=\"fm-opacity-label\">55%<\/span><\/label>\n <input type=\"range\" id=\"fm-input-opacity\" min=\"0.2\" max=\"1\" step=\"0.05\" class=\"fm-slider\">\n <\/div>\n <div>\n <label class=\"fm-label\">\u0e2a\u0e35\u0e44\u0e2e\u0e44\u0e25\u0e17\u0e4c\u0e40\u0e21\u0e19\u0e39<\/label>\n <div id=\"fm-color-picker\" class=\"fm-color-group\"><\/div>\n <\/div>\n <button id=\"fm-btn-reset\" class=\"fm-reset-btn\">\n <i data-lucide=\"refresh-cw\" style=\"width:14px; height:14px;\"><\/i> Reset Position\n <\/button>\n <\/div>\n \n <\/div>\n <\/nav>\n\n \n <button id=\"fm-floating-btn\" class=\"fm-float-btn fm-hidden\" aria-label=\"Show Menu\">\n <i data-lucide=\"layers\" style=\"width:20px; height:20px;\"><\/i>\n <span class=\"fm-float-text\">Products<\/span>\n <\/button>\n\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n \n \/\/ ==========================================\n \/\/ \u2699\ufe0f 1. \u0e42\u0e0b\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \n \/\/ ==========================================\n const PRODUCT_CATEGORIES = [\n { name: \"Accessories\", url: \"https:\/\/ipcamstore.net\/product-category\/accessories\/\", icon: \"solar-panel\" },\n { name: \"Battery-Powered Security Cameras\", url: \"https:\/\/ipcamstore.net\/product-category\/battery-powered-security-cameras\/\", icon: \"battery-charging\" },\n { name: \"Cellular Security Cameras\", url: \"https:\/\/ipcamstore.net\/product-category\/cellular-security-cameras\/\", icon: \"card-sim\" },\n { name: \"Dual-Lens Security Cameras\", url: \"https:\/\/ipcamstore.net\/product-category\/dual-lens-security-cameras\/\", icon: \"blend\" }, \n { name: \"Home Hub\", url: \"https:\/\/ipcamstore.net\/product-category\/home-hub\/\", icon: \"house\" }, \n { name: \"PoE IP Cameras & NVRs\", url: \"https:\/\/ipcamstore.net\/product-category\/poe-ip-cameras-nvrs\/\", icon: \"cctv\" },\n { name: \"Security Camera Systems\", url: \"https:\/\/ipcamstore.net\/product-category\/security-camera-systems\/\", icon: \"webcam\" },\n { name: \"Video Doorbells\", url: \"https:\/\/ipcamstore.net\/product-category\/video-doorbells\/\", icon: \"bell-ring\" }, \n { name: \"Wi-Fi Cameras & NVRs\", url: \"https:\/\/ipcamstore.net\/product-category\/wi-fi-cameras-nvrs\/\", icon: \"wifi\" }\n ];\n\n const THEME_COLORS = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];\n\n \/\/ ==========================================\n \/\/ \ud83c\udf1f \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1e\u0e34\u0e40\u0e28\u0e29: \u0e0a\u0e48\u0e27\u0e22\u0e40\u0e15\u0e34\u0e21 URL \u0e20\u0e32\u0e29\u0e32\u0e43\u0e2b\u0e49\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34 \n \/\/ ==========================================\n function getLocalizedUrl(targetUrl) {\n if (!targetUrl.startsWith('\/')) return targetUrl;\n\n const pathMatch = window.location.pathname.match(\/^\\\/([a-z]{2}(-[a-z]{2})?)\\\/\/i);\n const langPrefix = pathMatch ? '\/' + pathMatch[1] : '';\n \n let finalUrl = targetUrl;\n \n if (langPrefix && !targetUrl.startsWith(langPrefix + '\/')) {\n finalUrl = langPrefix + targetUrl;\n }\n \n const urlParams = new URLSearchParams(window.location.search);\n const langParam = urlParams.get('lang');\n \n if (langParam) {\n finalUrl += (finalUrl.includes('?') ? '&' : '?') + 'lang=' + langParam;\n }\n\n return finalUrl;\n }\n\n \/\/ ==========================================\n \/\/ \ud83d\udcbb 2. \u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e2b\u0e25\u0e31\u0e07\n \/\/ ==========================================\n let state = {\n isOpen: true,\n isVisible: true,\n showSettings: false,\n opacity: 0.55, \n themeColor: '#10b981', \n position: { x: 20, y: 20 }\n };\n\n let isDragging = false;\n let dragOffset = { x: 0, y: 0 };\n let timers = { collapse: null, hide: null };\n let hasInteracted = false;\n\n const nav = document.getElementById('fm-main-nav');\n const floatBtn = document.getElementById('fm-floating-btn');\n const contentWrapper = document.getElementById('fm-content-wrapper');\n const header = document.getElementById('fm-header');\n \n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2b\u0e21\u0e27\u0e14\u0e2b\u0e21\u0e39\u0e48\u0e25\u0e07\u0e43\u0e19 HTML \n document.getElementById('fm-category-list').innerHTML = PRODUCT_CATEGORIES.map(cat => `\n <li>\n <a href=\"${getLocalizedUrl(cat.url)}\" class=\"fm-cat-link\">\n <i data-lucide=\"${cat.icon}\" class=\"fm-cat-icon\"><\/i>\n <div class=\"fm-cat-text-wrap\">\n <span class=\"fm-cat-text\">${cat.name}<\/span>\n <\/div>\n <\/a>\n <\/li>\n `).join('');\n\n document.getElementById('fm-view-all-link').href = getLocalizedUrl('https:\/\/ipcamstore.net\/th\/store\/');\n\n \/\/ \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1b\u0e38\u0e48\u0e21\u0e40\u0e25\u0e37\u0e2d\u0e01\u0e2a\u0e35\n document.getElementById('fm-color-picker').innerHTML = THEME_COLORS.map(color => `\n <button class=\"fm-color-btn\" style=\"background-color: ${color};\" data-color=\"${color}\"><\/button>\n `).join('');\n\n \/\/ Render Icons\n lucide.createIcons();\n\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e04\u0e33\u0e19\u0e27\u0e13\u0e41\u0e25\u0e30\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e15\u0e31\u0e27\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e27\u0e34\u0e48\u0e07\u0e2b\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e25\u0e49\u0e19\n function checkTextOverflow() {\n const wasHidden = nav.classList.contains('fm-hidden');\n if (wasHidden) {\n nav.style.visibility = 'hidden';\n nav.classList.remove('fm-hidden');\n }\n\n document.querySelectorAll('.fm-cat-link').forEach(link => {\n const wrap = link.querySelector('.fm-cat-text-wrap');\n const text = link.querySelector('.fm-cat-text');\n if (text && wrap) {\n if (text.scrollWidth > wrap.clientWidth + 2) {\n text.classList.add('is-long');\n wrap.classList.add('has-overflow');\n const moveDist = text.scrollWidth - wrap.clientWidth + 10;\n text.style.setProperty('--move-dist', `-${moveDist}px`);\n } else {\n text.classList.remove('is-long');\n wrap.classList.remove('has-overflow');\n }\n }\n });\n\n if (wasHidden) {\n nav.classList.add('fm-hidden');\n nav.style.visibility = '';\n }\n }\n\n function getDefaultPosition() {\n return {\n x: window.innerWidth - 270,\n y: Math.max(20, window.innerHeight - Math.min(600, window.innerHeight * 0.8))\n };\n }\n\n function validatePosition(x, y) {\n const maxX = window.innerWidth - 250;\n const menuHeight = nav.offsetHeight || 400; \n const maxY = window.innerHeight - Math.min(50, menuHeight);\n \n return {\n x: Math.max(0, Math.min(x, maxX)),\n y: Math.max(0, Math.min(y, Math.max(0, maxY)))\n };\n }\n\n function initApp() {\n const saved = localStorage.getItem('ipcam_menu_prefs_v4'); \n \n if (saved) {\n try {\n const data = JSON.parse(saved);\n state.isOpen = data.isOpen;\n state.isVisible = data.isVisible;\n state.opacity = data.opacity || 0.55;\n state.themeColor = data.themeColor || '#10b981';\n state.position = validatePosition(data.position.x, data.position.y);\n } catch(e) {}\n } else {\n state.position = getDefaultPosition();\n timers.collapse = setTimeout(() => { state.isOpen = false; renderDOM(); saveState(); }, 5000);\n timers.hide = setTimeout(() => { state.isVisible = false; renderDOM(); saveState(); }, 10000);\n }\n \n renderDOM();\n updateThemeStyles();\n \n setTimeout(checkTextOverflow, 100);\n \n document.getElementById('fm-input-opacity').value = state.opacity;\n }\n\n function clearTimers() {\n clearTimeout(timers.collapse);\n clearTimeout(timers.hide);\n hasInteracted = true;\n }\n\n function saveState() {\n localStorage.setItem('ipcam_menu_prefs_v4', JSON.stringify({\n isOpen: state.isOpen,\n isVisible: state.isVisible,\n opacity: state.opacity,\n themeColor: state.themeColor,\n position: state.position\n }));\n }\n\n function renderDOM() {\n if (state.isVisible) {\n nav.classList.remove('fm-hidden');\n floatBtn.classList.add('fm-hidden');\n } else {\n nav.classList.add('fm-hidden');\n floatBtn.classList.remove('fm-hidden');\n }\n\n nav.style.left = state.position.x + 'px';\n nav.style.top = state.position.y + 'px';\n\n if (state.isOpen) {\n contentWrapper.classList.replace('fm-closed', 'fm-open');\n document.getElementById('fm-icon-up').classList.add('fm-hidden');\n document.getElementById('fm-icon-down').classList.remove('fm-hidden');\n } else {\n contentWrapper.classList.replace('fm-open', 'fm-closed');\n document.getElementById('fm-icon-up').classList.remove('fm-hidden');\n document.getElementById('fm-icon-down').classList.add('fm-hidden');\n }\n\n if (state.showSettings) {\n document.getElementById('fm-view-categories').classList.add('fm-hidden');\n document.getElementById('fm-view-settings').classList.remove('fm-hidden');\n document.getElementById('fm-title-text').innerText = 'Settings';\n document.getElementById('fm-btn-settings').classList.add('fm-hidden');\n document.getElementById('fm-btn-back').classList.remove('fm-hidden');\n } else {\n document.getElementById('fm-view-categories').classList.remove('fm-hidden');\n document.getElementById('fm-view-settings').classList.add('fm-hidden');\n document.getElementById('fm-title-text').innerText = 'Quick Menu';\n document.getElementById('fm-btn-settings').classList.remove('fm-hidden');\n document.getElementById('fm-btn-back').classList.add('fm-hidden');\n }\n\n document.querySelectorAll('.fm-color-btn').forEach(btn => {\n if(btn.dataset.color === state.themeColor) btn.classList.add('active');\n else btn.classList.remove('active');\n });\n }\n\n function updateThemeStyles() {\n document.documentElement.style.setProperty('--fm-accent', state.themeColor);\n document.documentElement.style.setProperty('--fm-bg-opacity', state.opacity);\n document.getElementById('fm-opacity-label').innerText = Math.round(state.opacity * 100) + '%';\n }\n\n function startDrag(clientX, clientY, e) {\n if (e.target.closest('button') || e.target.closest('input')) return;\n clearTimers();\n isDragging = true;\n dragOffset.x = clientX - state.position.x;\n dragOffset.y = clientY - state.position.y;\n nav.style.transform = 'scale(1.02)';\n }\n\n function doDrag(clientX, clientY) {\n if (!isDragging) return;\n state.position = validatePosition(clientX - dragOffset.x, clientY - dragOffset.y);\n nav.style.left = state.position.x + 'px';\n nav.style.top = state.position.y + 'px';\n }\n\n function endDrag() {\n if (!isDragging) return;\n isDragging = false;\n nav.style.transform = 'scale(1)';\n saveState();\n }\n\n header.addEventListener('mousedown', (e) => startDrag(e.clientX, e.clientY, e));\n window.addEventListener('mousemove', (e) => doDrag(e.clientX, e.clientY));\n window.addEventListener('mouseup', endDrag);\n\n header.addEventListener('touchstart', (e) => startDrag(e.touches[0].clientX, e.touches[0].clientY, e), {passive: false});\n window.addEventListener('touchmove', (e) => { if(isDragging){ e.preventDefault(); doDrag(e.touches[0].clientX, e.touches[0].clientY); }}, {passive: false});\n window.addEventListener('touchend', endDrag);\n\n window.addEventListener('resize', () => {\n state.position = validatePosition(state.position.x, state.position.y);\n nav.style.left = state.position.x + 'px';\n nav.style.top = state.position.y + 'px';\n });\n\n document.getElementById('fm-floating-btn').addEventListener('click', () => {\n clearTimers();\n state.isVisible = true;\n state.isOpen = true; \n renderDOM();\n saveState();\n });\n\n document.getElementById('fm-btn-close').addEventListener('click', () => {\n clearTimers();\n state.isVisible = false;\n renderDOM();\n saveState();\n });\n\n document.getElementById('fm-btn-toggle').addEventListener('click', () => {\n clearTimers();\n state.isOpen = !state.isOpen;\n renderDOM();\n saveState();\n });\n\n document.getElementById('fm-btn-settings').addEventListener('click', () => {\n clearTimers();\n state.showSettings = true;\n state.isOpen = true;\n renderDOM();\n });\n\n document.getElementById('fm-btn-back').addEventListener('click', () => {\n state.showSettings = false;\n renderDOM();\n });\n\n document.getElementById('fm-input-opacity').addEventListener('input', (e) => {\n state.opacity = e.target.value;\n updateThemeStyles();\n saveState();\n });\n\n document.querySelectorAll('.fm-color-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n state.themeColor = e.target.dataset.color;\n renderDOM();\n updateThemeStyles();\n saveState();\n });\n });\n\n document.getElementById('fm-btn-reset').addEventListener('click', () => {\n state.position = getDefaultPosition();\n renderDOM();\n saveState();\n });\n\n initApp();\n\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Reolink Camera Live Demo Control in Real-Time Watch a real-time Reolink live […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-8327","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Reolink Live Camera Demo | Watch and Control Online<\/title>\n<meta name=\"description\" content=\"Watch a real-time Reolink live camera demo and control the camera online. See actual image quality, zoom, and live CCTV performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ipcamshop.net\/th\/live\/\" \/>\n<meta property=\"og:locale\" content=\"th_TH\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reolink Live Camera Demo\" \/>\n<meta property=\"og:description\" content=\"Watch a real-time Reolink live camera demo and control the camera online. See actual image quality, zoom, and live CCTV performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ipcamshop.net\/th\/live\/\" \/>\n<meta property=\"og:site_name\" content=\"iPCAMShop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Ipcamshopthai\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T20:31:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 \u0e19\u0e32\u0e17\u0e35\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/\",\"url\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/\",\"name\":\"Reolink Live Camera Demo | Watch and Control Online\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/reolink-ptz-camera-live-view.webp\",\"datePublished\":\"2025-09-26T21:29:51+00:00\",\"dateModified\":\"2026-04-20T20:31:14+00:00\",\"description\":\"Watch a real-time Reolink live camera demo and control the camera online. See actual image quality, zoom, and live CCTV performance.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/#breadcrumb\"},\"inLanguage\":\"th\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ipcamshop.net\\\/live\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"th\",\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/reolink-ptz-camera-live-view.webp\",\"contentUrl\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/reolink-ptz-camera-live-view.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/live\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ipcamshop.net\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reolink Live Camera Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/#website\",\"url\":\"https:\\\/\\\/ipcamshop.net\\\/\",\"name\":\"iPCAMShop\",\"description\":\"Security Camera\",\"publisher\":{\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/#\\\/schema\\\/person\\\/62b329221cd75d138633ce768eae96e0\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ipcamshop.net\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"th\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/#\\\/schema\\\/person\\\/62b329221cd75d138633ce768eae96e0\",\"name\":\"iNoom\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"th\",\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/sh_logo-icon.webp\",\"url\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/sh_logo-icon.webp\",\"contentUrl\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/sh_logo-icon.webp\",\"width\":512,\"height\":512,\"caption\":\"iNoom\"},\"logo\":{\"@id\":\"https:\\\/\\\/ipcamshop.net\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2026\\\/03\\\/sh_logo-icon.webp\"},\"sameAs\":[\"https:\\\/\\\/ipcamstore.net\",\"https:\\\/\\\/www.facebook.com\\\/Ipcamshopthai\",\"https:\\\/\\\/www.youtube.com\\\/@ipcamshop\"],\"publishingPrinciples\":\"https:\\\/\\\/ipcamshop.net\\\/services\\\/home-security-systems\\\/\"}]}<\/script>\n","yoast_head_json":{"title":"Reolink \u0e14\u0e39\u0e2a\u0e14\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e08\u0e23\u0e34\u0e07 | \u0e17\u0e14\u0e25\u0e2d\u0e07\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c","description":"\u0e14\u0e39\u0e2a\u0e14\u0e01\u0e25\u0e49\u0e2d\u0e07 Reolink \u0e02\u0e2d\u0e07\u0e08\u0e23\u0e34\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e25\u0e44\u0e17\u0e21\u0e4c \u0e14\u0e39\u0e20\u0e32\u0e1e\u0e08\u0e23\u0e34\u0e07 \u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e0b\u0e39\u0e21 \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e15\u0e31\u0e14\u0e2a\u0e34\u0e19\u0e43\u0e08","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ipcamshop.net\/th\/live\/","og_locale":"th_TH","og_type":"article","og_title":"Reolink Live Camera Demo","og_description":"Watch a real-time Reolink live camera demo and control the camera online. See actual image quality, zoom, and live CCTV performance.","og_url":"https:\/\/ipcamshop.net\/th\/live\/","og_site_name":"iPCAMShop","article_publisher":"https:\/\/www.facebook.com\/Ipcamshopthai","article_modified_time":"2026-04-20T20:31:14+00:00","og_image":[{"url":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 \u0e19\u0e32\u0e17\u0e35"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ipcamshop.net\/live\/","url":"https:\/\/ipcamshop.net\/live\/","name":"Reolink \u0e14\u0e39\u0e2a\u0e14\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e08\u0e23\u0e34\u0e07 | \u0e17\u0e14\u0e25\u0e2d\u0e07\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c","isPartOf":{"@id":"https:\/\/ipcamshop.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ipcamshop.net\/live\/#primaryimage"},"image":{"@id":"https:\/\/ipcamshop.net\/live\/#primaryimage"},"thumbnailUrl":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp","datePublished":"2025-09-26T21:29:51+00:00","dateModified":"2026-04-20T20:31:14+00:00","description":"\u0e14\u0e39\u0e2a\u0e14\u0e01\u0e25\u0e49\u0e2d\u0e07 Reolink \u0e02\u0e2d\u0e07\u0e08\u0e23\u0e34\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e2d\u0e2d\u0e19\u0e44\u0e25\u0e19\u0e4c\u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e25\u0e44\u0e17\u0e21\u0e4c \u0e14\u0e39\u0e20\u0e32\u0e1e\u0e08\u0e23\u0e34\u0e07 \u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e0b\u0e39\u0e21 \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e15\u0e31\u0e14\u0e2a\u0e34\u0e19\u0e43\u0e08","breadcrumb":{"@id":"https:\/\/ipcamshop.net\/live\/#breadcrumb"},"inLanguage":"th","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ipcamshop.net\/live\/"]}]},{"@type":"ImageObject","inLanguage":"th","@id":"https:\/\/ipcamshop.net\/live\/#primaryimage","url":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp","contentUrl":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/reolink-ptz-camera-live-view.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/ipcamshop.net\/live\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ipcamshop.net\/"},{"@type":"ListItem","position":2,"name":"Reolink Live Camera Demo"}]},{"@type":"WebSite","@id":"https:\/\/ipcamshop.net\/#website","url":"https:\/\/ipcamshop.net\/","name":"iPCAMShop","description":"\u0e01\u0e25\u0e49\u0e2d\u0e07\u0e27\u0e07\u0e08\u0e23\u0e1b\u0e34\u0e14","publisher":{"@id":"https:\/\/ipcamshop.net\/#\/schema\/person\/62b329221cd75d138633ce768eae96e0"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ipcamshop.net\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"th"},{"@type":["Person","Organization"],"@id":"https:\/\/ipcamshop.net\/#\/schema\/person\/62b329221cd75d138633ce768eae96e0","name":"\u0e44\u0e2d\u0e19\u0e38\u0e21","image":{"@type":"ImageObject","inLanguage":"th","@id":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/sh_logo-icon.webp","url":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/sh_logo-icon.webp","contentUrl":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/sh_logo-icon.webp","width":512,"height":512,"caption":"iNoom"},"logo":{"@id":"https:\/\/ipcamshop.net\/wp-content\/uploads\/sites\/3\/2026\/03\/sh_logo-icon.webp"},"sameAs":["https:\/\/ipcamstore.net","https:\/\/www.facebook.com\/Ipcamshopthai","https:\/\/www.youtube.com\/@ipcamshop"],"publishingPrinciples":"https:\/\/ipcamshop.net\/services\/home-security-systems\/"}]}},"_links":{"self":[{"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/pages\/8327","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/comments?post=8327"}],"version-history":[{"count":1575,"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/pages\/8327\/revisions"}],"predecessor-version":[{"id":10829,"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/pages\/8327\/revisions\/10829"}],"wp:attachment":[{"href":"https:\/\/ipcamshop.net\/th\/wp-json\/wp\/v2\/media?parent=8327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}