Spaces:

vsmdvic
/

live

Sleeping

App Files Files Community

vsmdvic commited on 29 days ago

Commit

092fbff

verified ·

1 Parent(s): aa89102

Upload 3 files

Browse files

Files changed (3) hide show

admin.html +261 -0
index-6.html +150 -0
server.js +18 -32

admin.html ADDED Viewed

	@@ -0,0 +1,261 @@

+<!DOCTYPE html>
+<html lang="ro">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>STREAM · ADMIN</title>
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500&display=swap');
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { background: #000; color: rgba(255,255,255,0.85); font-family: 'DM Sans', sans-serif; height: 100%; overflow: hidden; }
+body::after {
+  content: '';
+  position: fixed; inset: 0; z-index: 9999;
+  pointer-events: none;
+  backdrop-filter: blur(0.5px);
+  -webkit-backdrop-filter: blur(0.5px);
+}
+.app { display: flex; flex-direction: column; height: 100vh; }
+.topbar {
+  height: 52px; padding: 0 20px; flex-shrink: 0;
+  background: #080808;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  display: flex; align-items: center; justify-content: space-between;
+}
+.brand { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 5px; color: #fff; }
+.topbar-right { display: flex; align-items: center; gap: 10px; }
+.chip {
+  display: flex; align-items: center; gap: 7px;
+  padding: 5px 12px;
+  background: #141414; border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 3px;
+  font-family: 'DM Mono', monospace; font-size: 11px;
+  color: rgba(255,255,255,0.45);
+}
+.chip strong { color: rgba(255,255,255,0.85); font-weight: 500; }
+.btn-live {
+  padding: 8px 20px; border: none; border-radius: 3px;
+  font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 2px;
+  color: #fff; cursor: pointer; transition: all 0.2s;
+  background: #ff2020; box-shadow: 0 0 16px rgba(255,32,32,0.25);
+}
+.btn-live:hover { box-shadow: 0 0 28px rgba(255,32,32,0.45); }
+.btn-live.on { background: #141414; color: #ff2020; border: 1px solid rgba(255,32,32,0.3); box-shadow: none; }
+.preview {
+  flex: 1; position: relative;
+  background: #000;
+  display: flex; align-items: center; justify-content: center;
+  overflow: hidden;
+}
+#dashVideo { max-width: 100%; max-height: 100%; display: block; object-fit: contain; background: #000; }
+.preview-idle {
+  position: absolute; inset: 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  pointer-events: none;
+}
+.preview-idle h3 { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 4px; color: rgba(255,255,255,0.1); }
+.preview-idle p  { font-family: 'DM Mono', monospace; font-size: 10px; color: rgba(255,255,255,0.12); letter-spacing: 1.5px; }
+.controls {
+  height: 62px; padding: 0 20px; flex-shrink: 0;
+  background: #080808; border-top: 1px solid rgba(255,255,255,0.05);
+  display: flex; align-items: center; gap: 10px;
+}
+.ctrl {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 16px;
+  background: #141414; border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 4px;
+  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.45);
+  cursor: pointer; transition: all 0.15s; user-select: none;
+}
+.ctrl:hover { border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
+.ctrl.on { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); color: #fff; }
+.vol-group {
+  display: flex; align-items: center; gap: 9px;
+  margin-left: auto;
+  font-family: 'DM Mono', monospace; font-size: 10px;
+  color: rgba(255,255,255,0.35); letter-spacing: 1px;
+}
+input[type=range] {
+  width: 72px; appearance: none;
+  height: 2px; background: rgba(255,255,255,0.15); border-radius: 2px; outline: none;
+}
+input[type=range]::-webkit-slider-thumb {
+  appearance: none; width: 11px; height: 11px;
+  border-radius: 50%; background: #fff; cursor: pointer;
+}
+.toast {
+  position: fixed; bottom: 18px; left: 50%;
+  transform: translateX(-50%) translateY(12px);
+  background: #181818; border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 5px; padding: 8px 16px;
+  font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.85);
+  z-index: 800; opacity: 0; transition: all 0.22s; pointer-events: none; white-space: nowrap;
+}
+.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+</style>
+</head>
+<body>
+<div class="app">
+  <div class="topbar">
+    <div class="brand">STREAM</div>
+    <div class="topbar-right">
+      <div class="chip">👁 <strong id="dViewers">0</strong> viewers</div>
+      <div class="chip" id="dTimerChip" style="display:none">🔴 <strong id="dTimer">00:00</strong></div>
+      <button class="btn-live" id="btnLive" onclick="toggleLive()">GO LIVE</button>
+    </div>
+  </div>
+  <div class="preview">
+    <video id="dashVideo" autoplay playsinline muted></video>
+    <div class="preview-idle" id="previewIdle">
+      <h3>PREVIEW INACTIV</h3>
+      <p>ACTIVEAZĂ MICROFONUL SAU ECRANUL</p>
+    </div>
+  </div>
+  <div class="controls">
+    <div class="ctrl" id="ctrlMic" onclick="toggleMic()">🎙 Microfon</div>
+    <div class="ctrl" id="ctrlScreen" onclick="toggleScreen()">🖥 Ecran</div>
+    <div class="ctrl" id="ctrlCam" onclick="toggleCam()">📷 Cameră</div>
+    <div class="vol-group">
+      VOL
+      <input type="range" id="volRange" min="0" max="100" value="80" oninput="document.getElementById('volVal').textContent=this.value">
+      <span id="volVal">80</span>
+    </div>
+  </div>
+</div>
+<div class="toast" id="toast"></div>
+<script>
+const WS = (() => { const p = location.protocol === 'https:' ? 'wss' : 'ws'; return `${p}://${location.host}`; })();
+const ICE = [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }];
+let ws, isLive = false;
+let micStream = null, screenStream = null, camStream = null, combinedStream = null;
+let peerConns = {}, timerIv, timerSec = 0;
+function connect() {
+  ws = new WebSocket(WS);
+  ws.onopen = () => ws.send(JSON.stringify({ type: 'streamer_join' }));
+  ws.onmessage = e => handle(JSON.parse(e.data));
+  ws.onclose = () => setTimeout(connect, 3000);
+}
+function handle(msg) {
+  if (msg.type === 'streamer_welcome') document.getElementById('dViewers').textContent = msg.viewerCount;
+  if (msg.type === 'viewer_count') document.getElementById('dViewers').textContent = msg.count;
+  if (msg.type === 'new_viewer' && isLive && combinedStream) createOffer(msg.vid);
+  if (msg.type === 'answer' && peerConns[msg.vid]) peerConns[msg.vid].setRemoteDescription(new RTCSessionDescription(msg.sdp));
+  if (msg.type === 'candidate' && peerConns[msg.vid]) peerConns[msg.vid].addIceCandidate(new RTCIceCandidate(msg.candidate));
+}
+function toggleLive() {
+  if (!isLive) {
+    if (!combinedStream) { toast('Activează mai întâi microfonul sau ecranul!'); return; }
+    isLive = true;
+    ws.send(JSON.stringify({ type: 'go_live' }));
+    const btn = document.getElementById('btnLive');
+    btn.textContent = '⏹ STOP'; btn.classList.add('on');
+    document.getElementById('dTimerChip').style.display = 'flex';
+    timerSec = 0; clearInterval(timerIv);
+    timerIv = setInterval(() => {
+      timerSec++;
+      const m = String(Math.floor(timerSec/60)).padStart(2,'0');
+      const s = String(timerSec%60).padStart(2,'0');
+      document.getElementById('dTimer').textContent = `${m}:${s}`;
+    }, 1000);
+    toast('🔴 Ești LIVE!');
+  } else {
+    isLive = false;
+    ws.send(JSON.stringify({ type: 'end_live' }));
+    const btn = document.getElementById('btnLive');
+    btn.textContent = 'GO LIVE'; btn.classList.remove('on');
+    document.getElementById('dTimerChip').style.display = 'none';
+    clearInterval(timerIv);
+    Object.values(peerConns).forEach(p => p.close());
+    peerConns = {};
+    toast('Stream oprit.');
+  }
+}
+async function toggleMic() {
+  const c = document.getElementById('ctrlMic');
+  if (!micStream) {
+    try { micStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); c.classList.add('on'); c.textContent = '🎙 Mic ON'; rebuild(); }
+    catch { toast('Nu s-a putut accesa microfonul.'); }
+  } else { micStream.getTracks().forEach(t => t.stop()); micStream = null; c.classList.remove('on'); c.textContent = '🎙 Microfon'; rebuild(); }
+}
+async function toggleScreen() {
+  const c = document.getElementById('ctrlScreen');
+  if (!screenStream) {
+    try {
+      screenStream = await navigator.mediaDevices.getDisplayMedia({ video: { frameRate: { ideal: 30, max: 60 }, width: { ideal: 1920 } }, audio: true });
+      c.classList.add('on'); c.textContent = '🖥 Ecran ON';
+      screenStream.getVideoTracks()[0].onended = () => { screenStream = null; c.classList.remove('on'); c.textContent = '🖥 Ecran'; rebuild(); };
+      rebuild();
+    } catch { toast('Partajare anulată.'); }
+  } else { screenStream.getTracks().forEach(t => t.stop()); screenStream = null; c.classList.remove('on'); c.textContent = '🖥 Ecran'; rebuild(); }
+}
+async function toggleCam() {
+  const c = document.getElementById('ctrlCam');
+  if (!camStream) {
+    try { camStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false }); c.classList.add('on'); c.textContent = '📷 Cam ON'; rebuild(); }
+    catch { toast('Nu s-a putut accesa camera.'); }
+  } else { camStream.getTracks().forEach(t => t.stop()); camStream = null; c.classList.remove('on'); c.textContent = '📷 Cameră'; rebuild(); }
+}
+function rebuild() {
+  const tracks = [];
+  if (screenStream) screenStream.getTracks().forEach(t => tracks.push(t));
+  else if (camStream) camStream.getTracks().forEach(t => tracks.push(t));
+  if (micStream) micStream.getTracks().forEach(t => tracks.push(t));
+  combinedStream = tracks.length ? new MediaStream(tracks) : null;
+  const vid = document.getElementById('dashVideo');
+  const idle = document.getElementById('previewIdle');
+  if (combinedStream) {
+    vid.srcObject = combinedStream; idle.style.display = 'none';
+    const vt = combinedStream.getVideoTracks()[0];
+    if (vt) { const s = vt.getSettings(); vid.style.aspectRatio = s.height > s.width ? '9/16' : '16/9'; }
+    if (isLive) { Object.keys(peerConns).forEach(vid => { peerConns[vid].close(); delete peerConns[vid]; createOffer(vid); }); }
+  } else { vid.srcObject = null; idle.style.display = 'flex'; }
+}
+async function createOffer(vid) {
+  const pc = new RTCPeerConnection({ iceServers: ICE });
+  peerConns[vid] = pc;
+  combinedStream.getTracks().forEach(t => pc.addTrack(t, combinedStream));
+  pc.onicecandidate = e => { if (e.candidate) ws.send(JSON.stringify({ type: 'candidate', candidate: e.candidate, vid })); };
+  const offer = await pc.createOffer();
+  await pc.setLocalDescription(offer);
+  ws.send(JSON.stringify({ type: 'offer', sdp: pc.localDescription, vid }));
+}
+let toastTm;
+function toast(msg) {
+  const t = document.getElementById('toast');
+  t.textContent = msg; t.classList.add('show');
+  clearTimeout(toastTm); toastTm = setTimeout(() => t.classList.remove('show'), 2600);
+}
+connect();
+</script>
+</body>
+</html>

