openvibers/openvibe.live setup-guide.html
setup-guide.html
| 1 | |
| 2 | <html lang="en" data-theme="dark"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>OpenVibe.Live Setup Guide</title> |
| 7 | <!-- Icons: the OpenVibe glyphs (openvibe.design/icons), not Font Awesome; they draw the fa-* names in place. --> |
| 8 | <script src="https://openvibe.network/shared/ov-glyphs.js" defer></script> |
| 9 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css" id="hljs-theme"> |
| 10 | <style> |
| 11 | :root{--bg:#0d1117;--bg2:#161b22;--bg3:#1c2128;--text:#e6edf3;--text2:#8b949e;--accent:#58a6ff;--accent2:#3fb950;--border:#30363d;--code-bg:#0d1117;--card-bg:#161b22;--shadow:0 2px 8px rgba(0,0,0,.3);--hover:#1f6feb;--warn:#d29922;--err:#f85149;--tag-bg:#1f6feb22;--tag-text:#58a6ff;--sidebar-w:280px;--search-bg:#0d1117;--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;--mono:'SF Mono','Cascadia Code','Fira Code',Consolas,monospace} |
| 12 | [data-theme="light"]{--bg:#fff;--bg2:#f6f8fa;--bg3:#eaeef2;--text:#1f2328;--text2:#656d76;--accent:#0969da;--accent2:#1a7f37;--border:#d0d7de;--code-bg:#f6f8fa;--card-bg:#fff;--shadow:0 2px 8px rgba(0,0,0,.08);--hover:#0550ae;--warn:#9a6700;--err:#cf222e;--tag-bg:#ddf4ff;--tag-text:#0969da;--search-bg:#f6f8fa} |
| 13 | *{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;transition:background .3s,color .3s} |
| 14 | /* Sidebar */ |
| 15 | .sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--bg2);border-right:1px solid var(--border);overflow-y:auto;z-index:100;transition:transform .3s} |
| 16 | .sidebar-header{padding:20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px} |
| 17 | .sidebar-header h2{font-size:1rem;color:var(--accent)} |
| 18 | .sidebar-header i{color:var(--accent);font-size:1.2rem} |
| 19 | .nav-group{padding:8px 0} |
| 20 | .nav-group-title{padding:6px 20px;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);font-weight:600} |
| 21 | .nav-link{display:block;padding:5px 20px 5px 28px;font-size:.82rem;color:var(--text2);text-decoration:none;transition:all .15s;border-left:2px solid transparent} |
| 22 | .nav-link:hover,.nav-link.active{color:var(--accent);background:var(--tag-bg);border-left-color:var(--accent)} |
| 23 | .nav-link i{width:18px;text-align:center;margin-right:6px;font-size:.75rem} |
| 24 | /* Main */ |
| 25 | .main{margin-left:var(--sidebar-w);padding:0} |
| 26 | /* Top bar */ |
| 27 | .topbar{position:sticky;top:0;z-index:90;background:var(--bg2);border-bottom:1px solid var(--border);padding:12px 32px;display:flex;align-items:center;gap:16px;backdrop-filter:blur(10px)} |
| 28 | .search-box{flex:1;max-width:500px;position:relative} |
| 29 | .search-box input{width:100%;padding:8px 14px 8px 36px;background:var(--search-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:.9rem;outline:none;transition:border .2s} |
| 30 | .search-box input:focus{border-color:var(--accent)} |
| 31 | .search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text2);font-size:.85rem} |
| 32 | .search-count{font-size:.75rem;color:var(--text2);margin-left:8px} |
| 33 | .topbar-right{display:flex;gap:10px;align-items:center;margin-left:auto} |
| 34 | .theme-btn,.menu-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);cursor:pointer;font-size:.9rem;transition:all .2s} |
| 35 | .theme-btn:hover,.menu-btn:hover{border-color:var(--accent);color:var(--accent)} |
| 36 | .menu-btn{display:none} |
| 37 | /* Content */ |
| 38 | .content{max-width:900px;margin:0 auto;padding:32px} |
| 39 | .hero{text-align:center;padding:48px 0 32px;border-bottom:1px solid var(--border);margin-bottom:40px} |
| 40 | .hero h1{font-size:2.2rem;margin-bottom:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} |
| 41 | .hero p{color:var(--text2);font-size:1.05rem;max-width:600px;margin:0 auto} |
| 42 | .hero-tags{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:8px} |
| 43 | .hero-tag{background:var(--tag-bg);color:var(--tag-text);padding:4px 12px;border-radius:20px;font-size:.8rem} |
| 44 | /* Sections */ |
| 45 | section{margin-bottom:48px;scroll-margin-top:80px} |
| 46 | section h2{font-size:1.5rem;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid var(--border);display:flex;align-items:center;gap:10px} |
| 47 | section h2 i{color:var(--accent);font-size:1.1rem} |
| 48 | section h3{font-size:1.15rem;margin:20px 0 10px;color:var(--accent)} |
| 49 | section h4{font-size:1rem;margin:16px 0 8px;color:var(--text)} |
| 50 | p,li{color:var(--text);margin-bottom:8px} |
| 51 | ul,ol{padding-left:24px;margin-bottom:16px} |
| 52 | li{margin-bottom:4px} |
| 53 | a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline} |
| 54 | strong{color:var(--text)} |
| 55 | /* Code blocks */ |
| 56 | .code-wrapper{position:relative;margin:16px 0;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--code-bg)} |
| 57 | .code-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:.75rem;color:var(--text2)} |
| 58 | .code-lang{display:flex;align-items:center;gap:6px} |
| 59 | .code-actions{display:flex;gap:6px} |
| 60 | .code-btn{background:none;border:1px solid var(--border);border-radius:4px;padding:3px 8px;color:var(--text2);cursor:pointer;font-size:.72rem;transition:.15s;display:flex;align-items:center;gap:4px} |
| 61 | .code-btn:hover{border-color:var(--accent);color:var(--accent)} |
| 62 | .code-btn.copied{border-color:var(--accent2);color:var(--accent2)} |
| 63 | .code-wrapper pre{margin:0;padding:16px;overflow-x:auto;font-family:var(--mono);font-size:.87rem;line-height:1.6} |
| 64 | .code-wrapper pre code{font-family:inherit;background:none;padding:0} |
| 65 | .code-wrapper[contenteditable="true"] pre{outline:none} |
| 66 | .code-wrapper.editing{border-color:var(--warn)} |
| 67 | .code-wrapper.editing .code-header{background:color-mix(in srgb,var(--warn) 15%,var(--bg3))} |
| 68 | /* Tables */ |
| 69 | table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.88rem} |
| 70 | th,td{padding:10px 14px;text-align:left;border:1px solid var(--border)} |
| 71 | th{background:var(--bg3);font-weight:600;color:var(--text);font-size:.82rem;text-transform:uppercase;letter-spacing:.03em} |
| 72 | td{background:var(--bg2)} |
| 73 | tr:hover td{background:var(--bg3)} |
| 74 | /* Cards */ |
| 75 | .card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:20px;margin:16px 0;box-shadow:var(--shadow)} |
| 76 | .card.tip{border-left:4px solid var(--accent2)}.card.tip::before{content:'\f0eb';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--accent2);margin-right:8px} |
| 77 | .card.warn{border-left:4px solid var(--warn)}.card.warn::before{content:'\f071';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--warn);margin-right:8px} |
| 78 | .card.danger{border-left:4px solid var(--err)}.card.danger::before{content:'\f06a';font-family:'Font Awesome 6 Free';font-weight:900;color:var(--err);margin-right:8px} |
| 79 | /* Highlight for search */ |
| 80 | mark{background:var(--warn);color:#000;border-radius:2px;padding:0 2px} |
| 81 | /* Scrollbar */ |
| 82 | ::-webkit-scrollbar{width:8px;height:8px} |
| 83 | ::-webkit-scrollbar-track{background:var(--bg)} |
| 84 | ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px} |
| 85 | ::-webkit-scrollbar-thumb:hover{background:var(--text2)} |
| 86 | /* Responsive */ |
| 87 | @media(max-width:900px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.menu-btn{display:block}.content{padding:20px}} |
| 88 | .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:99} |
| 89 | .overlay.open{display:block} |
| 90 | /* TOC progress */ |
| 91 | .progress-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:200;transition:width .15s} |
| 92 | /* Fade in */ |
| 93 | section{opacity:0;transform:translateY(12px);transition:opacity .4s,transform .4s} |
| 94 | section.visible{opacity:1;transform:none} |
| 95 | </style> |
| 96 | </head> |
| 97 | <body> |
| 98 | <div class="progress-bar" id="progress" style="width:0%"></div> |
| 99 | |
| 100 | <!-- Overlay for mobile sidebar --> |
| 101 | <div class="overlay" id="overlay" onclick="toggleSidebar()"></div> |
| 102 | |
| 103 | <!-- Sidebar --> |
| 104 | <nav class="sidebar" id="sidebar"> |
| 105 | <div class="sidebar-header"> |
| 106 | <i class="fa-solid fa-tower-broadcast"></i> |
| 107 | <h2>OpenVibe.Live</h2> |
| 108 | </div> |
| 109 | |
| 110 | <div class="nav-group"> |
| 111 | <div class="nav-group-title">Setup Guide</div> |
| 112 | <a class="nav-link" href="#overview"><i class="fa-solid fa-house"></i>Overview</a> |
| 113 | <a class="nav-link" href="#ports"><i class="fa-solid fa-plug"></i>Ports & Services</a> |
| 114 | <a class="nav-link" href="#ovh-instance"><i class="fa-solid fa-server"></i>OVH Instance</a> |
| 115 | <a class="nav-link" href="#ssh-keys"><i class="fa-solid fa-key"></i>SSH Keys</a> |
| 116 | <a class="nav-link" href="#import-key"><i class="fa-solid fa-upload"></i>Import Key to OVH</a> |
| 117 | <a class="nav-link" href="#connect"><i class="fa-solid fa-terminal"></i>First Connection</a> |
| 118 | <a class="nav-link" href="#hardening"><i class="fa-solid fa-shield-halved"></i>System Hardening</a> |
| 119 | <a class="nav-link" href="#nodejs"><i class="fa-brands fa-node-js"></i>Node.js via nvm</a> |
| 120 | <a class="nav-link" href="#clone"><i class="fa-brands fa-github"></i>Clone & Install</a> |
| 121 | <a class="nav-link" href="#env"><i class="fa-solid fa-gear"></i>Configure .env</a> |
| 122 | <a class="nav-link" href="#dirs"><i class="fa-solid fa-folder-tree"></i>Runtime Dirs</a> |
| 123 | <a class="nav-link" href="#bootstrap"><i class="fa-solid fa-rocket"></i>Bootstrap App</a> |
| 124 | <a class="nav-link" href="#cloudflare-dns"><i class="fa-solid fa-cloud"></i>Cloudflare DNS</a> |
| 125 | <a class="nav-link" href="#letsencrypt"><i class="fa-solid fa-lock"></i>Let's Encrypt</a> |
| 126 | <a class="nav-link" href="#cf-strict"><i class="fa-solid fa-shield"></i>Full (strict) SSL</a> |
| 127 | <a class="nav-link" href="#real-ip"><i class="fa-solid fa-eye"></i>Restore Visitor IP</a> |
| 128 | <a class="nav-link" href="#nginx-final"><i class="fa-solid fa-server"></i>Final Nginx Config</a> |
| 129 | <a class="nav-link" href="#firewall"><i class="fa-solid fa-fire"></i>Firewall (UFW)</a> |
| 130 | <a class="nav-link" href="#ovh-secgroup"><i class="fa-solid fa-network-wired"></i>OVH Security Groups</a> |
| 131 | <a class="nav-link" href="#systemd"><i class="fa-solid fa-play"></i>systemd Service</a> |
| 132 | <a class="nav-link" href="#close-reg"><i class="fa-solid fa-user-lock"></i>Close Registration</a> |
| 133 | <a class="nav-link" href="#fail2ban"><i class="fa-solid fa-ban"></i>fail2ban</a> |
| 134 | <a class="nav-link" href="#protocols"><i class="fa-solid fa-broadcast-tower"></i>Protocol Ports</a> |
| 135 | <a class="nav-link" href="#checks"><i class="fa-solid fa-clipboard-check"></i>Operational Checks</a> |
| 136 | <a class="nav-link" href="#summary-steps"><i class="fa-solid fa-list-ol"></i>Quick Summary</a> |
| 137 | <a class="nav-link" href="#security"><i class="fa-solid fa-lock"></i>Security Reminders</a> |
| 138 | </div> |
| 139 | |
| 140 | <div class="nav-group"> |
| 141 | <div class="nav-group-title">OVH Plan Guide</div> |
| 142 | <a class="nav-link" href="#ovh-exec"><i class="fa-solid fa-star"></i>Executive Summary</a> |
| 143 | <a class="nav-link" href="#ovh-limits"><i class="fa-solid fa-gauge"></i>Bottlenecks</a> |
| 144 | <a class="nav-link" href="#ovh-bandwidth"><i class="fa-solid fa-wifi"></i>Bandwidth Math</a> |
| 145 | <a class="nav-link" href="#ovh-storage"><i class="fa-solid fa-hard-drive"></i>Storage Math</a> |
| 146 | <a class="nav-link" href="#ovh-families"><i class="fa-solid fa-layer-group"></i>Plan Families</a> |
| 147 | <a class="nav-link" href="#ovh-methods"><i class="fa-solid fa-video"></i>By Streaming Method</a> |
| 148 | <a class="nav-link" href="#ovh-credit"><i class="fa-solid fa-dollar-sign"></i>$200 Credit Analysis</a> |
| 149 | <a class="nav-link" href="#ovh-scenarios"><i class="fa-solid fa-diagram-project"></i>Scenarios</a> |
| 150 | <a class="nav-link" href="#ovh-final"><i class="fa-solid fa-bullseye"></i>Final Recommendation</a> |
| 151 | </div> |
| 152 | </nav> |
| 153 | |
| 154 | <!-- Main --> |
| 155 | <div class="main" id="main"> |
| 156 | <div class="topbar"> |
| 157 | <button class="menu-btn" onclick="toggleSidebar()" aria-label="Menu"><i class="fa-solid fa-bars"></i></button> |
| 158 | <div class="search-box"> |
| 159 | <i class="fa-solid fa-magnifying-glass"></i> |
| 160 | <input type="text" id="searchInput" placeholder="Search guide... (Ctrl+K)" autocomplete="off"> |
| 161 | <span class="search-count" id="searchCount"></span> |
| 162 | </div> |
| 163 | <div class="topbar-right"> |
| 164 | <button class="theme-btn" onclick="toggleTheme()" id="themeBtn" aria-label="Toggle theme"><i class="fa-solid fa-moon"></i></button> |
| 165 | </div> |
| 166 | </div> |
| 167 | |
| 168 | <div class="content" id="content"> |
| 169 | <div class="hero"> |
| 170 | <h1><i class="fa-solid fa-tower-broadcast"></i> OpenVibe.Live Setup Guide</h1> |
| 171 | <p>Complete deployment guide: OVH Public Cloud + Ubuntu 25.04 + Cloudflare + Let's Encrypt + Nginx — plus OVH plan sizing analysis</p> |
| 172 | <div class="hero-tags"> |
| 173 | <span class="hero-tag"><i class="fa-solid fa-server"></i> OVH</span> |
| 174 | <span class="hero-tag"><i class="fa-brands fa-ubuntu"></i> Ubuntu 25.04</span> |
| 175 | <span class="hero-tag"><i class="fa-solid fa-cloud"></i> Cloudflare</span> |
| 176 | <span class="hero-tag"><i class="fa-solid fa-lock"></i> Let's Encrypt</span> |
| 177 | <span class="hero-tag"><i class="fa-solid fa-server"></i> Nginx</span> |
| 178 | <span class="hero-tag"><i class="fa-brands fa-node-js"></i> Node 20</span> |
| 179 | </div> |
| 180 | </div> |
| 181 | |
| 182 | <!-- S1: Overview --> |
| 183 | <section id="overview"> |
| 184 | <h2><i class="fa-solid fa-house"></i> 1. Recommended Production Model</h2> |
| 185 | <p>For a small or medium public deployment, the safest baseline is:</p> |
| 186 | <ul> |
| 187 | <li>OVH Public Cloud instance in the nearest region to your users</li> |
| 188 | <li>Ubuntu 25.04</li> |
| 189 | <li>Cloudflare proxy for the main website</li> |
| 190 | <li>Nginx on the origin server</li> |
| 191 | <li>Let's Encrypt certificate on the origin</li> |
| 192 | <li>Cloudflare SSL/TLS mode set to <strong>Full (strict)</strong></li> |
| 193 | <li>Node 20 LTS via <strong>nvm</strong> (Node Version Manager)</li> |
| 194 | <li><code>systemd</code> for process supervision</li> |
| 195 | <li><code>ufw</code> on the box</li> |
| 196 | <li>Only open the extra streaming ports you actively use</li> |
| 197 | </ul> |
| 198 | <div class="card tip">For most operators, expose only <strong>80</strong> and <strong>443</strong> first. Add RTMP, JSMPEG, or WebRTC ports later only if you really need them.</div> |
| 199 | </section> |
| 200 | |
| 201 | <!-- S2: Ports --> |
| 202 | <section id="ports"> |
| 203 | <h2><i class="fa-solid fa-plug"></i> 2. What OpenVibe.Live Exposes</h2> |
| 204 | <p>The current server in <code>server/index.js</code> provides:</p> |
| 205 | <ul> |
| 206 | <li>HTTP on <code>PORT</code>, default <code>3000</code></li> |
| 207 | <li>WebSocket upgrades on <code>/ws/chat</code>, <code>/ws/broadcast</code>, <code>/ws/control</code>, and <code>/ws/call</code></li> |
| 208 | <li>Optional RTMP ingest</li> |
| 209 | <li>Optional JSMPEG relay</li> |
| 210 | <li>Optional WebRTC / <code>mediasoup</code></li> |
| 211 | <li>Persistent data under <code>data/</code></li> |
| 212 | </ul> |
| 213 | <h3>Typical ports</h3> |
| 214 | <table> |
| 215 | <thead><tr><th>Port</th><th>Protocol</th><th>Purpose</th></tr></thead> |
| 216 | <tbody> |
| 217 | <tr><td>3000</td><td>TCP</td><td>Internal Node app (behind Nginx)</td></tr> |
| 218 | <tr><td>80</td><td>TCP</td><td>HTTP redirect & Let's Encrypt validation</td></tr> |
| 219 | <tr><td>443</td><td>TCP</td><td>HTTPS to Nginx</td></tr> |
| 220 | <tr><td>1935</td><td>TCP</td><td>RTMP ingest</td></tr> |
| 221 | <tr><td>9710</td><td>TCP</td><td>JSMPEG video relay</td></tr> |
| 222 | <tr><td>9711</td><td>TCP</td><td>JSMPEG audio relay</td></tr> |
| 223 | <tr><td>4443</td><td>TCP/UDP</td><td>WebRTC entry point</td></tr> |
| 224 | <tr><td>10000-10100</td><td>UDP</td><td>mediasoup RTP range</td></tr> |
| 225 | <tr><td>9935</td><td>TCP</td><td>HTTP-FLV playback (if enabled)</td></tr> |
| 226 | </tbody> |
| 227 | </table> |
| 228 | <div class="card warn">Do not expose all of them by default. Only open ports for protocols you actively use.</div> |
| 229 | </section> |
| 230 | |
| 231 | <!-- S3: OVH Instance --> |
| 232 | <section id="ovh-instance"> |
| 233 | <h2><i class="fa-solid fa-server"></i> 3. OVH Instance Creation</h2> |
| 234 | <p>From the OVH "Create an instance" flow:</p> |
| 235 | <ul> |
| 236 | <li><strong>Template:</strong> your chosen instance flavor, e.g. <code>B3-16</code></li> |
| 237 | <li><strong>Region:</strong> nearest to your users, e.g. Seattle / <code>US-WEST-LZ-SEA-A</code></li> |
| 238 | <li><strong>Image:</strong> <code>Ubuntu 25.04</code></li> |
| 239 | <li><strong>SSH key:</strong> required</li> |
| 240 | </ul> |
| 241 | <div class="card danger">OVH only accepts <strong>RSA</strong> and <strong>ECDSA</strong> SSH keys. <strong>ED25519 keys are not accepted</strong> in this flow.</div> |
| 242 | <p>So for this deployment, generate either:</p> |
| 243 | <ul> |
| 244 | <li><strong>ECDSA P-384</strong> — recommended if OVH accepts it in your project flow</li> |
| 245 | <li><strong>RSA 4096</strong> — safest fallback for maximum compatibility</li> |
| 246 | </ul> |
| 247 | </section> |
| 248 | |
| 249 | <!-- S4: SSH Keys --> |
| 250 | <section id="ssh-keys"> |
| 251 | <h2><i class="fa-solid fa-key"></i> 4. Generate an SSH Key for OVH</h2> |
| 252 | <p>Run these commands on your <strong>local machine</strong>, not on the server.</p> |
| 253 | |
| 254 | <h3>Option A: ECDSA P-384 key</h3> |
| 255 | <pre><code class="language-bash">mkdir -p ~/.ssh |
| 256 | chmod 700 ~/.ssh |
| 257 | ssh-keygen -t ecdsa -b 384 -f ~/.ssh/ovh_openvibelive_ecdsa -C "ovh-openvibelive"</code></pre> |
| 258 | |
| 259 | <h3>Option B: RSA 4096 key</h3> |
| 260 | <pre><code class="language-bash">mkdir -p ~/.ssh |
| 261 | chmod 700 ~/.ssh |
| 262 | ssh-keygen -t rsa -b 4096 -o -a 100 -f ~/.ssh/ovh_openvibelive_rsa -C "ovh-openvibelive"</code></pre> |
| 263 | |
| 264 | <h3>Lock down the private key</h3> |
| 265 | <pre><code class="language-bash"># ECDSA |
| 266 | chmod 600 ~/.ssh/ovh_openvibelive_ecdsa |
| 267 | chmod 644 ~/.ssh/ovh_openvibelive_ecdsa.pub |
| 268 | |
| 269 | # RSA |
| 270 | chmod 600 ~/.ssh/ovh_openvibelive_rsa |
| 271 | chmod 644 ~/.ssh/ovh_openvibelive_rsa.pub</code></pre> |
| 272 | |
| 273 | <h3>Print the public key to paste into OVH</h3> |
| 274 | <pre><code class="language-bash"># ECDSA |
| 275 | cat ~/.ssh/ovh_openvibelive_ecdsa.pub |
| 276 | |
| 277 | # RSA |
| 278 | cat ~/.ssh/ovh_openvibelive_rsa.pub</code></pre> |
| 279 | <p>Copy the entire single-line public key into the OVH SSH key field.</p> |
| 280 | |
| 281 | <h3>Test the key fingerprint locally</h3> |
| 282 | <pre><code class="language-bash"># ECDSA |
| 283 | ssh-keygen -lf ~/.ssh/ovh_openvibelive_ecdsa.pub |
| 284 | |
| 285 | # RSA |
| 286 | ssh-keygen -lf ~/.ssh/ovh_openvibelive_rsa.pub</code></pre> |
| 287 | </section> |
| 288 | |
| 289 | <!-- S5: Import Key --> |
| 290 | <section id="import-key"> |
| 291 | <h2><i class="fa-solid fa-upload"></i> 5. Import the SSH Key into OVH</h2> |
| 292 | <ol> |
| 293 | <li>Go to your Public Cloud project</li> |
| 294 | <li>Open the SSH keys area, or paste the key directly during instance creation</li> |
| 295 | <li>Give the key a clear name, e.g. <code>openvibelive-seattle-prod</code></li> |
| 296 | <li>Paste the public key line from the <code>.pub</code> file</li> |
| 297 | <li>Create the instance with that key attached</li> |
| 298 | </ol> |
| 299 | <div class="card tip">OVH lets you store SSH keys in the control panel and reuse them across regions.</div> |
| 300 | </section> |
| 301 | |
| 302 | <!-- S6: Connect --> |
| 303 | <section id="connect"> |
| 304 | <h2><i class="fa-solid fa-terminal"></i> 6. Connect to the New Instance</h2> |
| 305 | <p>After the instance is created and shows as ready, connect over SSH. Most OVH Ubuntu images use the <code>ubuntu</code> user.</p> |
| 306 | |
| 307 | <h3>ECDSA example</h3> |
| 308 | <pre><code class="language-bash">ssh -i ~/.ssh/ovh_openvibelive_ecdsa ubuntu@YOUR_SERVER_IP</code></pre> |
| 309 | |
| 310 | <h3>RSA example</h3> |
| 311 | <pre><code class="language-bash">ssh -i ~/.ssh/ovh_openvibelive_rsa ubuntu@YOUR_SERVER_IP</code></pre> |
| 312 | |
| 313 | <h3>Optional: SSH config alias</h3> |
| 314 | <pre><code class="language-properties">Host openvibe.tools |
| 315 | HostName YOUR_SERVER_IP |
| 316 | User ubuntu |
| 317 | IdentityFile ~/.ssh/ovh_openvibelive_ecdsa |
| 318 | IdentitiesOnly yes</code></pre> |
| 319 | <p>Then connect with:</p> |
| 320 | <pre><code class="language-bash">ssh openvibe.tools</code></pre> |
| 321 | </section> |
| 322 | |
| 323 | <!-- S7: Hardening --> |
| 324 | <section id="hardening"> |
| 325 | <h2><i class="fa-solid fa-shield-halved"></i> 7. First-Login Hardening</h2> |
| 326 | <p>Run these commands on the server.</p> |
| 327 | |
| 328 | <h3>Update the box</h3> |
| 329 | <pre><code class="language-bash">sudo apt update |
| 330 | sudo apt full-upgrade -y |
| 331 | sudo apt autoremove -y</code></pre> |
| 332 | |
| 333 | <h3>Install baseline packages</h3> |
| 334 | <pre><code class="language-bash">sudo apt install -y \ |
| 335 | git curl wget unzip ca-certificates gnupg \ |
| 336 | nginx ffmpeg ufw fail2ban \ |
| 337 | build-essential python3 python3-pip jq</code></pre> |
| 338 | |
| 339 | <h3>Optional: create a dedicated app user</h3> |
| 340 | <pre><code class="language-bash">sudo adduser --disabled-password --gecos "" openvibelive |
| 341 | sudo usermod -aG sudo openvibelive</code></pre> |
| 342 | <p>Then add your public key for that user:</p> |
| 343 | <pre><code class="language-bash">sudo mkdir -p /home/openvibelive/.ssh |
| 344 | sudo nano /home/openvibelive/.ssh/authorized_keys |
| 345 | sudo chown -R openvibelive:openvibelive /home/openvibelive/.ssh |
| 346 | sudo chmod 700 /home/openvibelive/.ssh |
| 347 | sudo chmod 600 /home/openvibelive/.ssh/authorized_keys</code></pre> |
| 348 | |
| 349 | <h3>Harden SSH</h3> |
| 350 | <pre><code class="language-bash">sudo nano /etc/ssh/sshd_config</code></pre> |
| 351 | <p>Recommended settings:</p> |
| 352 | <pre><code class="language-properties">PermitRootLogin no |
| 353 | PasswordAuthentication no |
| 354 | PubkeyAuthentication yes |
| 355 | ChallengeResponseAuthentication no |
| 356 | UsePAM yes |
| 357 | X11Forwarding no</code></pre> |
| 358 | <p>Reload SSH:</p> |
| 359 | <pre><code class="language-bash">sudo systemctl reload ssh</code></pre> |
| 360 | <div class="card warn">Do not disable password auth until you have confirmed key login works.</div> |
| 361 | </section> |
| 362 | |
| 363 | <!-- S8: Node.js via nvm --> |
| 364 | <section id="nodejs"> |
| 365 | <h2><i class="fa-brands fa-node-js"></i> 8. Install Node.js via nvm</h2> |
| 366 | <p>We use <a href="https://github.com/nvm-sh/nvm" target="_blank">nvm</a> (Node Version Manager) instead of system packages. This avoids the recurring <code>/usr/bin/env: 'node': No such file or directory</code> problem where NodeSource installs <code>node</code> somewhere systemd can't find it.</p> |
| 367 | |
| 368 | <h3>Install nvm</h3> |
| 369 | <pre><code class="language-bash">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash</code></pre> |
| 370 | <p>Close and reopen your terminal (or source your profile) so nvm is available:</p> |
| 371 | <pre><code class="language-bash">source ~/.bashrc |
| 372 | command -v nvm # should print "nvm"</code></pre> |
| 373 | |
| 374 | <h3>Install Node 20 LTS</h3> |
| 375 | <pre><code class="language-bash">nvm install 20 |
| 376 | nvm alias default 20 # make it the default for new shells |
| 377 | node -v |
| 378 | npm -v</code></pre> |
| 379 | |
| 380 | <h3>Verify</h3> |
| 381 | <pre><code class="language-bash">which node # e.g. /home/ubuntu/.nvm/versions/node/v20.x.x/bin/node |
| 382 | which npm # same nvm-managed path</code></pre> |
| 383 | <div class="card warn"><i class="fa-solid fa-triangle-exclamation"></i> nvm installs node per-user under <code>~/.nvm/</code>. It is a shell function, not a binary — systemd can't see it directly. The systemd section below uses a wrapper script that sources nvm before launching the app.</div> |
| 384 | </section> |
| 385 | |
| 386 | <!-- S9: Clone --> |
| 387 | <section id="clone"> |
| 388 | <h2><i class="fa-brands fa-github"></i> 9. Clone OpenVibe.Live</h2> |
| 389 | <pre><code class="language-bash">cd /opt |
| 390 | sudo git clone https://github.com/OpenVibe.Live/OpenVibe.Live.com.git openvibelive |
| 391 | sudo chown -R $USER:$USER /opt/openvibelive |
| 392 | cd /opt/openvibelive |
| 393 | npm install</code></pre> |
| 394 | <p>If native modules later need rebuilding:</p> |
| 395 | <pre><code class="language-bash">npm rebuild</code></pre> |
| 396 | <div class="card tip">If <code>mediasoup</code> fails to compile, browser-native WebRTC broadcasting won't be ready until that's fixed.</div> |
| 397 | </section> |
| 398 | |
| 399 | <!-- S10: .env --> |
| 400 | <section id="env"> |
| 401 | <h2><i class="fa-solid fa-gear"></i> 10. Configure .env</h2> |
| 402 | <pre><code class="language-bash">cd /opt/openvibelive |
| 403 | cp .env.example .env |
| 404 | nano .env</code></pre> |
| 405 | |
| 406 | <h3>Recommended starting .env</h3> |
| 407 | <pre><code class="language-properties">ADMIN_USERNAME=admin |
| 408 | ADMIN_PASSWORD=change-this-now |
| 409 | |
| 410 | NODE_ENV=production |
| 411 | HOST=0.0.0.0 |
| 412 | PORT=3000 |
| 413 | BASE_URL=https://your-domain.example |
| 414 | JWT_SECRET=replace-with-a-long-random-secret |
| 415 | |
| 416 | DATABASE_URL=postgres://live_runtime:password@localhost:5432/ov_live |
| 417 | DATABASE_DIRECT_URL=postgres://live_owner:password@localhost:5432/ov_live |
| 418 | |
| 419 | RTMP_PORT=1935 |
| 420 | JSMPEG_VIDEO_PORT=9710 |
| 421 | JSMPEG_AUDIO_PORT=9711 |
| 422 | WEBRTC_PORT=4443 |
| 423 | MEDIASOUP_LISTEN_IP=0.0.0.0 |
| 424 | MEDIASOUP_ANNOUNCED_IP=YOUR_PUBLIC_IP |
| 425 | MEDIASOUP_MIN_PORT=10000 |
| 426 | MEDIASOUP_MAX_PORT=10100 |
| 427 | |
| 428 | VOD_PATH=./data/vods |
| 429 | CLIPS_PATH=./data/clips |
| 430 | THUMBNAILS_PATH=./data/thumbnails |
| 431 | EMOTES_PATH=./data/emotes |
| 432 | |
| 433 | MAX_VOD_SIZE_MB=128 |
| 434 | MAX_EMOTE_SIZE_KB=128 |
| 435 | MAX_EMOTES_PER_USER=10 |
| 436 | |
| 437 | MIN_CASHOUT=5 |
| 438 | ESCROW_HOLD_DAYS=14</code></pre> |
| 439 | |
| 440 | <h3>Generate a strong JWT secret</h3> |
| 441 | <pre><code class="language-bash">openssl rand -hex 32</code></pre> |
| 442 | |
| 443 | <div class="card warn"> |
| 444 | <strong>Notes:</strong> |
| 445 | <ul style="margin-top:8px"> |
| 446 | <li>Set <code>BASE_URL</code> to your final public HTTPS hostname</li> |
| 447 | <li>Set <code>MEDIASOUP_ANNOUNCED_IP</code> to the real public OVH IP if you use WebRTC</li> |
| 448 | <li>Keep upload and media limits low on small servers</li> |
| 449 | <li>Do not expose unused protocols</li> |
| 450 | </ul> |
| 451 | </div> |
| 452 | </section> |
| 453 | |
| 454 | <!-- S11: Dirs --> |
| 455 | <section id="dirs"> |
| 456 | <h2><i class="fa-solid fa-folder-tree"></i> 11. Create Runtime Directories</h2> |
| 457 | <p>The app creates them on boot, but you can pre-create them:</p> |
| 458 | <pre><code class="language-bash">cd /opt/openvibelive |
| 459 | mkdir -p data/vods data/clips data/media data/thumbnails data/emotes data/avatars</code></pre> |
| 460 | </section> |
| 461 | |
| 462 | <!-- S12: Bootstrap --> |
| 463 | <section id="bootstrap"> |
| 464 | <h2><i class="fa-solid fa-rocket"></i> 12. Bootstrap the App</h2> |
| 465 | <p>Initialize the database if needed:</p> |
| 466 | <pre><code class="language-bash">cd /opt/openvibelive |
| 467 | npm run init-db</code></pre> |
| 468 | <p>Or just start it once manually:</p> |
| 469 | <pre><code class="language-bash">npm start</code></pre> |
| 470 | <p>Then stop it and move on to <code>systemd</code> setup.</p> |
| 471 | </section> |
| 472 | |
| 473 | <!-- S13: Cloudflare DNS --> |
| 474 | <section id="cloudflare-dns"> |
| 475 | <h2><i class="fa-solid fa-cloud"></i> 13. Cloudflare DNS Setup</h2> |
| 476 | |
| 477 | <h3>Main website</h3> |
| 478 | <p>Create these records in Cloudflare DNS:</p> |
| 479 | <ul> |
| 480 | <li><code>A</code> record for <code>@</code> pointing at <code>YOUR_OVH_PUBLIC_IP</code></li> |
| 481 | <li><code>CNAME</code> for <code>www</code> pointing at your apex hostname</li> |
| 482 | </ul> |
| 483 | <p>Set both to <strong>Proxied</strong> (orange cloud) after the origin is working.</p> |
| 484 | |
| 485 | <h3>Optional: direct hostnames for non-HTTP protocols</h3> |
| 486 | <p>Only create these if you really need them:</p> |
| 487 | <table> |
| 488 | <thead><tr><th>Record</th><th>Type</th><th>Value</th><th>Proxy</th></tr></thead> |
| 489 | <tbody> |
| 490 | <tr><td><code>rtmp</code></td><td>A</td><td><code>YOUR_OVH_PUBLIC_IP</code></td><td>DNS only</td></tr> |
| 491 | <tr><td><code>webrtc</code></td><td>A</td><td><code>YOUR_OVH_PUBLIC_IP</code></td><td>DNS only</td></tr> |
| 492 | <tr><td><code>jsmpeg</code></td><td>A</td><td><code>YOUR_OVH_PUBLIC_IP</code></td><td>DNS only</td></tr> |
| 493 | </tbody> |
| 494 | </table> |
| 495 | <div class="card tip">These are usually <strong>DNS only</strong> (grey cloud) because they are not standard proxied website traffic.</div> |
| 496 | </section> |
| 497 | |
| 498 | <!-- S14: Let's Encrypt --> |
| 499 | <section id="letsencrypt"> |
| 500 | <h2><i class="fa-solid fa-lock"></i> 14. Let's Encrypt on Ubuntu 25.04</h2> |
| 501 | <p>For end-to-end encryption with Cloudflare, the origin must present a valid certificate. Cloudflare's <strong>Full (strict)</strong> mode requires the origin cert to be unexpired, valid for the hostname, and issued by a publicly trusted CA.</p> |
| 502 | |
| 503 | <h3>Install Certbot</h3> |
| 504 | <pre><code class="language-bash">sudo apt install -y snapd |
| 505 | sudo snap install core |
| 506 | sudo snap refresh core |
| 507 | sudo snap install --classic certbot |
| 508 | sudo ln -sf /snap/bin/certbot /usr/local/bin/certbot |
| 509 | certbot --version</code></pre> |
| 510 | |
| 511 | <h3>Temporary Nginx HTTP site</h3> |
| 512 | <p>Before requesting the cert, create a plain HTTP Nginx site so your domain answers on port 80.</p> |
| 513 | <pre><code class="language-bash">sudo nano /etc/nginx/sites-available/openvibelive</code></pre> |
| 514 | <pre><code class="language-nginx">server { |
| 515 | listen 80; |
| 516 | listen [::]:80; |
| 517 | server_name your-domain.example www.your-domain.example; |
| 518 | |
| 519 | location / { |
| 520 | proxy_pass http://127.0.0.1:3000; |
| 521 | proxy_http_version 1.1; |
| 522 | proxy_set_header Host $host; |
| 523 | proxy_set_header X-Real-IP $remote_addr; |
| 524 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
| 525 | proxy_set_header X-Forwarded-Proto $scheme; |
| 526 | } |
| 527 | |
| 528 | location /ws/ { |
| 529 | proxy_pass http://127.0.0.1:3000; |
| 530 | proxy_http_version 1.1; |
| 531 | proxy_set_header Upgrade $http_upgrade; |
| 532 | proxy_set_header Connection "upgrade"; |
| 533 | proxy_set_header Host $host; |
| 534 | proxy_set_header X-Real-IP $remote_addr; |
| 535 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
| 536 | proxy_set_header X-Forwarded-Proto $scheme; |
| 537 | proxy_read_timeout 3600; |
| 538 | } |
| 539 | }</code></pre> |
| 540 | <p>Enable it:</p> |
| 541 | <pre><code class="language-bash">sudo ln -sf /etc/nginx/sites-available/openvibelive /etc/nginx/sites-enabled/openvibelive |
| 542 | sudo rm -f /etc/nginx/sites-enabled/default |
| 543 | sudo nginx -t |
| 544 | sudo systemctl reload nginx</code></pre> |
| 545 | |
| 546 | <h3>Request the certificate</h3> |
| 547 | <div class="card tip">If Cloudflare proxying causes validation issues, temporarily set DNS records to <strong>DNS only</strong> until issuance succeeds, then proxy them again.</div> |
| 548 | <pre><code class="language-bash">sudo certbot --nginx -d your-domain.example -d www.your-domain.example</code></pre> |
| 549 | |
| 550 | <h3>Verify auto-renewal</h3> |
| 551 | <pre><code class="language-bash">sudo systemctl list-timers | grep certbot || true |
| 552 | sudo certbot renew --dry-run</code></pre> |
| 553 | </section> |
| 554 | |
| 555 | <!-- S15: Full (strict) --> |
| 556 | <section id="cf-strict"> |
| 557 | <h2><i class="fa-solid fa-shield"></i> 15. Cloudflare End-to-End Encryption</h2> |
| 558 | <p>Once the origin has a valid Let's Encrypt cert:</p> |
| 559 | <ol> |
| 560 | <li>Open the Cloudflare dashboard</li> |
| 561 | <li>Go to <strong>SSL/TLS</strong></li> |
| 562 | <li>Set encryption mode to <strong>Full (strict)</strong></li> |
| 563 | </ol> |
| 564 | <p>This gives you encrypted browser-to-Cloudflare <em>and</em> encrypted Cloudflare-to-origin traffic, with origin certificate validation.</p> |
| 565 | |
| 566 | <h3>Recommended Cloudflare settings</h3> |
| 567 | <ul> |
| 568 | <li><strong>Always Use HTTPS</strong> — enabled</li> |
| 569 | <li><strong>Automatic HTTPS Rewrites</strong> — enabled</li> |
| 570 | <li>WAF / bot protections (if available on your plan)</li> |
| 571 | <li>Rate limiting for sensitive paths (if available)</li> |
| 572 | </ul> |
| 573 | |
| 574 | <div class="card tip">For extra origin protection, add Cloudflare IP allowlists at the firewall or Nginx layer, or configure Authenticated Origin Pulls.</div> |
| 575 | </section> |
| 576 | |
| 577 | <!-- S16: Restore Visitor IP --> |
| 578 | <section id="real-ip"> |
| 579 | <h2><i class="fa-solid fa-eye"></i> 16. Restore the Real Visitor IP</h2> |
| 580 | <p>By default, your origin sees Cloudflare edge IPs. Cloudflare provides the original visitor IP in the <code>CF-Connecting-IP</code> header.</p> |
| 581 | |
| 582 | <h3>Nginx real IP config</h3> |
| 583 | <pre><code class="language-bash">sudo nano /etc/nginx/conf.d/cloudflare-realip.conf</code></pre> |
| 584 | <pre><code class="language-nginx">real_ip_header CF-Connecting-IP; |
| 585 | |
| 586 | set_real_ip_from 173.245.48.0/20; |
| 587 | set_real_ip_from 103.21.244.0/22; |
| 588 | set_real_ip_from 103.22.200.0/22; |
| 589 | set_real_ip_from 103.31.4.0/22; |
| 590 | set_real_ip_from 141.101.64.0/18; |
| 591 | set_real_ip_from 108.162.192.0/18; |
| 592 | set_real_ip_from 190.93.240.0/20; |
| 593 | set_real_ip_from 188.114.96.0/20; |
| 594 | set_real_ip_from 197.234.240.0/22; |
| 595 | set_real_ip_from 198.41.128.0/17; |
| 596 | set_real_ip_from 162.158.0.0/15; |
| 597 | set_real_ip_from 104.16.0.0/13; |
| 598 | set_real_ip_from 104.24.0.0/14; |
| 599 | set_real_ip_from 172.64.0.0/13; |
| 600 | set_real_ip_from 131.0.72.0/22; |
| 601 | set_real_ip_from 2400:cb00::/32; |
| 602 | set_real_ip_from 2606:4700::/32; |
| 603 | set_real_ip_from 2803:f800::/32; |
| 604 | set_real_ip_from 2405:b500::/32; |
| 605 | set_real_ip_from 2405:8100::/32; |
| 606 | set_real_ip_from 2a06:98c0::/29; |
| 607 | set_real_ip_from 2c0f:f248::/32; |
| 608 | real_ip_recursive on;</code></pre> |
| 609 | <pre><code class="language-bash">sudo nginx -t |
| 610 | sudo systemctl reload nginx</code></pre> |
| 611 | |
| 612 | <h3>Optional: custom log format with Cloudflare info</h3> |
| 613 | <pre><code class="language-bash">sudo nano /etc/nginx/conf.d/log_format_cloudflare.conf</code></pre> |
| 614 | <pre><code class="language-nginx">log_format cloudflare_combined '$remote_addr - $remote_user [$time_local] ' |
| 615 | '"$request" $status $body_bytes_sent ' |
| 616 | '"$http_referer" "$http_user_agent" ' |
| 617 | 'cf_ray=$http_cf_ray cf_ip=$http_cf_connecting_ip';</code></pre> |
| 618 | <p>Apply it in your site config with:</p> |
| 619 | <pre><code class="language-nginx">access_log /var/log/nginx/openvibelive.access.log cloudflare_combined;</code></pre> |
| 620 | |
| 621 | <div class="card tip"><strong>Why this matters:</strong> OpenVibe.Live uses Express with <code>trust proxy</code> enabled. Correct Nginx real-IP handling ensures logs, moderation, rate limiting, and security signals use the real visitor IP instead of a Cloudflare edge IP.</div> |
| 622 | </section> |
| 623 | |
| 624 | <!-- S17: Final Nginx --> |
| 625 | <section id="nginx-final"> |
| 626 | <h2><i class="fa-solid fa-server"></i> 17. Final Nginx HTTPS Config</h2> |
| 627 | <p>After Certbot runs, tighten the site config:</p> |
| 628 | <pre><code class="language-nginx">server { |
| 629 | listen 80; |
| 630 | listen [::]:80; |
| 631 | server_name your-domain.example www.your-domain.example; |
| 632 | return 301 https://$host$request_uri; |
| 633 | } |
| 634 | |
| 635 | server { |
| 636 | listen 443 ssl http2; |
| 637 | listen [::]:443 ssl http2; |
| 638 | server_name your-domain.example www.your-domain.example; |
| 639 | |
| 640 | ssl_certificate /etc/letsencrypt/live/your-domain.example/fullchain.pem; |
| 641 | ssl_certificate_key /etc/letsencrypt/live/your-domain.example/privkey.pem; |
| 642 | |
| 643 | access_log /var/log/nginx/openvibelive.access.log cloudflare_combined; |
| 644 | error_log /var/log/nginx/openvibelive.error.log; |
| 645 | |
| 646 | client_max_body_size 128M; |
| 647 | |
| 648 | add_header X-Content-Type-Options nosniff always; |
| 649 | add_header X-Frame-Options SAMEORIGIN always; |
| 650 | add_header Referrer-Policy strict-origin-when-cross-origin always; |
| 651 | |
| 652 | location / { |
| 653 | proxy_pass http://127.0.0.1:3000; |
| 654 | proxy_http_version 1.1; |
| 655 | proxy_set_header Host $host; |
| 656 | proxy_set_header X-Real-IP $remote_addr; |
| 657 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
| 658 | proxy_set_header X-Forwarded-Proto $scheme; |
| 659 | } |
| 660 | |
| 661 | location /ws/ { |
| 662 | proxy_pass http://127.0.0.1:3000; |
| 663 | proxy_http_version 1.1; |
| 664 | proxy_set_header Upgrade $http_upgrade; |
| 665 | proxy_set_header Connection "upgrade"; |
| 666 | proxy_set_header Host $host; |
| 667 | proxy_set_header X-Real-IP $remote_addr; |
| 668 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; |
| 669 | proxy_set_header X-Forwarded-Proto $scheme; |
| 670 | proxy_read_timeout 3600; |
| 671 | } |
| 672 | }</code></pre> |
| 673 | <pre><code class="language-bash">sudo nginx -t |
| 674 | sudo systemctl reload nginx</code></pre> |
| 675 | </section> |
| 676 | |
| 677 | <!-- S18: Firewall --> |
| 678 | <section id="firewall"> |
| 679 | <h2><i class="fa-solid fa-fire"></i> 18. Firewall (UFW)</h2> |
| 680 | |
| 681 | <h3>Minimal website-only deployment</h3> |
| 682 | <pre><code class="language-bash">sudo ufw allow OpenSSH |
| 683 | sudo ufw allow 80/tcp |
| 684 | sudo ufw allow 443/tcp |
| 685 | sudo ufw enable |
| 686 | sudo ufw status verbose</code></pre> |
| 687 | |
| 688 | <h3>If you need RTMP ingest</h3> |
| 689 | <pre><code class="language-bash">sudo ufw allow 1935/tcp</code></pre> |
| 690 | |
| 691 | <h3>If you need JSMPEG</h3> |
| 692 | <pre><code class="language-bash">sudo ufw allow 9710/tcp |
| 693 | sudo ufw allow 9711/tcp</code></pre> |
| 694 | |
| 695 | <h3>If you need WebRTC / mediasoup</h3> |
| 696 | <pre><code class="language-bash">sudo ufw allow 4443/tcp |
| 697 | sudo ufw allow 4443/udp |
| 698 | sudo ufw allow 10000:10100/udp</code></pre> |
| 699 | <div class="card warn">Only open what you actively use.</div> |
| 700 | </section> |
| 701 | |
| 702 | <!-- S19: OVH Security Groups --> |
| 703 | <section id="ovh-secgroup"> |
| 704 | <h2><i class="fa-solid fa-network-wired"></i> 19. OVH Security Groups</h2> |
| 705 | <p>OVH's OpenStack-based Public Cloud default security groups can allow broad traffic by default. <strong>Do not rely on OVH defaults alone.</strong></p> |
| 706 | <p>Use at least one of these:</p> |
| 707 | <ul> |
| 708 | <li><code>ufw</code> on the instance</li> |
| 709 | <li>OVH/OpenStack security groups (if you manage networking that way)</li> |
| 710 | <li>Nginx allowlists for sensitive origin paths</li> |
| 711 | </ul> |
| 712 | <div class="card tip">If you build custom OVH security groups, follow the same principle: start from least privilege and only open the exact ports you need.</div> |
| 713 | </section> |
| 714 | |
| 715 | <!-- ═══════════════ 20. systemd service ═══════════════ --> |
| 716 | <section id="systemd" class="fade-in"> |
| 717 | <h2><i class="fa-solid fa-gear"></i> 20. systemd service</h2> |
| 718 | <p>systemd doesn't run interactive shells, so it can't see the nvm shell function or the node/npm binaries it manages. We use a tiny wrapper script that sources nvm before launching the app.</p> |
| 719 | |
| 720 | <h3>Create the wrapper script</h3> |
| 721 | <pre><code class="language-bash">sudo nano /opt/openvibelive/start.sh</code></pre> |
| 722 | <p>Paste:</p> |
| 723 | <pre><code class="language-bash">#!/usr/bin/env bash |
| 724 | set -euo pipefail |
| 725 | |
| 726 | export NVM_DIR="$HOME/.nvm" |
| 727 | [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" |
| 728 | |
| 729 | cd /opt/openvibelive |
| 730 | exec npm start</code></pre> |
| 731 | <p>Make it executable:</p> |
| 732 | <pre><code class="language-bash">sudo chmod +x /opt/openvibelive/start.sh</code></pre> |
| 733 | |
| 734 | <h3>Create the service unit</h3> |
| 735 | <pre><code class="language-bash">sudo nano /etc/systemd/system/openvibelive.service</code></pre> |
| 736 | <p>Paste the following unit file:</p> |
| 737 | <pre><code class="language-ini">[Unit] |
| 738 | Description=OpenVibe.Live |
| 739 | After=network.target |
| 740 | |
| 741 | [Service] |
| 742 | Type=simple |
| 743 | User=ubuntu |
| 744 | WorkingDirectory=/opt/openvibelive |
| 745 | Environment=NODE_ENV=production |
| 746 | ExecStart=/opt/openvibelive/start.sh |
| 747 | Restart=always |
| 748 | RestartSec=5 |
| 749 | |
| 750 | [Install] |
| 751 | WantedBy=multi-user.target</code></pre> |
| 752 | <div class="card warn"><i class="fa-solid fa-triangle-exclamation"></i> The <code>User=</code> must match whoever installed nvm. If you installed nvm as <code>ubuntu</code>, use <code>User=ubuntu</code>. The script reads <code>$HOME/.nvm</code> from that user's home directory.</div> |
| 753 | <div class="card tip">If you created a dedicated <code>openvibelive</code> user, install nvm under that user, change <code>User=ubuntu</code> to <code>User=openvibelive</code>, and ensure ownership of <code>/opt/openvibelive</code> matches.</div> |
| 754 | <p>Enable and start:</p> |
| 755 | <pre><code class="language-bash">sudo systemctl daemon-reload |
| 756 | sudo systemctl enable openvibelive |
| 757 | sudo systemctl start openvibelive |
| 758 | sudo systemctl status openvibelive</code></pre> |
| 759 | <p>View logs:</p> |
| 760 | <pre><code class="language-bash">journalctl -u openvibelive -f</code></pre> |
| 761 | </section> |
| 762 | |
| 763 | <!-- ═══════════════ 21. Close registration ═══════════════ --> |
| 764 | <section id="close-reg" class="fade-in"> |
| 765 | <h2><i class="fa-solid fa-user-lock"></i> 21. Close registration after bootstrap</h2> |
| 766 | <p>After you create your initial admin and trusted test accounts, close public registration. This is one of the cheapest and strongest anti-abuse controls in the project.</p> |
| 767 | <pre><code class="language-bash">cd /opt/openvibe.live/current |
| 768 | # Use the site administration settings to close registration.</code></pre> |
| 769 | </section> |
| 770 | |
| 771 | <!-- ═══════════════ 22. fail2ban ═══════════════ --> |
| 772 | <section id="fail2ban" class="fade-in"> |
| 773 | <h2><i class="fa-solid fa-ban"></i> 22. Optional fail2ban baseline</h2> |
| 774 | <p>Install:</p> |
| 775 | <pre><code class="language-bash">sudo apt install -y fail2ban</code></pre> |
| 776 | <p>Create a basic jail file:</p> |
| 777 | <pre><code class="language-bash">sudo nano /etc/fail2ban/jail.local</code></pre> |
| 778 | <p>Example:</p> |
| 779 | <pre><code class="language-ini">[sshd] |
| 780 | enabled = true |
| 781 | maxretry = 5 |
| 782 | findtime = 10m |
| 783 | bantime = 1h</code></pre> |
| 784 | <p>Then:</p> |
| 785 | <pre><code class="language-bash">sudo systemctl enable fail2ban |
| 786 | sudo systemctl restart fail2ban |
| 787 | sudo fail2ban-client status</code></pre> |
| 788 | <div class="card warning"><i class="fa-solid fa-triangle-exclamation"></i> If most web traffic is behind Cloudflare, make sure your Nginx real-IP config is correct before relying on log-based web jails.</div> |
| 789 | </section> |
| 790 | |
| 791 | <!-- ═══════════════ 23. Protocol exposure ═══════════════ --> |
| 792 | <section id="protocols" class="fade-in"> |
| 793 | <h2><i class="fa-solid fa-plug"></i> 23. Protocol-specific exposure guidance</h2> |
| 794 | <h3>RTMP</h3> |
| 795 | <p>Expose <code>1935/tcp</code> only if you need OBS or FFmpeg ingest.</p> |
| 796 | <h3>JSMPEG</h3> |
| 797 | <p>Expose <code>9710/tcp</code> and <code>9711/tcp</code> only if you use the relay.</p> |
| 798 | <h3>WebRTC</h3> |
| 799 | <p>Expose only the exact WebRTC TCP/UDP and RTP ports you need. Make sure:</p> |
| 800 | <ul> |
| 801 | <li><code>MEDIASOUP_ANNOUNCED_IP</code> matches your public OVH IP</li> |
| 802 | <li>Your firewall allows the RTP range</li> |
| 803 | <li>Your Cloudflare setup is <strong>not</strong> expected to proxy raw media ports</li> |
| 804 | </ul> |
| 805 | </section> |
| 806 | |
| 807 | <!-- ═══════════════ 24. Operational checks ═══════════════ --> |
| 808 | <section id="checks" class="fade-in"> |
| 809 | <h2><i class="fa-solid fa-clipboard-check"></i> 24. Operational checks</h2> |
| 810 | <h3>App health</h3> |
| 811 | <p>Verify:</p> |
| 812 | <ul> |
| 813 | <li><code>http://127.0.0.1:3000/api/health</code> on the server</li> |
| 814 | <li><code>https://your-domain.example/api/health</code> through Nginx and Cloudflare</li> |
| 815 | </ul> |
| 816 | <h3>TLS</h3> |
| 817 | <ul> |
| 818 | <li>Browser sees a valid certificate</li> |
| 819 | <li>Cloudflare SSL/TLS mode is <strong>Full (strict)</strong></li> |
| 820 | <li>No redirect loops</li> |
| 821 | <li>No mixed-content warnings</li> |
| 822 | </ul> |
| 823 | <h3>Visitor IP restoration</h3> |
| 824 | <p>Check Nginx logs and confirm the client IP is not just a Cloudflare edge IP.</p> |
| 825 | <h3>Port audit</h3> |
| 826 | <p>Check that only intended ports are reachable from the internet:</p> |
| 827 | <pre><code class="language-bash">sudo ss -tulpn |
| 828 | sudo ufw status verbose</code></pre> |
| 829 | </section> |
| 830 | |
| 831 | <!-- ═══════════════ 25. Command summary ═══════════════ --> |
| 832 | <section id="summary" class="fade-in"> |
| 833 | <h2><i class="fa-solid fa-list-ol"></i> 25. Full command summary</h2> |
| 834 | <p>If you want the short version, the high-level order is:</p> |
| 835 | <ol> |
| 836 | <li>Generate an OVH-compatible SSH key locally</li> |
| 837 | <li>Create the OVH Ubuntu 25.04 instance with that public key</li> |
| 838 | <li>SSH into the new instance</li> |
| 839 | <li>Update packages and install Nginx, FFmpeg, <code>ufw</code>, and <code>fail2ban</code></li> |
| 840 | <li>Install nvm and Node 20 LTS</li> |
| 841 | <li>Clone OpenVibe.Live into <code>/opt/openvibelive</code></li> |
| 842 | <li>Configure <code>.env</code></li> |
| 843 | <li>Start the app once and verify <code>/api/health</code></li> |
| 844 | <li>Set Cloudflare DNS to the OVH IP</li> |
| 845 | <li>Configure Nginx</li> |
| 846 | <li>Issue a Let's Encrypt certificate with Certbot</li> |
| 847 | <li>Enable Cloudflare <strong>Full (strict)</strong></li> |
| 848 | <li>Add Cloudflare real-IP config in Nginx</li> |
| 849 | <li>Enable <code>systemd</code> for OpenVibe.Live</li> |
| 850 | <li>Close public registration after bootstrap</li> |
| 851 | <li>Open only the extra media ports you actually need</li> |
| 852 | </ol> |
| 853 | </section> |
| 854 | |
| 855 | <!-- ═══════════════ 26. Security reminders ═══════════════ --> |
| 856 | <section id="security" class="fade-in"> |
| 857 | <h2><i class="fa-solid fa-shield-halved"></i> 26. Security reminders</h2> |
| 858 | <ul> |
| 859 | <li>Never use ED25519 if the OVH flow in your account rejects it</li> |
| 860 | <li>Keep your private SSH key only on trusted admin machines</li> |
| 861 | <li>Disable password SSH once key auth is confirmed</li> |
| 862 | <li>Keep <code>JWT_SECRET</code> long and random</li> |
| 863 | <li>Keep the website behind Cloudflare</li> |
| 864 | <li>Do not expose raw media ports unnecessarily</li> |
| 865 | <li>Keep upload limits low on small servers</li> |
| 866 | <li>Close registration when not actively onboarding users</li> |
| 867 | <li>Monitor <code>data/</code> growth for VODs, clips, thumbnails, avatars, and emotes</li> |
| 868 | </ul> |
| 869 | </section> |
| 870 | |
| 871 | <!-- ═══════════════ 27. References ═══════════════ --> |
| 872 | <section id="references" class="fade-in"> |
| 873 | <h2><i class="fa-solid fa-book"></i> 27. References</h2> |
| 874 | <p>This guide was aligned with current public guidance from:</p> |
| 875 | <ul> |
| 876 | <li>OVH Public Cloud instance creation and SSH-key setup guidance</li> |
| 877 | <li>Cloudflare documentation for <code>CF-Connecting-IP</code> and restoring original visitor IPs</li> |
| 878 | <li>Cloudflare documentation for <strong>Full (strict)</strong> mode</li> |
| 879 | <li>Current Certbot installation and Nginx integration guidance</li> |
| 880 | </ul> |
| 881 | </section> |
| 882 | |
| 883 | <!-- ═══════════════ 28. Setup summary ═══════════════ --> |
| 884 | <section id="setup-summary" class="fade-in"> |
| 885 | <h2><i class="fa-solid fa-flag-checkered"></i> 28. Setup summary</h2> |
| 886 | <p>For OVH + Ubuntu 25.04, the best OpenVibe.Live deployment pattern is:</p> |
| 887 | <ul> |
| 888 | <li>RSA or ECDSA SSH key uploaded to OVH</li> |
| 889 | <li>Ubuntu 25.04 on OVH Public Cloud</li> |
| 890 | <li>Node 20 LTS via nvm</li> |
| 891 | <li>Nginx reverse proxy on the box</li> |
| 892 | <li>Let's Encrypt certificate on the origin</li> |
| 893 | <li>Cloudflare proxy with <strong>Full (strict)</strong></li> |
| 894 | <li>Cloudflare real-IP restoration in Nginx</li> |
| 895 | <li><code>systemd</code>, <code>ufw</code>, <code>fail2ban</code></li> |
| 896 | <li>Only one streaming protocol exposed at a time unless you have a real need for more</li> |
| 897 | </ul> |
| 898 | <p>See also <a href="README.md">README.md</a> and <a href="deploy/">deploy/</a>.</p> |
| 899 | </section> |
| 900 | |
| 901 | <!-- ════════════════════════════════════════════════════════ --> |
| 902 | <!-- OVH PLAN COMPARISON GUIDE --> |
| 903 | <!-- ════════════════════════════════════════════════════════ --> |
| 904 | |
| 905 | <h1 id="ovh-guide" class="fade-in" style="margin-top:3rem;padding-top:2rem;border-top:2px solid var(--border);"> |
| 906 | <i class="fa-solid fa-server"></i> OVH Public Cloud Sizing Guide |
| 907 | </h1> |
| 908 | |
| 909 | <!-- ═══════════════ OVH Exec Summary ═══════════════ --> |
| 910 | <section id="ovh-exec" class="fade-in"> |
| 911 | <h2><i class="fa-solid fa-bullseye"></i> Executive summary</h2> |
| 912 | |
| 913 | <h3>Best overall pick — B3-32</h3> |
| 914 | <ul> |
| 915 | <li>32 GB RAM — enough for Node, PostgreSQL, WebSockets, chat, thumbnails, clips, and moderate media workload</li> |
| 916 | <li>8 vCores — sane floor for a mixed single-box deployment</li> |
| 917 | <li>200 GB NVMe — much more realistic than 50–100 GB once VODs and clips start accumulating</li> |
| 918 | <li>2 Gbit/s — leaves real headroom for 200 viewers at practical streaming bitrates</li> |
| 919 | </ul> |
| 920 | |
| 921 | <h3>Best budget / staging pick</h3> |
| 922 | <ul> |
| 923 | <li><strong>B3-8</strong> — cheapest decent general-purpose box</li> |
| 924 | <li><strong>C3-8</strong> — cheaper CPU-heavier test box (only 100 GB storage)</li> |
| 925 | </ul> |
| 926 | |
| 927 | <h3>Best safer production pick — B3-64</h3> |
| 928 | <ul> |
| 929 | <li>16 vCores is much healthier for 200 viewers with WebRTC, call features, game traffic, clip creation</li> |
| 930 | <li>4 Gbit/s helps if bitrate climbs or you add more streams / cameras / rooms later</li> |
| 931 | </ul> |
| 932 | |
| 933 | <div class="card warning"><i class="fa-solid fa-triangle-exclamation"></i> The older <strong>B2</strong> and <strong>C2</strong> families mostly lose on price/performance against the new <strong>B3</strong> and <strong>C3</strong> families. <strong>C2</strong> is the least attractive family for this workload.</div> |
| 934 | </section> |
| 935 | |
| 936 | <!-- ═══════════════ OVH Limits ═══════════════ --> |
| 937 | <section id="ovh-limits" class="fade-in"> |
| 938 | <h2><i class="fa-solid fa-gauge-high"></i> What limits OpenVibe.Live on a single OVH instance</h2> |
| 939 | <p>The bottleneck is not just RAM. The main constraints are:</p> |
| 940 | <ol> |
| 941 | <li><strong>Outbound bandwidth</strong> — the first hard wall</li> |
| 942 | <li><strong>CPU</strong> — especially for WebRTC</li> |
| 943 | <li><strong>Disk space</strong> — once VODs are enabled</li> |
| 944 | <li><strong>Disk I/O</strong></li> |
| 945 | <li><strong>Operational headroom</strong> for Node, FFmpeg, thumbnails, clips, chat, and WebSockets</li> |
| 946 | </ol> |
| 947 | |
| 948 | <h3>Bandwidth is the first hard wall</h3> |
| 949 | <p>For all three playback methods, the origin server pays outbound bandwidth per viewer:</p> |
| 950 | <ul> |
| 951 | <li><strong>JSMPEG</strong>: server relays the live stream to every viewer</li> |
| 952 | <li><strong>RTMP / HTTP-FLV</strong>: server still pays outbound per viewer</li> |
| 953 | <li><strong>WebRTC SFU</strong>: server forwards media to each viewer; outbound scales with audience</li> |
| 954 | </ul> |
| 955 | <div class="card tip">Cloudflare protects the website and proxied HTTP traffic, but <strong>raw media ports and direct real-time traffic are not magically offloaded</strong> just because the website uses Cloudflare.</div> |
| 956 | |
| 957 | <h3>CPU becomes more important for WebRTC</h3> |
| 958 | <ul> |
| 959 | <li><strong>JSMPEG</strong>: usually more bandwidth-bound than CPU-bound</li> |
| 960 | <li><strong>RTMP ingest + direct playback</strong>: also heavily bandwidth-bound</li> |
| 961 | <li><strong>WebRTC / mediasoup</strong>: usually more CPU-sensitive (SFU packet forwarding, transport handling, encryption overhead, more real-time state)</li> |
| 962 | </ul> |
| 963 | |
| 964 | <h3>Storage dominates once VODs are enabled</h3> |
| 965 | <p>The service uses PostgreSQL for its database and OpenVibe.Media for VODs, clips, thumbnails, and media assets. The OS and app don't need much space — <strong>recorded video does.</strong></p> |
| 966 | </section> |
| 967 | |
| 968 | <!-- ═══════════════ OVH Bandwidth ═══════════════ --> |
| 969 | <section id="ovh-bandwidth" class="fade-in"> |
| 970 | <h2><i class="fa-solid fa-wave-square"></i> Bandwidth math for 200 viewers</h2> |
| 971 | <p>A useful first-order formula:</p> |
| 972 | <div class="card" style="text-align:center;font-size:1.1rem;">required egress Mbps ≈ viewer count × average delivered Mbps per viewer</div> |
| 973 | <p>For <strong>200 viewers</strong>:</p> |
| 974 | <ul> |
| 975 | <li>At <strong>1.5 Mbps</strong> per viewer: ~<strong>300 Mbps</strong> raw egress</li> |
| 976 | <li>At <strong>2.5 Mbps</strong> per viewer: ~<strong>500 Mbps</strong> raw egress</li> |
| 977 | <li>At <strong>4.0 Mbps</strong> per viewer: ~<strong>800 Mbps</strong> raw egress</li> |
| 978 | </ul> |
| 979 | <p>Real deployments need headroom for TLS/protocol overhead, chat/API/thumbnails, bitrate spikes, reconnections, and background jobs. Target around <strong>70% of the listed port speed</strong> as usable sustained capacity.</p> |
| 980 | |
| 981 | <h3>Safe viewer counts at 70% utilization</h3> |
| 982 | <div style="overflow-x:auto;"> |
| 983 | <table> |
| 984 | <thead><tr><th>NIC cap</th><th>Safe usable Mbps</th><th>~1.5 Mbps/viewer</th><th>~2.5 Mbps/viewer</th><th>~4.0 Mbps/viewer</th></tr></thead> |
| 985 | <tbody> |
| 986 | <tr><td>250 Mbit/s</td><td>175</td><td>116</td><td>70</td><td>43</td></tr> |
| 987 | <tr><td>500 Mbit/s</td><td>350</td><td>233</td><td>140</td><td>87</td></tr> |
| 988 | <tr><td>1,000 Mbit/s</td><td>700</td><td>466</td><td>280</td><td>175</td></tr> |
| 989 | <tr><td>2,000 Mbit/s</td><td>1,400</td><td>933</td><td>560</td><td>350</td></tr> |
| 990 | <tr><td>4,000 Mbit/s</td><td>2,800</td><td>1,866</td><td>1,120</td><td>700</td></tr> |
| 991 | <tr><td>8,000 Mbit/s</td><td>5,600</td><td>3,733</td><td>2,240</td><td>1,400</td></tr> |
| 992 | <tr><td>10,000 Mbit/s</td><td>7,000</td><td>4,666</td><td>2,800</td><td>1,750</td></tr> |
| 993 | <tr><td>16,000 Mbit/s</td><td>11,200</td><td>7,466</td><td>4,480</td><td>2,800</td></tr> |
| 994 | </tbody> |
| 995 | </table> |
| 996 | </div> |
| 997 | |
| 998 | <h3>What that means for 200 viewers</h3> |
| 999 | <ul> |
| 1000 | <li><strong>250 Mbit/s plans</strong> — not enough except for very low bitrates</li> |
| 1001 | <li><strong>500 Mbit/s plans</strong> — can work for low-mid bitrate, but not comfortable</li> |
| 1002 | <li><strong>1 Gbit/s plans</strong> — viable if you keep average delivered bitrate moderate</li> |
| 1003 | <li><strong>2 Gbit/s plans</strong> — where the setup gets comfortable</li> |
| 1004 | <li><strong>4 Gbit/s plans</strong> — stop thinking about bandwidth, start thinking about CPU and storage</li> |
| 1005 | </ul> |
| 1006 | </section> |
| 1007 | |
| 1008 | <!-- ═══════════════ OVH Storage ═══════════════ --> |
| 1009 | <section id="ovh-storage" class="fade-in"> |
| 1010 | <h2><i class="fa-solid fa-hard-drive"></i> Storage math for VODs and clips</h2> |
| 1011 | <p>Rule of thumb: <strong>1 Mbps ≈ 0.44 GB/hour</strong></p> |
| 1012 | <ul> |
| 1013 | <li><strong>1.5 Mbps</strong> ≈ 0.66 GB/hour</li> |
| 1014 | <li><strong>2.5 Mbps</strong> ≈ 1.10 GB/hour</li> |
| 1015 | <li><strong>4.0 Mbps</strong> ≈ 1.76 GB/hour</li> |
| 1016 | <li><strong>6.0 Mbps</strong> ≈ 2.64 GB/hour</li> |
| 1017 | </ul> |
| 1018 | |
| 1019 | <h3>Usable media space after OS/app reserve (~15–25 GB)</h3> |
| 1020 | <div style="overflow-x:auto;"> |
| 1021 | <table> |
| 1022 | <thead><tr><th>Raw disk</th><th>Usable media space</th></tr></thead> |
| 1023 | <tbody> |
| 1024 | <tr><td>50 GB</td><td>25–35 GB</td></tr> |
| 1025 | <tr><td>100 GB</td><td>75–85 GB</td></tr> |
| 1026 | <tr><td>200 GB</td><td>175–185 GB</td></tr> |
| 1027 | <tr><td>400 GB</td><td>375–385 GB</td></tr> |
| 1028 | </tbody> |
| 1029 | </table> |
| 1030 | </div> |
| 1031 | |
| 1032 | <h3>Approximate retained recording hours (at 2.5 Mbps)</h3> |
| 1033 | <ul> |
| 1034 | <li>30 GB usable, about 27 hours</li> |
| 1035 | <li>80 GB usable, about 73 hours</li> |
| 1036 | <li>180 GB usable, about 164 hours</li> |
| 1037 | <li>380 GB usable, about 345 hours</li> |
| 1038 | </ul> |
| 1039 | |
| 1040 | <h3>At 4.0 Mbps</h3> |
| 1041 | <ul> |
| 1042 | <li>30 GB usable, about 17 hours</li> |
| 1043 | <li>80 GB usable, about 45 hours</li> |
| 1044 | <li>180 GB usable, about 102 hours</li> |
| 1045 | <li>380 GB usable, about 216 hours</li> |
| 1046 | </ul> |
| 1047 | |
| 1048 | <div class="card tip"><strong>Storage takeaway:</strong> 50 GB is test-only. 100 GB is okay for dev/alpha. <strong>200 GB</strong> is the first production-usable size. 400 GB is much better but still not archival. Long-term, push older VODs to object storage.</div> |
| 1049 | </section> |
| 1050 | |
| 1051 | <!-- ═══════════════ OVH Families ═══════════════ --> |
| 1052 | <section id="ovh-families" class="fade-in"> |
| 1053 | <h2><i class="fa-solid fa-layer-group"></i> Family-by-family analysis</h2> |
| 1054 | |
| 1055 | <h3><i class="fa-solid fa-star"></i> B3 family — best overall fit</h3> |
| 1056 | <p>The new B3 family is the strongest match for OpenVibe.Live because it balances decent vCPU counts, generous RAM, NVMe storage, strong network steps, and good pricing.</p> |
| 1057 | <div style="overflow-x:auto;"> |
| 1058 | <table> |
| 1059 | <thead><tr><th>Plan</th><th>RAM</th><th>vCPU</th><th>Disk</th><th>NIC</th><th>Price/hour</th></tr></thead> |
| 1060 | <tbody> |
| 1061 | <tr><td>B3-8</td><td>8 GB</td><td>2</td><td>50 GB NVMe</td><td>500 Mbit/s</td><td>$0.0508</td></tr> |
| 1062 | <tr><td>B3-16</td><td>16 GB</td><td>4</td><td>100 GB NVMe</td><td>1,000 Mbit/s</td><td>$0.1016</td></tr> |
| 1063 | <tr><td>B3-32</td><td>32 GB</td><td>8</td><td>200 GB NVMe</td><td>2,000 Mbit/s</td><td>$0.2033</td></tr> |
| 1064 | <tr><td>B3-64</td><td>64 GB</td><td>16</td><td>400 GB NVMe</td><td>4,000 Mbit/s</td><td>$0.4065</td></tr> |
| 1065 | <tr><td>B3-128</td><td>128 GB</td><td>32</td><td>400 GB NVMe</td><td>8,000 Mbit/s</td><td>$0.8131</td></tr> |
| 1066 | <tr><td>B3-256</td><td>256 GB</td><td>64</td><td>400 GB NVMe</td><td>16,000 Mbit/s</td><td>$1.6262</td></tr> |
| 1067 | </tbody> |
| 1068 | </table> |
| 1069 | </div> |
| 1070 | <ul> |
| 1071 | <li><strong>B3-8</strong>: good dev box, too small for serious 200-viewer ambitions</li> |
| 1072 | <li><strong>B3-16</strong>: good small production / alpha / staging box</li> |
| 1073 | <li><strong>B3-32</strong>: <strong>best overall single-box production choice</strong></li> |
| 1074 | <li><strong>B3-64</strong>: <strong>best safer serious production choice</strong> for 200 viewers with headroom</li> |
| 1075 | <li><strong>B3-128 / B3-256</strong>: overkill for early OpenVibe.Live</li> |
| 1076 | </ul> |
| 1077 | |
| 1078 | <h3>B2 family — older, mostly outclassed</h3> |
| 1079 | <div style="overflow-x:auto;"> |
| 1080 | <table> |
| 1081 | <thead><tr><th>Plan</th><th>RAM</th><th>vCPU</th><th>Disk</th><th>NIC</th><th>Price</th></tr></thead> |
| 1082 | <tbody> |
| 1083 | <tr><td>B2-7</td><td>7 GB</td><td>2</td><td>50 GB SSD</td><td>250 Mbit/s</td><td>$29.04/mo</td></tr> |
| 1084 | <tr><td>B2-15</td><td>15 GB</td><td>4</td><td>100 GB SSD</td><td>250 Mbit/s</td><td>$55.44/mo</td></tr> |
| 1085 | <tr><td>B2-30</td><td>30 GB</td><td>8</td><td>200 GB SSD</td><td>500 Mbit/s</td><td>$112.20/mo</td></tr> |
| 1086 | <tr><td>B2-60</td><td>60 GB</td><td>16</td><td>400 GB SSD</td><td>1,000 Mbit/s</td><td>$217.80/mo</td></tr> |
| 1087 | <tr><td>B2-120</td><td>120 GB</td><td>32</td><td>400 GB SSD</td><td>10,000 Mbit/s</td><td>$429.00/mo</td></tr> |
| 1088 | </tbody> |
| 1089 | </table> |
| 1090 | </div> |
| 1091 | <div class="card warning"><i class="fa-solid fa-triangle-exclamation"></i> Compared with B3, B2 gives worse price/performance, older SSD instead of NVMe, and weaker bandwidth. Only choose B2 if B3 is unavailable in your zone.</div> |
| 1092 | |
| 1093 | <h3>C3 family — CPU-heavy, not best value here</h3> |
| 1094 | <div style="overflow-x:auto;"> |
| 1095 | <table> |
| 1096 | <thead><tr><th>Plan</th><th>RAM</th><th>vCPU</th><th>Disk</th><th>NIC</th><th>Price/hour</th></tr></thead> |
| 1097 | <tbody> |
| 1098 | <tr><td>C3-4</td><td>4 GB</td><td>2</td><td>50 GB NVMe</td><td>250 Mbit/s</td><td>$0.0453</td></tr> |
| 1099 | <tr><td>C3-8</td><td>8 GB</td><td>4</td><td>100 GB NVMe</td><td>500 Mbit/s</td><td>$0.0907</td></tr> |
| 1100 | <tr><td>C3-16</td><td>16 GB</td><td>8</td><td>200 GB NVMe</td><td>1,000 Mbit/s</td><td>$0.1813</td></tr> |
| 1101 | <tr><td>C3-32</td><td>32 GB</td><td>16</td><td>400 GB NVMe</td><td>2,000 Mbit/s</td><td>$0.3627</td></tr> |
| 1102 | <tr><td>C3-64</td><td>64 GB</td><td>32</td><td>400 GB NVMe</td><td>4,000 Mbit/s</td><td>$0.7254</td></tr> |
| 1103 | <tr><td>C3-128</td><td>128 GB</td><td>64</td><td>400 GB NVMe</td><td>8,000 Mbit/s</td><td>$1.4508</td></tr> |
| 1104 | </tbody> |
| 1105 | </table> |
| 1106 | </div> |
| 1107 | <p>C3 gets interesting if your deployment is heavily WebRTC-centric and CPU-bound. But for OpenVibe.Live, B3 usually wins because the app wants more RAM, more bandwidth, more storage, and better economics per box.</p> |
| 1108 | <div class="card tip"><strong>Example:</strong> B3-32 (32 GB / 8 vCPU / 200 GB / 2 Gbit/s for $0.2033/h) vs C3-16 (16 GB / 8 vCPU / 200 GB / 1 Gbit/s for $0.1813/h) — for only a little more, B3-32 gives double the RAM and double the network.</div> |
| 1109 | |
| 1110 | <h3>C2 family — least attractive</h3> |
| 1111 | <div style="overflow-x:auto;"> |
| 1112 | <table> |
| 1113 | <thead><tr><th>Plan</th><th>RAM</th><th>vCPU</th><th>Disk</th><th>NIC</th><th>Price</th></tr></thead> |
| 1114 | <tbody> |
| 1115 | <tr><td>C2-7</td><td>7 GB</td><td>2</td><td>50 GB SSD</td><td>250 Mbit/s</td><td>$42.24/mo</td></tr> |
| 1116 | <tr><td>C2-15</td><td>15 GB</td><td>4</td><td>100 GB SSD</td><td>250 Mbit/s</td><td>$81.83/mo</td></tr> |
| 1117 | <tr><td>C2-30</td><td>30 GB</td><td>8</td><td>200 GB SSD</td><td>500 Mbit/s</td><td>$165.00/mo</td></tr> |
| 1118 | <tr><td>C2-60</td><td>60 GB</td><td>16</td><td>400 GB SSD</td><td>1,000 Mbit/s</td><td>$323.40/mo</td></tr> |
| 1119 | <tr><td>C2-120</td><td>120 GB</td><td>32</td><td>400 GB SSD</td><td>10,000 Mbit/s</td><td>$640.20/mo</td></tr> |
| 1120 | </tbody> |
| 1121 | </table> |
| 1122 | </div> |
| 1123 | <p>C2 is expensive, older, and has weaker bandwidth than the B3 alternative. Not recommended for OpenVibe.Live.</p> |
| 1124 | </section> |
| 1125 | |
| 1126 | <!-- ═══════════════ OVH Methods ═══════════════ --> |
| 1127 | <section id="ovh-methods" class="fade-in"> |
| 1128 | <h2><i class="fa-solid fa-satellite-dish"></i> Streaming method plan fit</h2> |
| 1129 | |
| 1130 | <h3>WebRTC / mediasoup</h3> |
| 1131 | <p>The method most likely to become <strong>CPU-sensitive</strong> first.</p> |
| 1132 | <ul> |
| 1133 | <li><strong>B3-32</strong> for moderate production</li> |
| 1134 | <li><strong>B3-64</strong> for safer 200-viewer production</li> |
| 1135 | <li><strong>C3-32</strong> only if you are convinced CPU will matter more than RAM/bandwidth economics</li> |
| 1136 | </ul> |
| 1137 | <p>If your expected audience is up to 200 and WebRTC is a real primary path, start at <strong>B3-64</strong> — the full balance of 16 vCores + 4 Gbit/s + 400 GB NVMe is much healthier.</p> |
| 1138 | |
| 1139 | <h3>JSMPEG</h3> |
| 1140 | <p>More straightforward on the server side — becomes <strong>bandwidth-bound</strong> quickly.</p> |
| 1141 | <ul> |
| 1142 | <li><strong>B3-16</strong> for smaller audiences and testing</li> |
| 1143 | <li><strong>B3-32</strong> for up to 200 viewers at moderate bitrates</li> |
| 1144 | <li><strong>B3-64</strong> if you want bitrate headroom or larger audience spikes</li> |
| 1145 | </ul> |
| 1146 | <p>For a JSMPEG-heavy public deployment, <strong>B3-32</strong> is the sweet spot.</p> |
| 1147 | |
| 1148 | <h3>RTMP ingest + direct playback</h3> |
| 1149 | <p>RTMP ingest itself is light. Viewer delivery is what costs you — again outbound bandwidth and storage.</p> |
| 1150 | <ul> |
| 1151 | <li><strong>B3-16</strong> for low-mid audience counts</li> |
| 1152 | <li><strong>B3-32</strong> for a real public rollout</li> |
| 1153 | <li><strong>B3-64</strong> if you expect higher bitrate, spikes, or multiple simultaneous live loads</li> |
| 1154 | </ul> |
| 1155 | </section> |
| 1156 | |
| 1157 | <!-- ═══════════════ OVH Credit ═══════════════ --> |
| 1158 | <section id="ovh-credit" class="fade-in"> |
| 1159 | <h2><i class="fa-solid fa-piggy-bank"></i> $200 OVH credit analysis</h2> |
| 1160 | <p>OVH gives <strong>$200 in public cloud credit that expires after 90 days</strong>. Two key questions: how long the credit lasts running continuously, and whether the plan can run the full 90 days within the credit window.</p> |
| 1161 | |
| 1162 | <h3>How long $200 lasts on each plan</h3> |
| 1163 | <div style="overflow-x:auto;"> |
| 1164 | <table> |
| 1165 | <thead><tr><th>Plan</th><th>Price/hour</th><th>$200 lasts</th><th>Hours</th></tr></thead> |
| 1166 | <tbody> |
| 1167 | <tr><td>B3-8</td><td>$0.0508</td><td>164 days</td><td>3,937 h</td></tr> |
| 1168 | <tr><td>B3-16</td><td>$0.1016</td><td>82 days</td><td>1,969 h</td></tr> |
| 1169 | <tr><td>B3-32</td><td>$0.2033</td><td>41 days</td><td>984 h</td></tr> |
| 1170 | <tr><td>B3-64</td><td>$0.4065</td><td>20.5 days</td><td>492 h</td></tr> |
| 1171 | <tr><td>B3-128</td><td>$0.8131</td><td>10.3 days</td><td>246 h</td></tr> |
| 1172 | <tr><td>B3-256</td><td>$1.6262</td><td>5.1 days</td><td>123 h</td></tr> |
| 1173 | <tr style="background:var(--hover);"><td colspan="4"><strong>B2 family</strong></td></tr> |
| 1174 | <tr><td>B2-7</td><td>$0.0813</td><td>102.5 days</td><td>2,460 h</td></tr> |
| 1175 | <tr><td>B2-15</td><td>$0.1539</td><td>54 days</td><td>1,300 h</td></tr> |
| 1176 | <tr><td>B2-30</td><td>$0.3123</td><td>26.7 days</td><td>640 h</td></tr> |
| 1177 | <tr><td>B2-60</td><td>$0.6060</td><td>13.8 days</td><td>330 h</td></tr> |
| 1178 | <tr><td>B2-120</td><td>$1.1923</td><td>7 days</td><td>168 h</td></tr> |
| 1179 | <tr style="background:var(--hover);"><td colspan="4"><strong>C3 family</strong></td></tr> |
| 1180 | <tr><td>C3-4</td><td>$0.0453</td><td>184 days</td><td>4,415 h</td></tr> |
| 1181 | <tr><td>C3-8</td><td>$0.0907</td><td>92 days</td><td>2,205 h</td></tr> |
| 1182 | <tr><td>C3-16</td><td>$0.1813</td><td>46 days</td><td>1,103 h</td></tr> |
| 1183 | <tr><td>C3-32</td><td>$0.3627</td><td>23 days</td><td>551 h</td></tr> |
| 1184 | <tr><td>C3-64</td><td>$0.7254</td><td>11.5 days</td><td>276 h</td></tr> |
| 1185 | <tr style="background:var(--hover);"><td colspan="4"><strong>C2 family</strong></td></tr> |
| 1186 | <tr><td>C2-7</td><td>$0.1176</td><td>70.9 days</td><td>1,701 h</td></tr> |
| 1187 | <tr><td>C2-15</td><td>$0.2276</td><td>36.6 days</td><td>879 h</td></tr> |
| 1188 | <tr><td>C2-30</td><td>$0.4586</td><td>18.2 days</td><td>436 h</td></tr> |
| 1189 | <tr><td>C2-60</td><td>$0.8986</td><td>9.3 days</td><td>223 h</td></tr> |
| 1190 | <tr><td>C2-120</td><td>$1.7786</td><td>4.7 days</td><td>112 h</td></tr> |
| 1191 | </tbody> |
| 1192 | </table> |
| 1193 | </div> |
| 1194 | |
| 1195 | <h3>90-day continuous run cost (hourly plans)</h3> |
| 1196 | <div style="overflow-x:auto;"> |
| 1197 | <table> |
| 1198 | <thead><tr><th>Plan</th><th>30-day cost</th><th>90-day cost</th></tr></thead> |
| 1199 | <tbody> |
| 1200 | <tr><td>B3-8</td><td>$36.58</td><td>$109.73</td></tr> |
| 1201 | <tr><td>B3-16</td><td>$73.15</td><td>$219.46</td></tr> |
| 1202 | <tr><td>B3-32</td><td>$146.38</td><td>$439.13</td></tr> |
| 1203 | <tr><td>B3-64</td><td>$292.68</td><td>$878.04</td></tr> |
| 1204 | <tr><td>C3-4</td><td>$32.62</td><td>$97.85</td></tr> |
| 1205 | <tr><td>C3-8</td><td>$65.30</td><td>$195.91</td></tr> |
| 1206 | <tr><td>C3-16</td><td>$130.54</td><td>$391.61</td></tr> |
| 1207 | <tr><td>C3-32</td><td>$261.14</td><td>$783.43</td></tr> |
| 1208 | </tbody> |
| 1209 | </table> |
| 1210 | </div> |
| 1211 | |
| 1212 | <h3>Best credit strategies</h3> |
| 1213 | <div class="card tip"> |
| 1214 | <strong>Strategy A — longest useful beta:</strong> Run <strong>B3-8</strong> or <strong>C3-8</strong> during buildout, staging, and feature validation. Upgrade to <strong>B3-32</strong> only when audience and VOD usage justify it. |
| 1215 | </div> |
| 1216 | <div class="card tip"> |
| 1217 | <strong>Strategy B — realistic public beta:</strong> Start on <strong>B3-16</strong>. Accept that $200 covers only ~82 days. Resize to <strong>B3-32</strong> when you need the larger envelope. |
| 1218 | </div> |
| 1219 | <div class="card tip"> |
| 1220 | <strong>Strategy C — short burst launch:</strong> Use <strong>B3-32</strong> for launch testing. Know that $200 gives ~41 days continuously. |
| 1221 | </div> |
| 1222 | </section> |
| 1223 | |
| 1224 | <!-- ═══════════════ OVH Scenarios ═══════════════ --> |
| 1225 | <section id="ovh-scenarios" class="fade-in"> |
| 1226 | <h2><i class="fa-solid fa-route"></i> Recommended picks by scenario</h2> |
| 1227 | |
| 1228 | <h3>Scenario A — dev, staging, private alpha</h3> |
| 1229 | <p><strong>Pick: B3-8</strong> — cheapest balanced plan. Enough for app setup, testing, internal streams, chat, docs, and smoke validation. Credit lasts the full 90 days easily.</p> |
| 1230 | |
| 1231 | <h3>Scenario B — public beta, one main stream, realistic growth</h3> |
| 1232 | <p><strong>Pick: B3-16</strong> (budget) or <strong>B3-32</strong> (best value). Compared with B3-16, B3-32 gives 2× RAM, 2× vCPU, 2× disk, 2× network for exactly 2× price — the operational breathing room is much better.</p> |
| 1233 | |
| 1234 | <h3>Scenario C — target up to 200 concurrent viewers on one box</h3> |
| 1235 | <p><strong>Pick: B3-32</strong> (minimum serious) or <strong>B3-64</strong> (safer). For 200 viewers, the question becomes: what is your average delivered bitrate? How WebRTC-heavy is the workload? How much VOD retention locally? <strong>B3-32</strong> is the first deliberate production choice; <strong>B3-64</strong> is less stressful.</p> |
| 1236 | |
| 1237 | <h3>Scenario D — WebRTC-first, higher CPU pressure, future growth</h3> |
| 1238 | <p><strong>Pick: B3-64</strong> — only slightly more expensive than C3-32 while giving more RAM, more network, equivalent vCPU count, and better overall OpenVibe.Live balance.</p> |
| 1239 | </section> |
| 1240 | |
| 1241 | <!-- ═══════════════ OVH Final ═══════════════ --> |
| 1242 | <section id="ovh-final" class="fade-in"> |
| 1243 | <h2><i class="fa-solid fa-trophy"></i> Final recommendation</h2> |
| 1244 | <p>If you want the single OVH plan that makes the most sense for OpenVibe.Live, including storage, mixed real-time features, and streaming toward <strong>200 viewers</strong>:</p> |
| 1245 | |
| 1246 | <div class="card" style="text-align:center;font-size:1.4rem;padding:1.5rem;"> |
| 1247 | <i class="fa-solid fa-crown" style="color:#f59e0b;"></i> <strong>B3-32</strong> — Best overall compromise |
| 1248 | </div> |
| 1249 | <p style="text-align:center;">Price · RAM · vCPU · NVMe storage · Outbound bandwidth · Realism for local VOD/clip retention</p> |
| 1250 | |
| 1251 | <div class="card" style="text-align:center;font-size:1.2rem;padding:1.2rem;margin-top:1rem;"> |
| 1252 | <i class="fa-solid fa-shield-halved" style="color:#3b82f6;"></i> <strong>B3-64</strong> — Best safer no-regrets version for heavier WebRTC / more headroom |
| 1253 | </div> |
| 1254 | |
| 1255 | <div class="card" style="text-align:center;font-size:1.2rem;padding:1.2rem;margin-top:1rem;"> |
| 1256 | <i class="fa-solid fa-coins" style="color:#10b981;"></i> <strong>B3-8</strong> — Best cheap build/test box while burning the free credit |
| 1257 | </div> |
| 1258 | |
| 1259 | <h3>Bottom line in one sentence</h3> |
| 1260 | <div style="overflow-x:auto;"> |
| 1261 | <table> |
| 1262 | <thead><tr><th>Plan</th><th>Verdict</th></tr></thead> |
| 1263 | <tbody> |
| 1264 | <tr><td><strong>B3-8</strong></td><td>Best cheap build/test box</td></tr> |
| 1265 | <tr><td><strong>B3-16</strong></td><td>Okay starter production box</td></tr> |
| 1266 | <tr><td><strong>B3-32</strong></td><td><strong>Best overall OpenVibe.Live plan</strong></td></tr> |
| 1267 | <tr><td><strong>B3-64</strong></td><td>Best safer 200-viewer / WebRTC-heavy plan</td></tr> |
| 1268 | <tr><td>B2 / C2</td><td>Mostly not worth it here</td></tr> |
| 1269 | <tr><td>C3</td><td>Only if unusually CPU-biased and accept weaker overall value</td></tr> |
| 1270 | </tbody> |
| 1271 | </table> |
| 1272 | </div> |
| 1273 | </section> |
| 1274 | |
| 1275 | </div><!-- /content --> |
| 1276 | </div><!-- /main --> |
| 1277 | |
| 1278 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script> |
| 1279 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/bash.min.js"></script> |
| 1280 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/nginx.min.js"></script> |
| 1281 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/ini.min.js"></script> |
| 1282 | <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/properties.min.js"></script> |
| 1283 | <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> |
| 1284 | <script> |
| 1285 | /* ---- Theme ---- */ |
| 1286 | function getTheme(){return document.documentElement.getAttribute('data-theme')} |
| 1287 | function setTheme(t){ |
| 1288 | document.documentElement.setAttribute('data-theme',t); |
| 1289 | localStorage.setItem('theme',t); |
| 1290 | document.getElementById('themeBtn').innerHTML=t==='dark'?'<i class="fa-solid fa-moon"></i>':'<i class="fa-solid fa-sun"></i>'; |
| 1291 | document.getElementById('hljs-theme').href=t==='dark' |
| 1292 | ?'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css' |
| 1293 | :'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github.min.css'; |
| 1294 | } |
| 1295 | function toggleTheme(){setTheme(getTheme()==='dark'?'light':'dark')} |
| 1296 | const saved=localStorage.getItem('theme');if(saved)setTheme(saved); |
| 1297 | |
| 1298 | /* ---- Sidebar ---- */ |
| 1299 | function toggleSidebar(){ |
| 1300 | document.getElementById('sidebar').classList.toggle('open'); |
| 1301 | document.getElementById('overlay').classList.toggle('open'); |
| 1302 | } |
| 1303 | document.querySelectorAll('.nav-link').forEach(l=>l.addEventListener('click',()=>{ |
| 1304 | if(window.innerWidth<=900){toggleSidebar()} |
| 1305 | })); |
| 1306 | |
| 1307 | /* ---- Active nav on scroll ---- */ |
| 1308 | const sections=document.querySelectorAll('section[id]'); |
| 1309 | const navLinks=document.querySelectorAll('.nav-link'); |
| 1310 | const obs=new IntersectionObserver(entries=>{ |
| 1311 | entries.forEach(e=>{ |
| 1312 | if(e.isIntersecting){ |
| 1313 | navLinks.forEach(l=>l.classList.remove('active')); |
| 1314 | const a=document.querySelector(`.nav-link[href="#${e.target.id}"]`); |
| 1315 | if(a)a.classList.add('active'); |
| 1316 | } |
| 1317 | }); |
| 1318 | },{rootMargin:'-80px 0px -70% 0px'}); |
| 1319 | sections.forEach(s=>obs.observe(s)); |
| 1320 | |
| 1321 | /* ---- Progress bar ---- */ |
| 1322 | window.addEventListener('scroll',()=>{ |
| 1323 | const h=document.documentElement.scrollHeight-window.innerHeight; |
| 1324 | document.getElementById('progress').style.width=(window.scrollY/h*100)+'%'; |
| 1325 | }); |
| 1326 | |
| 1327 | /* ---- Fade in sections ---- */ |
| 1328 | const fadeObs=new IntersectionObserver(entries=>{ |
| 1329 | entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible');fadeObs.unobserve(e.target)}}); |
| 1330 | },{threshold:.05}); |
| 1331 | sections.forEach(s=>fadeObs.observe(s)); |
| 1332 | |
| 1333 | /* ---- Code block enhancement ---- */ |
| 1334 | function enhanceCodeBlocks(){ |
| 1335 | document.querySelectorAll('pre code').forEach(block=>{ |
| 1336 | if(block.closest('.code-wrapper'))return; |
| 1337 | hljs.highlightElement(block); |
| 1338 | const pre=block.parentElement; |
| 1339 | const wrapper=document.createElement('div'); |
| 1340 | wrapper.className='code-wrapper'; |
| 1341 | const cls=Array.from(block.classList).find(c=>c.startsWith('language-')); |
| 1342 | const lang=cls?cls.replace('language-',''):'text'; |
| 1343 | const header=document.createElement('div'); |
| 1344 | header.className='code-header'; |
| 1345 | header.innerHTML=`<span class="code-lang"><i class="fa-solid fa-code"></i> ${lang}</span> |
| 1346 | <span class="code-actions"> |
| 1347 | <button class="code-btn edit-btn" onclick="toggleEdit(this)" title="Edit before copying"><i class="fa-solid fa-pen"></i> Edit</button> |
| 1348 | <button class="code-btn copy-btn" onclick="copyCode(this)" title="Copy to clipboard"><i class="fa-regular fa-copy"></i> Copy</button> |
| 1349 | </span>`; |
| 1350 | pre.parentNode.insertBefore(wrapper,pre); |
| 1351 | wrapper.appendChild(header); |
| 1352 | wrapper.appendChild(pre); |
| 1353 | }); |
| 1354 | } |
| 1355 | |
| 1356 | function copyCode(btn){ |
| 1357 | const wrapper=btn.closest('.code-wrapper'); |
| 1358 | const code=wrapper.querySelector('code'); |
| 1359 | const text=code.textContent; |
| 1360 | navigator.clipboard.writeText(text).then(()=>{ |
| 1361 | btn.classList.add('copied'); |
| 1362 | btn.innerHTML='<i class="fa-solid fa-check"></i> Copied!'; |
| 1363 | setTimeout(()=>{btn.classList.remove('copied');btn.innerHTML='<i class="fa-regular fa-copy"></i> Copy';},2000); |
| 1364 | }); |
| 1365 | } |
| 1366 | |
| 1367 | function toggleEdit(btn){ |
| 1368 | const wrapper=btn.closest('.code-wrapper'); |
| 1369 | const pre=wrapper.querySelector('pre'); |
| 1370 | const isEditing=wrapper.classList.toggle('editing'); |
| 1371 | pre.contentEditable=isEditing; |
| 1372 | if(isEditing){pre.focus();btn.innerHTML='<i class="fa-solid fa-lock"></i> Lock';} |
| 1373 | else{btn.innerHTML='<i class="fa-solid fa-pen"></i> Edit';} |
| 1374 | } |
| 1375 | |
| 1376 | /* ---- Search ---- */ |
| 1377 | let markInstance; |
| 1378 | function initSearch(){ |
| 1379 | markInstance=new Mark(document.getElementById('content')); |
| 1380 | const input=document.getElementById('searchInput'); |
| 1381 | let debounce; |
| 1382 | input.addEventListener('input',()=>{ |
| 1383 | clearTimeout(debounce); |
| 1384 | debounce=setTimeout(()=>{ |
| 1385 | const q=input.value.trim(); |
| 1386 | markInstance.unmark(); |
| 1387 | if(!q){document.getElementById('searchCount').textContent='';return;} |
| 1388 | markInstance.mark(q,{ |
| 1389 | separateWordSearch:false, |
| 1390 | done(count){document.getElementById('searchCount').textContent=count?`${count} match${count>1?'es':''}`:'';} |
| 1391 | }); |
| 1392 | },250); |
| 1393 | }); |
| 1394 | document.addEventListener('keydown',e=>{ |
| 1395 | if((e.ctrlKey||e.metaKey)&&e.key==='k'){e.preventDefault();input.focus();input.select();} |
| 1396 | }); |
| 1397 | } |
| 1398 | |
| 1399 | /* ---- Init ---- */ |
| 1400 | document.addEventListener('DOMContentLoaded',()=>{ |
| 1401 | enhanceCodeBlocks(); |
| 1402 | initSearch(); |
| 1403 | sections.forEach(s=>fadeObs.observe(s)); |
| 1404 | }); |
| 1405 | </script> |
| 1406 | </body> |
| 1407 | </html> |
| 1408 |