MJPEG Stream Viewer

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>MJPEG Stream Viewer</title>
<link rel="icon" href="icon.svg">
<style>
@font-face{font-family:'Familjen Grotesk';src:url('https://adom.inc/fonts/familjen-grotesk/familjen-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Satoshi';src:url('https://adom.inc/fonts/satoshi/satoshi-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Satoshi';src:url('https://adom.inc/fonts/satoshi/satoshi-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--bg:#0d1117;--surface:#161b22;--elevated:#1c2128;--overlay:#21262d;--line:#30363d;--text:#e6edf3;--text2:#8b949e;--text3:#484f58;--accent:#00b8b0;--accent-bright:#00e6dc;--ok:#66bb6a;--warn:#d29922;--bad:#ef5350}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.4 'Satoshi',system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}
header{height:44px;flex:0 0 44px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;position:relative}
.brand svg{width:18px;height:18px;flex:none}
.brand .name{font:700 15px 'Familjen Grotesk',sans-serif;white-space:nowrap}
.brand .sub{color:var(--text2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .pop{display:none;position:absolute;top:34px;left:0;background:var(--overlay);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--text2);white-space:nowrap;z-index:5}
.brand:hover .pop{display:block}
.chip{font:12px 'JetBrains Mono',ui-monospace,monospace;color:var(--text2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.led{width:8px;height:8px;border-radius:50%;background:var(--text3);flex:none}
.led.green{background:var(--ok)}.led.yellow{background:var(--warn)}.led.red{background:var(--bad)}
.spacer{flex:1}
.iconbtn{width:30px;height:30px;border:0;background:transparent;color:var(--text2);border-radius:6px;cursor:pointer;display:grid;place-items:center}
.iconbtn:hover{background:var(--elevated);color:var(--text)}
.bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar input[type=url]{flex:1 1 320px;min-width:200px;height:32px;padding:0 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:13px 'JetBrains Mono',ui-monospace,monospace}
.bar select{height:32px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:13px 'Satoshi',sans-serif;padding:0 8px;max-width:220px}
.btn{height:32px;padding:0 14px;border-radius:6px;border:1px solid rgba(0,184,176,.35);background:transparent;color:var(--accent);font:500 13px 'Satoshi',sans-serif;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:rgba(0,184,176,.08)}.btn.primary{background:var(--accent);color:#0d1117;border-color:transparent}.btn.primary:hover{background:var(--accent-bright)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.view{flex:1;position:relative;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.view img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.view.cover img{width:100%;height:100%;object-fit:cover}
.empty{color:var(--text2);text-align:center;max-width:520px;padding:24px}
.empty code{color:var(--text);font:12px 'JetBrains Mono',ui-monospace,monospace}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:rgba(22,27,34,.92);backdrop-filter:blur(16px);border:1px solid rgba(0,184,177,.2);border-radius:10px;padding:10px 14px;font-size:13px;box-shadow:0 12px 40px rgba(0,0,0,.55);display:none;z-index:6}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:7}
.modal .panel{width:min(520px,92vw);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 20px;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.modal h2{margin:0 0 12px;font:700 16px 'Familjen Grotesk',sans-serif}
.row{display:flex;align-items:center;gap:10px;margin:8px 0}.row label{flex:0 0 150px;color:var(--text2);font-size:13px}
.row input,.row select{flex:1;height:30px;border-radius:6px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 8px;font:13px 'Satoshi',sans-serif}
.help{color:var(--text3);font-size:12px;margin:2px 0 10px 160px}
.hint{color:var(--text2);font-size:12px;margin-top:10px}
/* bare mode: nothing but the picture; a corner button brings the chrome back */
body.bare header,body.bare .bar{display:none}
.chromebtn{position:fixed;top:8px;right:8px;z-index:4;width:30px;height:30px;border-radius:6px;border:1px solid rgba(230,237,243,.15);background:rgba(22,27,34,.55);backdrop-filter:blur(8px);color:var(--text2);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}
body:hover .chromebtn,.chromebtn:focus{opacity:1}
body:not(.bare) .chromebtn{top:52px}
</style></head><body>
<header>
  <div class="brand">
    <svg viewBox="0 0 24 24" fill="none" stroke="#e6edf3" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="13" height="10" rx="2"/><path d="M16 10.5l5-2.5v8l-5-2.5"/><circle cx="9.5" cy="12" r="2.3"/></svg>
    <span class="name">MJPEG Stream Viewer</span><span class="sub">give it a URL, it fits</span>
    <div class="pop">version <span id="ver">?</span> · <a href="https://wiki.adom.inc/adom/mjpeg-stream-viewer" target="_blank" style="color:var(--accent)">wiki page</a></div>
  </div>
  <span class="chip"><span class="led green"></span>target: this machine</span>
  <span class="spacer"></span>
  <button class="iconbtn" id="gear" title="Settings" aria-label="Settings"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg></button>
</header>
<div class="bar">
  <input type="url" id="url" placeholder="http://192.168.0.34:3000/stream" spellcheck="false">
  <select id="sources" title="Saved sources"><option value="">saved sources</option></select>
  <button class="btn primary" id="go">Show</button>
  <button class="btn" id="fit" title="Fit keeps the whole frame; Fill crops to the pane">Fit</button>
  <button class="btn" id="snap">Snapshot</button>
  <button class="btn" id="save">Save source</button>
  <span class="pills" id="pills"></span>
</div>
<div class="view" id="view"><div class="empty" id="empty">Paste a camera stream URL above and press Show, or open this page with <code>?url=&lt;stream&gt;</code>. The stream is proxied through this container, so an http camera on the LAN shows inside https Hydrogen; frames are capped at the rate in Settings.</div></div>
<button class="chromebtn" id="chrome" title="Show or hide the controls (also ?bare=1)" aria-label="Toggle controls"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4"/></svg></button>
<div class="toast" id="toast"></div>
<div class="modal" id="modal"><div class="panel">
  <h2>Settings</h2>
  <div class="row"><label for="s-fps">Max frames per second</label><input id="s-fps" type="number" min="1" max="30"></div><div class="help">The proxy drops frames above this. 10 is plenty for a bench cam; 4K at 30 fps is about 11 MB/s.</div>
  <div class="row"><label for="s-fit">Default view</label><select id="s-fit"><option value="contain">Fit (whole frame)</option><option value="cover">Fill (crop to pane)</option></select></div>
  <div class="row"><label for="s-ttl">Idle shutdown (hours)</label><input id="s-ttl" type="number" min="1" max="720"></div><div class="help">The server stops itself after this long without a request. Restart with the CLI or the dock.</div>
  <div class="row"><label>Saved sources</label><span id="s-count" style="color:var(--text2);font-size:13px"></span></div>
  <div class="hint">Settings persist on the server for every tab. This app was started by ai-thread <code id="s-thread">?</code>.</div>
  <div style="display:flex;gap:8px;justify-content:flex-end;margin-top:14px"><button class="btn" id="s-cancel">Close</button><button class="btn primary" id="s-save">Save</button></div>
</div></div>
<script>
(function(){
  var qs=new URLSearchParams(location.search);
  var AI=qs.get('ai_thread')||'viewer-page';
  var $=function(id){return document.getElementById(id)};
  var img=null, settings={maxFps:10,fit:'contain',sources:[]}, current='';
  function toast(t){var e=$('toast');e.textContent=t;e.style.display='block';clearTimeout(e._t);e._t=setTimeout(function(){e.style.display='none'},3500)}
  function api(p,body){return fetch(p,body?{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(Object.assign({aiThread:AI},body))}:undefined).then(function(r){return r.json()})}
  function show(u,fps){
    if(!u){return}
    current=u; $('url').value=u;
    var v=$('view'); $('empty').style.display='none';
    if(img){img.src='';img.remove()}
    img=new Image(); img.alt='camera stream'; img.onerror=function(){toast('the stream did not load; check the URL and that this container can reach it')};
    img.src='stream?url='+encodeURIComponent(u)+(fps?'&fps='+encodeURIComponent(fps):'')+'&t='+Date.now();
    v.appendChild(img);
    try{localStorage.setItem('mjpeg.last',u)}catch(e){}
    var h=location.pathname+'?url='+encodeURIComponent(u)+(document.body.classList.contains('bare')?'&bare=1':''); if(history.state!==h) history.replaceState(h,'',h);
  }
  function setBare(on){document.body.classList.toggle('bare',!!on);try{localStorage.setItem('mjpeg.bare',on?'1':'0')}catch(e){}}
  $('chrome').onclick=function(){setBare(!document.body.classList.contains('bare'))};
  document.addEventListener('keydown',function(e){if(e.key==='b'&&!/input|select|textarea/i.test(e.target.tagName))$('chrome').click()});
  setBare(qs.get('bare')==='1'||(qs.get('bare')!=='0'&&(function(){try{return localStorage.getItem('mjpeg.bare')==='1'}catch(e){return false}})()));
  function setFit(mode){settings.fit=mode;$('view').classList.toggle('cover',mode==='cover');$('fit').textContent=mode==='cover'?'Fill':'Fit'}
  function renderSources(){var s=$('sources');s.innerHTML='<option value="">saved sources</option>';(settings.sources||[]).forEach(function(x){var o=document.createElement('option');o.value=x.url;o.textContent=x.name||x.url;s.appendChild(o)});$('s-count').textContent=(settings.sources||[]).length+' saved (use Save source in the bar)'}
  function pill(cls,text,title){return '<span class="chip" title="'+(title||'').replace(/"/g,'&quot;')+'"><span class="led '+cls+'"></span>'+text+'</span>'}
  function poll(){fetch('api/status').then(function(r){return r.json()}).then(function(s){var l=s.leds||{};$('pills').innerHTML=Object.keys(l).map(function(k){return pill(l[k].state,l[k].label,l[k]._hint)}).join('');$('ver').textContent=s.version||'?';$('s-thread').textContent=s.aiThread||'?'}).catch(function(){})}
  fetch('settings').then(function(r){return r.json()}).then(function(s){settings=s;setFit(s.fit||'contain');renderSources();var u=qs.get('url')||(function(){try{return localStorage.getItem('mjpeg.last')}catch(e){return ''}})();if(u)show(u,qs.get('fps'))});
  $('go').onclick=function(){show($('url').value.trim(),qs.get('fps'))};
  $('url').addEventListener('keydown',function(e){if(e.key==='Enter')$('go').click()});
  $('sources').onchange=function(){if(this.value)show(this.value)};
  $('fit').onclick=function(){setFit(settings.fit==='cover'?'contain':'cover')};
  $('snap').onclick=function(){if(!current)return toast('show a stream first');api('api/snapshot',{url:current}).then(function(r){toast(r.ok?'saved '+r.file.replace(/^.*\//,'')+' in ~/project/screenshots':'snapshot failed: '+(r.error||'')+' '+(r.hint||''))})};
  $('save').onclick=function(){if(!current)return toast('show a stream first');var name=prompt('Name for this source',current.replace(/^https?:\/\//,''));if(name===null)return;var list=(settings.sources||[]).filter(function(x){return x.url!==current});list.push({name:name,url:current});api('settings',{sources:list}).then(function(s){settings=s;renderSources();toast('saved')})};
  $('gear').onclick=function(){$('s-fps').value=settings.maxFps;$('s-fit').value=settings.fit;$('s-ttl').value=settings.ttlHours||24;$('modal').style.display='flex'};
  $('s-cancel').onclick=function(){$('modal').style.display='none'};
  $('s-save').onclick=function(){api('settings',{maxFps:Number($('s-fps').value),fit:$('s-fit').value,ttlHours:Number($('s-ttl').value)}).then(function(s){settings=s;setFit(s.fit);$('modal').style.display='none';toast('settings saved');if(current)show(current)})};
  poll();setInterval(poll,5000);
})();
</script>
</body></html>