index-6.html ADDED Viewed

	@@ -0,0 +1,150 @@

+<!DOCTYPE html>
+<html lang="ro">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>STREAM</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body {
+  background: #000;
+  width: 100vw; height: 100vh;
+  overflow: hidden;
+  display: flex; align-items: center; justify-content: center;
+}
+#viewerVideo {
+  display: block;
+  max-width: 100vw; max-height: 100vh;
+  background: #000;
+  object-fit: contain;
+}
+.offline {
+  position: fixed; inset: 0;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 16px; text-align: center;
+  background: #000;
+}
+.offline-ring {
+  width: 64px; height: 64px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.08);
+  display: flex; align-items: center; justify-content: center;
+  position: relative;
+}
+.offline-ring::before {
+  content: '';
+  position: absolute; inset: -10px; border-radius: 50%;
+  border: 1px solid rgba(255,255,255,0.04);
+  animation: rip 3s ease infinite;
+}
+@keyframes rip { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.12);opacity:.1} }
+.offline h2 {
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 13px; font-weight: 400;
+  letter-spacing: 5px;
+  color: rgba(255,255,255,0.2);
+  text-transform: uppercase;
+}
+.badge-live {
+  position: fixed; top: 18px; left: 18px;
+  display: none; align-items: center; gap: 7px;
+  padding: 5px 13px;
+  background: rgba(0,0,0,0.7);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,30,30,0.35);
+  border-radius: 3px;
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 10px; font-weight: 500;
+  color: #ff2020; letter-spacing: 3px;
+}
+.badge-live.on { display: flex; }
+.dot { width: 6px; height: 6px; border-radius: 50%; background: #ff2020; box-shadow: 0 0 7px #ff2020; animation: blink 1s infinite; }
+@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
+</style>
+</head>
+<body>
+<video id="viewerVideo" autoplay playsinline></video>
+<div class="offline" id="offline">
+  <div class="offline-ring">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="1.5">
+      <circle cx="12" cy="12" r="10"/>
+      <polygon points="10,8 16,12 10,16" fill="rgba(255,255,255,0.07)" stroke="none"/>
+    </svg>
+  </div>
+  <h2>Offline</h2>
+</div>
+<div class="badge-live" id="badgeLive"><div class="dot"></div>LIVE</div>
+<script>
+const WS = (() => { const p = location.protocol === 'https:' ? 'wss' : 'ws'; return `${p}://${location.host}`; })();
+const ICE = [{ urls: 'stun:stun.l.google.com:19302' }, { urls: 'stun:stun1.l.google.com:19302' }];
+let ws, myVid, pc;
+function connect() {
+  ws = new WebSocket(WS);
+  ws.onopen = () => ws.send(JSON.stringify({ type: 'viewer_join' }));
+  ws.onmessage = e => handle(JSON.parse(e.data));
+  ws.onclose = () => setTimeout(connect, 3000);
+}
+async function handle(msg) {
+  if (msg.type === 'viewer_welcome') {
+    myVid = msg.vid;
+    if (msg.isLive) goLive();
+  }
+  if (msg.type === 'stream_started') goLive();
+  if (msg.type === 'stream_ended') goOffline();
+  if (msg.type === 'offer') await doOffer(msg.sdp);
+  if (msg.type === 'candidate' && pc) pc.addIceCandidate(new RTCIceCandidate(msg.candidate));
+}
+function goLive() {
+  document.getElementById('offline').style.display = 'none';
+  document.getElementById('badgeLive').classList.add('on');
+  ws.send(JSON.stringify({ type: 'viewer_ready', vid: myVid }));
+}
+function goOffline() {
+  document.getElementById('offline').style.display = 'flex';
+  document.getElementById('badgeLive').classList.remove('on');
+  document.getElementById('viewerVideo').srcObject = null;
+  if (pc) { pc.close(); pc = null; }
+}
+async function doOffer(sdp) {
+  pc = new RTCPeerConnection({ iceServers: ICE });
+  pc.ontrack = e => {
+    const vid = document.getElementById('viewerVideo');
+    vid.srcObject = e.streams[0];
+    const track = e.streams[0].getVideoTracks()[0];
+    if (track) {
+      const s = track.getSettings();
+      if (s.height > s.width) {
+        vid.style.width = 'auto'; vid.style.height = '100vh';
+      } else {
+        vid.style.width = '100vw'; vid.style.height = 'auto';
+      }
+    }
+  };
+  pc.onicecandidate = e => {
+    if (e.candidate) ws.send(JSON.stringify({ type: 'candidate', candidate: e.candidate }));
+  };
+  await pc.setRemoteDescription(new RTCSessionDescription(sdp));
+  const ans = await pc.createAnswer();
+  await pc.setLocalDescription(ans);
+  ws.send(JSON.stringify({ type: 'answer', sdp: pc.localDescription }));
+}
+connect();
+</script>
+</body>
+</html>

server.js CHANGED Viewed

@@ -4,10 +4,11 @@ const path = require("path");
 const { WebSocketServer } = require("ws");
 const PORT = process.env.PORT || 7860;
-const STREAMER_PASS = "122012";
 const httpServer = http.createServer((req, res) => {
-  const filePath = path.join(__dirname, "index.html");
   fs.readFile(filePath, (err, data) => {
     if (err) { res.writeHead(404); return res.end("Not found"); }
     res.writeHead(200, { "Content-Type": "text/html" });
@@ -19,19 +20,12 @@ const wss = new WebSocketServer({ server: httpServer });
 let streamerWs = null;
 let isLive = false;
-let viewerCount = 0;
-let totalLikes = 0;
 const viewers = new Set();
 function sendTo(ws, obj) {
   if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj));
 }
-function broadcast(obj, exclude = null) {
-  const msg = JSON.stringify(obj);
-  wss.clients.forEach(c => { if (c !== exclude && c.readyState === 1) c.send(msg); });
-}
 wss.on("connection", (ws) => {
   ws.role = null;
   ws._vid = null;
@@ -40,32 +34,30 @@ wss.on("connection", (ws) => {
     let msg; try { msg = JSON.parse(raw); } catch { return; }
     switch (msg.type) {
-      case "streamer_auth":
-        if (msg.password === STREAMER_PASS) {
-          ws.role = "streamer"; streamerWs = ws;
-          sendTo(ws, { type: "auth_ok", viewerCount, totalLikes });
-        } else sendTo(ws, { type: "auth_fail" });
         break;
       case "viewer_join":
         ws.role = "viewer"; ws._vid = Math.random().toString(36).slice(2);
-        viewers.add(ws); viewerCount = viewers.size;
-        sendTo(ws, { type: "viewer_welcome", isLive, totalLikes, vid: ws._vid });
-        sendTo(streamerWs, { type: "viewer_count", count: viewerCount });
         if (isLive) sendTo(streamerWs, { type: "new_viewer", vid: ws._vid });
         break;
       case "go_live":
         if (ws.role !== "streamer") return;
         isLive = true;
-        broadcast({ type: "stream_started" }, ws);
         viewers.forEach(v => sendTo(streamerWs, { type: "new_viewer", vid: v._vid }));
         break;
       case "end_live":
         if (ws.role !== "streamer") return;
         isLive = false;
-        broadcast({ type: "stream_ended" }, ws);
         break;
       case "offer":
@@ -85,15 +77,9 @@ wss.on("connection", (ws) => {
         }
         break;
-      case "chat":
-        const text = (msg.text || "").slice(0, 200).trim(); if (!text) return;
-        const name = ws.role === "streamer" ? "🎙 Streamer" : (msg.name || "Anonim").slice(0, 20);
-        broadcast({ type: "chat", name, text, ts: Date.now(), isStreamer: ws.role === "streamer" });
-        break;
-      case "like":
-        totalLikes++;
-        broadcast({ type: "like_burst", total: totalLikes });
         break;
     }
   });
@@ -101,12 +87,12 @@ wss.on("connection", (ws) => {
   ws.on("close", () => {
     if (ws.role === "streamer") {
       streamerWs = null; isLive = false;
-      broadcast({ type: "stream_ended" });
     } else if (ws.role === "viewer") {
-      viewers.delete(ws); viewerCount = viewers.size;
-      sendTo(streamerWs, { type: "viewer_count", count: viewerCount });
     }
   });
 });
-httpServer.listen(PORT, () => console.log(`🔴 Live platform running on port ${PORT}`));

 const { WebSocketServer } = require("ws");
 const PORT = process.env.PORT || 7860;
 const httpServer = http.createServer((req, res) => {
+  let file = "index.html";
+  if (req.url === "/admin.html") file = "admin.html";
+  const filePath = path.join(__dirname, file);
   fs.readFile(filePath, (err, data) => {
     if (err) { res.writeHead(404); return res.end("Not found"); }
     res.writeHead(200, { "Content-Type": "text/html" });
 let streamerWs = null;
 let isLive = false;
 const viewers = new Set();
 function sendTo(ws, obj) {
   if (ws && ws.readyState === 1) ws.send(JSON.stringify(obj));
 }
 wss.on("connection", (ws) => {
   ws.role = null;
   ws._vid = null;
     let msg; try { msg = JSON.parse(raw); } catch { return; }
     switch (msg.type) {
+      case "streamer_join":
+        ws.role = "streamer"; streamerWs = ws;
+        sendTo(ws, { type: "streamer_welcome", viewerCount: viewers.size });
         break;
       case "viewer_join":
         ws.role = "viewer"; ws._vid = Math.random().toString(36).slice(2);
+        viewers.add(ws);
+        sendTo(ws, { type: "viewer_welcome", isLive, vid: ws._vid });
+        sendTo(streamerWs, { type: "viewer_count", count: viewers.size });
         if (isLive) sendTo(streamerWs, { type: "new_viewer", vid: ws._vid });
         break;
       case "go_live":
         if (ws.role !== "streamer") return;
         isLive = true;
+        viewers.forEach(v => { sendTo(v, { type: "stream_started" }); });
         viewers.forEach(v => sendTo(streamerWs, { type: "new_viewer", vid: v._vid }));
         break;
       case "end_live":
         if (ws.role !== "streamer") return;
         isLive = false;
+        viewers.forEach(v => sendTo(v, { type: "stream_ended" }));
         break;
       case "offer":
         }
         break;
+      case "viewer_ready":
+        ws._vid = msg.vid || ws._vid;
+        sendTo(streamerWs, { type: "new_viewer", vid: ws._vid });
         break;
     }
   });
   ws.on("close", () => {
     if (ws.role === "streamer") {
       streamerWs = null; isLive = false;
+      viewers.forEach(v => sendTo(v, { type: "stream_ended" }));
     } else if (ws.role === "viewer") {
+      viewers.delete(ws);
+      sendTo(streamerWs, { type: "viewer_count", count: viewers.size });
     }
   });
 });
+httpServer.listen(PORT, () => console.log(`Running on port ${PORT}`));