Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="theme-color" content="#001000"> <title>Ultimate Cyber Studio AI</title> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.3/dist/coco-ssd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@0.1.0/dist/handpose.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script> <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script> <style> :root{--c:#00ff66;--bg:#020604} *{box-sizing:border-box} body{margin:0;background:#000;color:var(--c);font:12px monospace} header{padding:12px;border-bottom:1px solid var(--c);background:#001008} h1{font-size:19px;margin:0 0 7px} #status{font-size:11px;line-height:1.7} #stage{position:relative;width:100%;height:47vh;min-height:230px;background:#000;overflow:hidden} video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain} video{transform:scaleX(-1)} #overlay{pointer-events:none} #buttons{padding:8px;display:flex;flex-wrap:wrap;gap:5px} button,select{background:#001508;color:var(--c);border:1px solid var(--c);padding:8px;font:11px monospace;border-radius:3px} button.active{background:var(--c);color:#000} #detectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px} .det{width:100%;text-align:left} #result{margin:8px;padding:10px;border:1px solid var(--c);min-height:55px;white-space:pre-wrap;overflow-wrap:anywhere} #log{margin:8px;padding:8px;height:80px;overflow:auto;background:#001008} #hint{padding:8px;line-height:1.7;color:#a0ffb8} @media(min-width:700px){#stage{height:55vh}#detectors{grid-template-columns:repeat(4,minmax(0,1fr))}} </style> </head> <body> <header> <h1>β—ˆ ULTIMATE CYBER STUDIO AI</h1> <div id="status">SYSTEM OFFLINE | CAMERA NOT STARTED</div> </header> <div id="stage"> <video id="video" autoplay playsinline muted></video> <canvas id="overlay"></canvas> </div> <div id="buttons"> <button id="start">β–Ά START CAMERA</button> <button id="stop">β–  STOP CAMERA</button> <button id="photo">πŸ“Έ PHOTO</button> <button id="record">πŸ”΄ RECORD</button> <button id="flip">πŸ”„ FLIP CAMERA</button> <button id="full">β›Ά FULLSCREEN</button> <button id="clear">CLEAR DETECTORS</button> <select id="theme"> <option value="#00ff66">NEON GREEN</option> <option value="#00ccff">CYBER BLUE</option> <option value="#ff33ff">PURPLE</option> <option value="#ff3344">RED</option> <option value="#ffff00">YELLOW</option> </select> </div> <h3 style="padding-left:8px">40 DETECTOR MODES</h3> <div id="detectors"></div> <div id="result">Results will appear here.</div> <div id="log">SYSTEM READY<br></div> <div id="hint"> <strong>IMPORTANT:</strong><br> Camera access requires HTTPS or localhost. AI models need an internet connection on first load. Some detectors use real AI models; others use basic image analysis or estimates. They are not all independent AI models. </div> <script> "use strict"; const $=id=>document.getElementById(id); const video=$("video"); const canvas=$("overlay"); const ctx=canvas.getContext("2d"); let stream=null,faceMesh=null,coco=null,handModel=null; let cameraOn=false,front=true,working=false; let active=new Set(); let predictions=[]; let facePoints=null,handPoints=[]; let previousFrame=null; let motionScore=0,brightness=0; let recorder=null,recordChunks=[],recording=false; let color="#00ff66",lastOCR=0,lastQR="",lastObject=0; let raf=0; const detectorNames=[ "Face Detector", "Eye Detector", "Emotion Estimate", "Car Detector", "Body Detector", "Hand Detector", "Object Detector", "Motion Detector", "Face Tracking", "Multiple Face Detector", "Animal Detector", "Text Detector (OCR)", "Color Detector", "QR Code Detector", "Sound Detector", "Low-Light Detector", "Distance Estimate", "Gesture Detector", "Clothing Object Detector", "Screen Change Detector", "Face Mesh", "Face Outline", "Head Movement", "Blink Estimate", "Smile Estimate", "Eyebrow Landmarks", "Face Position", "Person Counter", "Object Counter", "Motion Alert", "Background Change", "Brightness Detector", "Shadow Estimate", "Shape Detector", "Edge Detector", "Dominant Color", "Light Flash Detector", "Camera Shake Estimate", "Scene Change", "Visual Scanner" ]; function log(s){ const el=$("log"); el.innerHTML+="<br>&gt; "+safe(s); el.scrollTop=el.scrollHeight; } function safe(s){ return String(s).replace(/[&<>"']/g,c=>({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;" })[c]); } function result(s){$("result").textContent=s} function status(s){$("status").textContent=s} function say(s){log(s);result(s)} detectorNames.forEach((name,i)=>{ const b=document.createElement("button"); b.className="det"; b.textContent=String(i+1).padStart(2,"0")+" | "+name; b.onclick=()=>toggleDetector(i,b); $("detectors").appendChild(b); }); function toggleDetector(i,b){ const id=i+1; if(active.has(id)){ active.delete(id); b.classList.remove("active"); say(detectorNames[i]+" OFF"); }else{ active.add(id); b.classList.add("active"); say(detectorNames[i]+" ON"); if(!cameraOn)startCamera(); if([4,7,11,19,28,29].includes(id))loadObjectModel(); if(id===6||id===18)loadHandModel(); if(id===12)log("OCR will run when requested; processing may take time."); } } async function loadObjectModel(){ if(coco)return; try{ status("LOADING OBJECT AI MODEL..."); await tf.ready(); coco=await cocoSsd.load(); log("COCO-SSD object model loaded"); status("OBJECT MODEL READY"); }catch(e){log("Object model failed: "+e.message)} } async function loadHandModel(){ if(handModel)return; try{ await tf.ready(); handModel=await handpose.load(); log("Hand model loaded"); }catch(e){log("Hand model failed: "+e.message)} } async function startCamera(){ if(cameraOn)return; if(!navigator.mediaDevices?.getUserMedia){ status("CAMERA NEEDS HTTPS OR SUPPORTED BROWSER"); return; } try{ status("REQUESTING CAMERA..."); stream=await navigator.mediaDevices.getUserMedia({ video:{facingMode:front?"user":"environment",width:{ideal:640},height:{ideal:480}}, audio:true }); video.srcObject=stream; await video.play(); cameraOn=true; await setupFaceMesh(); resize(); status("CAMERA ONLINE | SELECT DETECTORS"); log("Camera started"); animate(); }catch(e){ status("CAMERA ERROR: "+e.message); log("Camera permission or startup failed"); } } async function setupFaceMesh(){ if(faceMesh)return; if(typeof FaceMesh==="undefined"){ log("Face model unavailable. Check internet connection."); return; } faceMesh=new FaceMesh({ locateFile:f=>"https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/"+f }); faceMesh.setOptions({ maxNumFaces:5, refineLandmarks:true, minDetectionConfidence:.5, minTrackingConfidence:.5 }); faceMesh.onResults(r=>{ facePoints=r.multiFaceLandmarks||[]; }); } function stopCamera(){ cameraOn=false; if(stream)stream.getTracks().forEach(t=>t.stop()); stream=null;video.srcObject=null; if(faceMesh){faceMesh.close();faceMesh=null} facePoints=null; if(raf)cancelAnimationFrame(raf); ctx.clearRect(0,0,canvas.width,canvas.height); status("CAMERA OFF"); log("Camera stopped"); } $("start").onclick=startCamera; $("stop").onclick=stopCamera; function resize(){ const d=Math.min(devicePixelRatio||1,2); canvas.width=Math.max(1,Math.floor(canvas.clientWidth*d)); canvas.height=Math.max(1,Math.floor(canvas.clientHeight*d)); ctx.setTransform(d,0,0,d,0,0); } addEventListener("resize",resize); function point(p){ const w=canvas.clientWidth,h=canvas.clientHeight; return {x:(1-p.x)*w,y:p.y*h}; } function boxForFace(face){ const w=canvas.clientWidth,h=canvas.clientHeight; const xs=face.map(p=>(1-p.x)*w); const ys=face.map(p=>p.y*h); const l=Math.min(...xs),r=Math.max(...xs); const t=Math.min(...ys),b=Math.max(...ys); return {l,r,t,b,w:r-l,h:b-t,cx:(l+r)/2,cy:(t+b)/2}; } function drawFace(){ if(!facePoints?.length)return; ctx.save(); ctx.strokeStyle=color;ctx.fillStyle=color; ctx.lineWidth=1.5;ctx.shadowColor=color;ctx.shadowBlur=7; facePoints.forEach((face,index)=>{ const b=boxForFace(face); if(active.has(1)||active.has(9)||active.has(10)||active.has(27)||active.has(40)){ ctx.strokeRect(b.l,b.t,b.w,b.h); ctx.fillText("FACE "+(index+1),b.l,Math.max(12,b.t-5)); } if(active.has(21)||active.has(22)){ ctx.beginPath(); face.forEach((p,i)=>{ const q=point(p); if(i===0)ctx.moveTo(q.x,q.y);else ctx.lineTo(q.x,q.y); }); ctx.closePath();ctx.stroke(); } if(active.has(2)||active.has(3)||active.has(24)||active.has(25)||active.has(26)){ // Eye, eyebrow, and mouth landmarks: approximate landmark groups. [33,133,159,145,362,263,386,374,61,291,13,14,70,300].forEach(i=>{ if(!face[i])return; const q=point(face[i]); ctx.beginPath();ctx.arc(q.x,q.y,2,0,Math.PI*2);ctx.fill(); }); } if(active.has(2)){ ctx.fillText("EYE LANDMARKS",b.l,b.b+12); } if(active.has(3)){ ctx.fillText("EXPRESSION ESTIMATE",b.l,b.b+24); } if(active.has(23)){ ctx.fillText("HEAD MOVEMENT",b.l,b.t+12); } if(active.has(24))ctx.fillText("BLINK: LANDMARK ESTIMATE",b.l,b.b+12); if(active.has(25))ctx.fillText("SMILE: LANDMARK ESTIMATE",b.l,b.b+12); if(active.has(27))ctx.fillText("FACE POSITION",b.l,b.b+12); if(active.has(20)||active.has(22)){ face.forEach((p,i)=>{ if(i%4!==0)return; const q=point(p); ctx.fillRect(q.x,q.y,2,2); }); } }); ctx.restore(); } function drawObjects(){ if(!coco||!video.videoWidth)return; const sx=canvas.clientWidth/video.videoWidth; const sy=canvas.clientHeight/video.videoHeight; ctx.save();ctx.strokeStyle=color;ctx.fillStyle=color; ctx.lineWidth=2;ctx.font="12px monospace"; predictions.forEach(p=>{ if(!p.bbox)return; const [x,y,w,h]=p.bbox; // Predictions are in the original video coordinate system. const bx=canvas.clientWidth-(x+w)*sx; const by=y*sy,bw=w*sx,bh=h*sy; ctx.strokeRect(bx,by,bw,bh); ctx.fillText(p.class+" "+Math.round(p.score*100)+"%",bx,Math.max(12,by-4)); }); ctx.restore(); } function sampleImage(){ const w=video.videoWidth,h=video.videoHeight; if(!w||!h)return null; const c=document.createElement("canvas"); c.width=160;c.height=120; const g=c.getContext("2d",{willReadFrequently:true}); g.drawImage(video,0,0,c.width,c.height); return {c,g,data:g.getImageData(0,0,c.width,c.height)}; } function analyzePixels(){ const s=sampleImage(); if(!s)return; const data=s.data.data; let sum=0,diff=0,edges=0; const gray=[]; for(let i=0;i<data.length;i+=4){ const v=(data[i]+data[i+1]+data[i+2])/3; gray.push(v);sum+=v; } brightness=sum/(data.length/4); if(previousFrame&&previousFrame.length===gray.length){ for(let i=0;i<gray.length;i++){ diff+=Math.abs(gray[i]-previousFrame[i]); if(i>160&&Math.abs(gray[i]-gray[i-160])>40)edges++; } motionScore=diff/gray.length; }else motionScore=0; previousFrame=gray; if(active.has(8)||active.has(30)||active.has(31)||active.has(32)||active.has(34)||active.has(35)||active.has(37)||active.has(38)||active.has(39)){ const lines=[]; if(active.has(8))lines.push("Motion score: "+motionScore.toFixed(1)); if(active.has(30))lines.push(motionScore>15?"MOTION ALERT":"No major movement"); if(active.has(31))lines.push("Scene change estimate: "+(motionScore>25?"HIGH":"LOW")); if(active.has(32))lines.push("Brightness: "+brightness.toFixed(1)+"/255"); if(active.has(33))lines.push("Shadow: no reliable shadow classifier loaded"); if(active.has(34))lines.push("Shape detector: basic edge analysis"); if(active.has(35))lines.push("Edge estimate: "+edges); if(active.has(36)){ const avg=[0,0,0],n=data.length/4; for(let i=0;i<data.length;i+=4){avg[0]+=data[i];avg[1]+=data[i+1];avg[2]+=data[i+2]} lines.push("Average RGB: "+avg.map(v=>Math.round(v/n)).join(", ")); } if(active.has(37))lines.push(brightness>220?"Bright flash estimate":"No bright flash"); if(active.has(38))lines.push(motionScore>25?"Possible camera shake":"No strong shake detected"); if(active.has(39))lines.push("Scene change estimate: "+(motionScore>20?"CHANGE":"STABLE")); result(lines.join("\n")); } } async function runFaceModel(){ if(!cameraOn||!faceMesh||working||!video.videoWidth)return; if(!active.size)return; working=true; try{ await faceMesh.send({image:video}); }catch(e){} working=false; } async function runObjectModel(){ if(!coco||!cameraOn||!video.videoWidth)return; if(Date.now()-lastObject<700)return; lastObject=Date.now(); try{ predictions=await coco.detect(video,20,.45); if(active.has(7)||active.has(4)||active.has(5)||active.has(11)||active.has(19)||active.has(28)||active.has(29)){ const persons=predictions.filter(p=>p.class==="person").length; const cars=predictions.filter(p=>["car","truck","bus","motorcycle"].includes(p.class)).length; const animals=predictions.filter(p=>["cat","dog","bird","horse","sheep","cow","bear","zebra","giraffe"].includes(p.class)).length; const lines=[]; if(active.has(7))lines.push("Detected: "+predictions.map(p=>p.class+" "+Math.round(p.score*100)+"%").join(", ")); if(active.has(4)||active.has(5)||active.has(28))lines.push("People detected: "+persons); if(active.has(4))lines.push("Body detector: COCO person bounding boxes"); if(active.has(11))lines.push("Animals detected: "+animals); if(active.has(19))lines.push("Clothing: generic object classes only; no dedicated clothing model"); if(active.has(28))lines.push("Person count estimate: "+persons); if(active.has(29))lines.push("Object count estimate: "+predictions.length); result(lines.join("\n")||"Objects detected"); } }catch(e){log("Object detection error")} } async function runHands(){ if(!handModel||!cameraOn||!video.videoWidth)return; if(!active.has(6)&&!active.has(18))return; try{ handPoints=await handModel.estimateHands(video,false); const lines=["Hands detected: "+handPoints.length]; handPoints.forEach((h,i)=>{ lines.push("Hand "+(i+1)+": "+h.landmarks.length+" landmarks"); }); if(active.has(18))lines.push("Gesture classification is approximate; landmarks only."); result(lines.join("\n")); }catch(e){} } function drawHands(){ if(!handPoints?.length)return; ctx.save();ctx.fillStyle=color;ctx.strokeStyle=color; handPoints.forEach(h=>{ h.landmarks.forEach(p=>{ const x=canvas.clientWidth-(p[0]/video.videoWidth)*canvas.clientWidth; const y=(p[1]/video.videoHeight)*canvas.clientHeight; ctx.beginPath();ctx.arc(x,y,3,0,Math.PI*2);ctx.fill(); }); }); ctx.restore(); } async function scanQR(){ const s=sampleImage();if(!s)return; if(typeof jsQR!=="function"){say("QR library unavailable");return} const code=jsQR(s.data.data,s.data.width,s.data.height); if(code){ if(code.data!==lastQR){lastQR=code.data;say("QR CODE FOUND:\n"+code.data)} }else say("No QR code detected"); } async function scanText(){ if(!video.videoWidth)return; if(!window.Tesseract){say("OCR library unavailable");return} if(Date.now()-lastOCR<4000)return; lastOCR=Date.now(); say("OCR processing image... please wait"); try{ const s=sampleImage(); const out=await Tesseract.recognize(s.c,"eng"); say("OCR TEXT:\n"+out.data.text); }catch(e){say("OCR error: "+e.message)} } function animate(){ if(!cameraOn)return; resizeIfNeeded(); ctx.clearRect(0,0,canvas.clientWidth,canvas.clientHeight); if(active.size){ drawFace(); drawObjects(); drawHands(); drawScanner(); } runFaceModel(); if(active.has(4)||active.has(5)||active.has(7)||active.has(11)||active.has(19)||active.has(28)||active.has(29))runObjectModel(); if(active.has(6)||active.has(18))runHands(); if(active.has(8)||active.has(30)||active.has(31)||active.has(32)||active.has(33)||active.has(34)||active.has(35)||active.has(36)||active.has(37)||active.has(38)||active.has(39))analyzePixels(); if(active.has(14))scanQR(); raf=requestAnimationFrame(animate); } function resizeIfNeeded(){ const d=Math.min(devicePixelRatio||1,2); const w=Math.floor(canvas.clientWidth*d),h=Math.floor(canvas.clientHeight*d); if(canvas.width!==w||canvas.height!==h){ canvas.width=w;canvas.height=h; ctx.setTransform(d,0,0,d,0,0); } } function drawScanner(){ if(!active.has(40))return; ctx.save(); ctx.strokeStyle=color;ctx.lineWidth=2; const w=canvas.clientWidth,h=canvas.clientHeight; const y=(performance.now()/4)%(h||1); ctx.beginPath();ctx.moveTo(0,y);ctx.lineTo(w,y);ctx.stroke(); ctx.restore(); } $("theme").onchange=e=>{ color=e.target.value; document.documentElement.style.setProperty("--c",color); }; $("clear").onclick=()=>{ active.clear(); document.querySelectorAll(".det").forEach(b=>b.classList.remove("active")); predictions=[];handPoints=[];facePoints=null; ctx.clearRect(0,0,canvas.width,canvas.height); result("All detector modes turned off."); log("Detectors cleared"); }; $("flip").onclick=async()=>{ front=!front; if(cameraOn){stopCamera();await startCamera()} }; $("full").onclick=async()=>{ try{ if(!document.fullscreenElement)await document.documentElement.requestFullscreen(); else await document.exitFullscreen(); }catch(e){log("Fullscreen unavailable")} }; $("photo").onclick=()=>{ if(!cameraOn){say("Start camera first");return} const out=document.createElement("canvas"); out.width=video.videoWidth;out.height=video.videoHeight; const c=out.getContext("2d"); c.save();c.translate(out.width,0);c.scale(-1,1); c.drawImage(video,0,0,out.width,out.height);c.restore(); const a=document.createElement("a"); a.download="cyber-studio.png";a.href=out.toDataURL("image/png");a.click(); log("Photo saved"); }; $("record").onclick=()=>{ if(!cameraOn){say("Start camera first");return} if(!recording){ try{ const out=document.createElement("canvas"); out.width=video.videoWidth;out.height=video.videoHeight; const c=out.getContext("2d"); recording=true; const render=()=>{ if(!recording)return; c.save();c.translate(out.width,0);c.scale(-1,1); c.drawImage(video,0,0,out.width,out.height);c.restore(); try{c.drawImage(canvas,0,0,out.width,out.height)}catch(e){} requestAnimationFrame(render); }; render(); const recStream=out.captureStream(24); recorder=new MediaRecorder(recStream); recordChunks=[]; recorder.ondataavailable=e=>{if(e.data.size)recordChunks.push(e.data)}; recorder.onstop=()=>{ const blob=new Blob(recordChunks,{type:recorder.mimeType||"video/webm"}); const url=URL.createObjectURL(blob); const a=document.createElement("a"); a.href=url;a.download="cyber-studio.webm";a.click(); setTimeout(()=>URL.revokeObjectURL(url),5000); recStream.getTracks().forEach(t=>t.stop()); log("Video exported"); }; recorder.start(); $("record").textContent="β–  STOP RECORDING"; }catch(e){recording=false;say("Recording unavailable: "+e.message)} }else{ recording=false; if(recorder&&recorder.state!=="inactive")recorder.stop(); $("record").textContent="πŸ”΄ RECORD"; } }; // Audio permission is only requested when the user enables this detector. async function soundDetector(){ if(!active.has(15))return; try{ if(!stream||!stream.getAudioTracks().length){ log("Audio track unavailable; restart camera with microphone permission"); active.delete(15);return; } const AC=window.AudioContext||window.webkitAudioContext; const ac=new AC(); const src=ac.createMediaStreamSource(stream); const analyser=ac.createAnalyser(); src.connect(analyser); analyser.fftSize=256; const data=new Uint8Array(analyser.frequencyBinCount); analyser.getByteTimeDomainData(data); let sum=0; for(const v of data)sum+=(v-128)*(v-128); result("Microphone level estimate: "+Math.sqrt(sum/data.length).toFixed(1)); setTimeout(()=>ac.c<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <meta name="theme-color" content="#001000"> <title>ULTIMATE CYBER STUDIO</title> <script src="https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh.js"></script> <style> :root{--n:#00ff66;--bg:#020604} *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--n);font:12px monospace} #app{height:100dvh;position:relative;overflow:hidden;background:#000} #video,#fx{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} #video{transform:scaleX(-1);filter:brightness(.65) contrast(1.2)} #fx{pointer-events:none} #hud{position:absolute;z-index:4;top:8px;left:8px;right:8px;padding:10px;background:#001008df;border:1px solid var(--n);box-shadow:0 0 15px #00ff6640} #title{font-size:19px;font-weight:bold;text-shadow:0 0 10px var(--n)} #status,#stats{font-size:10px;margin-top:5px;overflow-wrap:anywhere} #terminal{position:absolute;z-index:4;left:8px;right:8px;bottom:145px;height:85px;overflow:hidden;background:#001008dc;border-left:2px solid var(--n);padding:8px;line-height:1.5;font-size:10px} #controls{position:absolute;z-index:6;bottom:5px;left:4px;right:4px;max-height:132px;overflow:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:5px;background:#000b;padding:5px} button,select{background:#001508;color:var(--n);border:1px solid var(--n);border-radius:4px;padding:9px 10px;font: bold 10px monospace} button:active{background:var(--n);color:#000} #alert{display:none;position:absolute;inset:0;z-index:3;border:5px solid red;box-shadow:inset 0 0 55px red;pointer-events:none;animation:blink .5s infinite alternate} #scanline{position:absolute;top:0;left:0;width:100%;height:2px;background:var(--n);box-shadow:0 0 15px var(--n);z-index:2;pointer-events:none;animation:scan 3s linear infinite} #toast{position:absolute;z-index:7;top:115px;left:10px;right:10px;text-align:center;pointer-events:none;text-shadow:0 0 8px var(--n)} @keyframes scan{to{top:100%}} @keyframes blink{to{opacity:.25}} .glitch{animation:glitch .15s infinite} @keyframes glitch{25%{filter:hue-rotate(90deg);transform:translateX(2px)}50%{transform:translateX(-2px)}} @media(max-height:600px){#terminal{bottom:110px;height:55px}#controls{max-height:100px}button,select{padding:6px}} </style> </head> <body> <div id="app"> <video id="video" autoplay playsinline muted></video> <canvas id="fx"></canvas> <div id="scanline"></div> <div id="alert"></div> <header id="hud"> <div id="title">β—ˆ ULTIMATE CYBER STUDIO</div> <div id="status">SYSTEM STANDBY // CAMERA OFF</div> <div id="stats">MATRIX ON | SCANNER ON | SIMULATION</div> </header> <div id="toast"></div> <div id="terminal"> &gt; CYBER INTERFACE INITIALIZED<br> &gt; Waiting for user command... </div> <div id="controls"> <button id="start">β–Ά CAMERA</button> <button id="matrix">MATRIX ON</button> <button id="scanner">SCANNER ON</button> <button id="ghost">GHOST OFF</button> <button id="target">TARGET ON</button> <button id="glitch">GLITCH OFF</button> <button id="danger">DANGER MODE</button> <button id="radar">RADAR ON</button> <button id="dna">DNA ON</button> <button id="sound">SOUND OFF</button> <button id="photo">πŸ“Έ PHOTO</button> <button id="record">πŸ”΄ RECORD</button> <button id="flip">FLIP CAMERA</button> <button id="full">FULLSCREEN</button> <button id="reset">RESET FX</button> <select id="theme"> <option value="#00ff66">NEON GREEN</option> <option value="#00ccff">CYBER BLUE</option> <option value="#d45bff">PURPLE</option> <option value="#ff3344">RED</option> <option value="#ffff00">YELLOW</option> </select> </div> </div> <script> "use strict"; const $=id=>document.getElementById(id); const video=$("video"),canvas=$("fx"),ctx=canvas.getContext("2d"); let stream=null,mesh=null,face=null,running=false,processing=false; let matrixOn=true,scannerOn=true,ghostOn=false,targetOn=true; let glitchOn=false,dangerOn=false,radarOn=true,dnaOn=true,soundOn=false; let front=true,recorder=null,chunks=[],recording=false; let drops=[],radarAngle=0,dnaAngle=0,animId=null,audioCtx=null; let neon="#00ff66",lastLog=0; function resize(){ const dpr=Math.min(devicePixelRatio||1,2); canvas.width=Math.round(innerWidth*dpr); canvas.height=Math.round(innerHeight*dpr); canvas.style.width=innerWidth+"px"; canvas.style.height=innerHeight+"px"; ctx.setTransform(dpr,0,0,dpr,0,0); drops=Array.from({length:Math.ceil(innerWidth/15)},()=>Math.random()*innerHeight/15); draw(); } addEventListener("resize",resize); function toast(t){ $("toast").textContent=t; setTimeout(()=>{$("toast").textContent=""},2200); } function log(t){ let d=document.createElement("div"); d.textContent="> "+new Date().toLocaleTimeString()+" "+t; $("terminal").appendChild(d); while($("terminal").children.length>5)$("terminal").firstChild.remove(); } function stats(){ $("stats").textContent= `MATRIX ${matrixOn?"ON":"OFF"} | SCANNER ${scannerOn?"ON":"OFF"} | `+ `FACE ${face?"FOUND":"SEARCHING"} | SIMULATION`; } function toggle(id,label,get,set){ $(id).onclick=()=>{ set(!get()); $(id).textContent=label+" "+(get()?"ON":"OFF"); log(label+" "+(get()?"enabled":"disabled")); stats();draw(); }; } function drawMatrix(){ if(!matrixOn)return; ctx.save();ctx.font="14px monospace";ctx.fillStyle=neon; for(let i=0;i<drops.length;i++){ ctx.globalAlpha=.3+Math.random()*.6; ctx.fillText(String.fromCharCode(0x30A0+Math.random()*96),i*15,drops[i]*15); if(drops[i]*15>innerHeight&&Math.random()>.97)drops[i]=0; drops[i]+=.5+Math.random()*1.1; } ctx.restore(); } function drawScanner(){ if(!face||!scannerOn)return; const w=innerWidth,h=innerHeight; const p=face.map(a=>({x:(1-a.x)*w,y:a.y*h})); const xs=p.map(a=>a.x),ys=p.map(a=>a.y); const l=Math.max(0,Math.min(...xs)),r=Math.min(w,Math.max(...xs)); const t=Math.max(0,Math.min(...ys)),b=Math.min(h,Math.max(...ys)); const fw=r-l,fh=b-t,cx=(l+r)/2,cy=(t+b)/2; if(fw<5||fh<5)return; ctx.save();ctx.strokeStyle=neon;ctx.fillStyle=neon; ctx.lineWidth=1.5;ctx.shadowColor=neon;ctx.shadowBlur=12; if(ghostOn){ ctx.beginPath();ctx.ellipse(cx,cy,fw*.53,fh*.57,0,0,Math.PI*2); ctx.fillStyle="#000";ctx.fill();ctx.strokeStyle=neon;ctx.stroke(); } if(targetOn){ const s=18; [[l,t,1,1],[r,t,-1,1],[l,b,1,-1],[r,b,-1,-1]].forEach(([x,y,dx,dy])=>{ ctx.beginPath();ctx.moveTo(x,y+dy*s);ctx.lineTo(x,y);ctx.lineTo(x+dx*s,y);ctx.stroke(); }); ctx.beginPath();ctx.ellipse(cx,cy,fw*.55,fh*.58,0,0,Math.PI*2);ctx.stroke(); } const sy=(performance.now()/5)%Math.max(1,fh); ctx.beginPath();ctx.moveTo(l,t+sy);ctx.lineTo(r,t+sy);ctx.stroke(); for(let i=0;i<p.length;i+=5){ ctx.beginPath();ctx.arc(p[i].x,p[i].y,1.3,0,Math.PI*2);ctx.fill(); } ctx.font="10px monospace";ctx.fillText("FACE TRACKED",l,Math.max(12,t-6)); ctx.restore(); } function drawRadar(){ if(!radarOn)return; const x=innerWidth-58,y=innerHeight*.48,r=35; ctx.save();ctx.strokeStyle=neon;ctx.fillStyle=neon;ctx.globalAlpha=.8; ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);ctx.stroke(); ctx.beginPath();ctx.moveTo(x-r,y);ctx.lineTo(x+r,y);ctx.moveTo(x,y-r);ctx.lineTo(x,y+r);ctx.stroke(); radarAngle+=.035; ctx.beginPath();ctx.moveTo(x,y);ctx.arc(x,y,r,radarAngle,radarAngle+.6);ctx.closePath();ctx.fill(); ctx.restore(); } function drawDNA(){ if(!dnaOn)return; const x=innerWidth-25,top=innerHeight*.30,height=100; ctx.save();ctx.strokeStyle=neon;ctx.fillStyle=neon;ctx.lineWidth=1; for(let i=0;i<20;i++){ const y=top+i*height/20; const phase=i*.48+dnaAngle; const x1=x+Math.sin(phase)*12,x2=x+Math.sin(phase+Math.PI)*12; ctx.beginPath();ctx.moveTo(x1,y);ctx.lineTo(x2,y);ctx.stroke(); ctx.beginPath();ctx.arc(x1,y,1.8,0,Math.PI*2);ctx.fill(); ctx.beginPath();ctx.arc(x2,y,1.8,0,Math.PI*2);ctx.fill(); } dnaAngle+=.035;ctx.restore(); } function draw(){ ctx.clearRect(0,0,innerWidth,innerHeight); drawMatrix();drawScanner();drawRadar();drawDNA(); if(running)animId=requestAnimationFrame(draw); } function startRender(){ if(animId)cancelAnimationFrame(animId); animId=requestAnimationFrame(draw); } async function processFrames(){ if(!running||!mesh)return; if(video.readyState>=2&&!processing){ processing=true; try{await mesh.send({image:video})}catch(e){console.error(e)} processing=false; } if(running)requestAnimationFrame(processFrames); } async function startCamera(){ if(running)return; if(!navigator.mediaDevices?.getUserMedia){ $("status").textContent="CAMERA REQUIRES HTTPS"; toast("Open this page on HTTPS");return; } $("start").disabled=true; try{ stream=await navigator.mediaDevices.getUserMedia({ audio:false, video:{facingMode:front?"user":"environment",width:{ideal:640},height:{ideal:480}} }); video.srcObject=stream;await video.play(); if(typeof FaceMesh==="undefined")throw Error("Face tracking library did not load"); mesh=new FaceMesh({locateFile:f=>"https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/"+f}); mesh.setOptions({maxNumFaces:1,refineLandmarks:false,minDetectionConfidence:.5,minTrackingConfidence:.5}); mesh.onResults(res=>{ face=res.multiFaceLandmarks?.[0]||null; $("status").textContent=face?"SYSTEM ONLINE // FACE TRACKED":"SYSTEM ONLINE // SEARCHING"; stats(); }); running=true;$("start").textContent="CAMERA ACTIVE"; $("status").textContent="CYBER SYSTEM ONLINE"; log("Camera enabled by user"); log("Face tracking simulation started"); toast("CYBER MODE ACTIVATED"); startRender();processFrames(); }catch(e){ if(stream)stream.getTracks().forEach(t=>t.stop()); stream=null;video.srcObject=null; $("status").textContent="ERROR: "+e.message; $("start").disabled=false;$("start").textContent="RETRY CAMERA"; } } async function flipCamera(){ front=!front; if(running){ stopCamera(); await startCamera(); }else toast(front?"FRONT CAMERA SELECTED":"BACK CAMERA SELECTED"); } function stopCamera(){ running=false;processing=false;face=null; if(stream)stream.getTracks().forEach(t=>t.stop()); stream=null;video.srcObject=null; if(animId)cancelAnimationFrame(animId); animId=null; if(mesh){mesh.close();mesh=null} $("start").disabled=false;$("start").textContent="β–Ά CAMERA"; $("status").textContent="CAMERA OFF"; draw(); } toggle("matrix","MATRIX",()=>matrixOn,v=>matrixOn=v); toggle("scanner","SCANNER",()=>scannerOn,v=>scannerOn=v); toggle("ghost","GHOST",()=>ghostOn,v=>ghostOn=v); toggle("target","TARGET",()=>targetOn,v=>targetOn=v); toggle("radar","RADAR",()=>radarOn,v=>radarOn=v); toggle("dna","DNA",()=>dnaOn,v=>dnaOn=v); toggle("glitch","GLITCH",()=>glitchOn,v=>{ glitchOn=v;$("app").classList.toggle("glitch",v); }); $("danger").onclick=()=>{ dangerOn=!dangerOn;$("alert").style.display=dangerOn?"block":"none"; $("danger").textContent=dangerOn?"STOP ALERT":"DANGER MODE"; log(dangerOn?"Visual warning activated":"Visual warning stopped"); }; $("theme").onchange=e=>{ neon=e.target.value; document.documentElement.style.setProperty("--n",neon); log("Theme changed");draw(); }; $("sound").onclick=async()=>{ soundOn=!soundOn;$("sound").textContent="SOUND "+(soundOn?"ON":"OFF"); if(soundOn){ try{ audioCtx ||=new(window.AudioContext||window.webkitAudioContext)(); await audioCtx.resume(); const o=audioCtx.createOscillator(),g=audioCtx.createGain(); o.frequency.value=440;g.gain.value=.04; o.connect(g);g.connect(audioCtx.destination); o.start();o.stop(audioCtx.currentTime+.15); }catch(e){} } }; $("start").onclick=startCamera; $("flip").onclick=flipCamera; $("reset").onclick=()=>{ matrixOn=true;scannerOn=true;ghostOn=false;targetOn=true; glitchOn=false;dangerOn=false;radarOn=true;dnaOn=true; $("app").classList.remove("glitch");$("alert").style.display="none"; $("matrix").textContent="MATRIX ON";$("scanner").textContent="SCANNER ON"; $("ghost").textContent="GHOST OFF";$("target").textContent="TARGET ON"; $("glitch").textContent="GLITCH OFF";$("radar").textContent="RADAR ON"; $("dna").textContent="DNA ON"; log("Effects reset");stats();draw(); }; $("full").onclick=async()=>{ try{ if(!document.fullscreenElement)await $("app").requestFullscreen(); else await document.exitFullscreen(); }catch(e){toast("Fullscreen unavailable")} }; $("photo").onclick=()=>{ if(!video.videoWidth){toast("Start camera first");return} const out=document.createElement("canvas"); out.width=video.videoWidth;out.height=video.videoHeight; const c=out.getContext("2d"); c.save();c.translate(out.width,0);c.scale(-1,1); c.drawImage(video,0,0,out.width,out.height);c.restore(); c.drawImage(canvas,0,0,out.width,out.height); const a=document.createElement("a"); a.download="cyber-studio.png";a.href=out.toDataURL("image/png");a.click(); log("Photo exported");toast("PHOTO SAVED"); }; $("record").onclick=()=>{ if(!recording){ if(!video.videoWidth){toast("Start camera first");return} if(!canvas.captureStream||typeof MediaRecorder==="undefined"){ toast("Recording not supported by this browser");return } const out=document.createElement("canvas"); out.width=video.videoWidth;out.height=video.videoHeight; const c=out.getContext("2d"); const render=()=>{ if(!recording)return; c.save();c.translate(out.width,0);c.scale(-1,1); c.drawImage(video,0,0,out.width,out.height);c.restore(); c.drawImage(canvas,0,0,out.width,out.height); requestAnimationFrame(render); }; recording=true;render(); const recStream=out.captureStream(24); try{ const type=MediaRecorder.isTypeSupported("video/webm;codecs=vp9") ?"video/webm;codecs=vp9":"video/webm"; recorder=new MediaRecorder(recStream,{mimeType:type}); chunks=[]; recorder.ondataavailable=e=>{if(e.data.size)chunks.push(e.data)}; recorder.onstop=()=>{ const blob=new Blob(chunks,{type:"video/webm"}); const url=URL.createObjectURL(blob); const a=document.createElement("a"); a.href=url;a.download="cyber-studio.webm";a.click(); setTimeout(()=>URL.revokeObjectURL(url),5000); recStream.getTracks().forEach(t=>t.stop()); toast("VIDEO DOWNLOADED"); }; recorder.start(); $("record").textContent="β–  STOP RECORDING"; log("Recording started"); }catch(e){ recording=false;recStream.getTracks().forEach(t=>t.stop()); toast("Recording could not start"); } }else{ recording=false; if(recorder&&recorder.state!=="inactive")recorder.stop(); $("record").textContent="πŸ”΄ RECORD"; log("Recording stopped"); } }; const msgs=[ "Visual engine online","Matrix simulation running", "Face tracking status updated","Neon interface active", "Cyber dashboard refreshed","Rendering local visual effects" ]; setInterval(()=>{ if(running&&Date.now()-lastLog>3500){ lastLog=Date.now();log(msgs[Math.floor(Math.random()*msgs.length)]); } },4000); resize(); log("Ready. Tap CAMERA to start."); </script> </body> </html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary

7

Requests

2

Domains

478KB

Transfer Size

1871KB

Content Size

772.0ms

Dom Content Loaded

624.0ms

First Paint

774.0ms

Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...