Working WebRTC Streams

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+build
+npm-debug.log
+.env
+.DS_Store

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "project2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.13.2",
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "socket.io": "^4.8.1"
+  }
+}

public/client.js

@@ -0,0 +1,193 @@
+const socket = io();
+let localStream;
+let peerConnection; // For Viewers: connection to the streamer
+let viewerConnections = {}; // For Streamers: map of { socketId: RTCPeerConnection }
+let cloudflareIceServers = [];
+
+const videoDisplay = document.getElementById('videoDisplay');
+const placeholder = document.getElementById('videoPlaceholder');
+const streamListDiv = document.getElementById('streamList');
+const goLiveBtn = document.getElementById('goLiveBtn');
+const stopLiveBtn = document.getElementById('stopLiveBtn');
+
+// 1. Initialize on Load (Fetch Keys & Listen for streams)
+(async function init() {
+	try {
+		const res = await fetch('/api/get-turn-credentials');
+		const data = await res.json();
+		cloudflareIceServers = data.iceServers;
+		console.log("ICE Servers loaded.");
+	} catch (e) {
+		console.error("Failed to load ICE servers:", e);
+	}
+})();
+
+// --- VIEWER LOGIC (Default) ---
+
+// Listen for updates to the list of available streams
+socket.on('streamer_list_update', (streamers) => {
+	streamListDiv.innerHTML = '';
+	const ids = Object.keys(streamers);
+
+	if (ids.length === 0) {
+		streamListDiv.innerHTML = '<p>No active streams.</p>';
+		return;
+	}
+
+	ids.forEach(id => {
+		if (id === socket.id) return; // Don't list myself
+
+		const div = document.createElement('div');
+		div.className = 'stream-item';
+		div.innerHTML = `
+            <span><strong>${streamers[id].name}</strong></span>
+            <button onclick="watchStream('${id}')">Watch</button>
+        `;
+		streamListDiv.appendChild(div);
+	});
+});
+
+// User clicked "Watch" on a stream
+async function watchStream(streamerId) {
+	if (localStream) {
+		alert("You cannot watch while streaming!");
+		return;
+	}
+
+	// UI Updates
+	placeholder.classList.add('hidden');
+	videoDisplay.classList.remove('hidden');
+	videoDisplay.muted = false; // Unmute for viewer
+
+	// Tell server we want to join
+	console.log("Requesting to join stream:", streamerId);
+	socket.emit('join_stream', streamerId);
+
+	// Prepare to receive the Offer
+	socket.off('webrtc_offer'); // Clean previous listeners
+	socket.on('webrtc_offer', async ({ sdp, sender }) => {
+		if (sender !== streamerId) return;
+
+		console.log("Received Offer from streamer.");
+		peerConnection = new RTCPeerConnection({ iceServers: cloudflareIceServers });
+
+		// When we get tracks (video/audio), show them
+		peerConnection.ontrack = (event) => {
+			console.log("Track received");
+			videoDisplay.srcObject = event.streams[0];
+		};
+
+		// Handle ICE candidates to send back to streamer
+		peerConnection.onicecandidate = (event) => {
+			if (event.candidate) {
+				socket.emit('ice_candidate', { target: sender, candidate: event.candidate });
+			}
+		};
+
+		await peerConnection.setRemoteDescription(new RTCSessionDescription(sdp));
+		const answer = await peerConnection.createAnswer();
+		await peerConnection.setLocalDescription(answer);
+
+		socket.emit('webrtc_answer', { target: sender, sdp: answer });
+	});
+
+	// Handle ICE candidates from streamer
+	socket.on('ice_candidate', async ({ candidate, sender }) => {
+		if (peerConnection && sender === streamerId) {
+			await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
+		}
+	});
+}
+
+
+// --- STREAMER LOGIC ---
+
+async function promptForStream() {
+	const name = prompt("Enter a name for your stream:", "My Cool Stream");
+	if (!name) return;
+
+	startStreaming(name);
+}
+
+async function startStreaming(streamName) {
+	try {
+		// 1. Get User Media
+		localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+
+		// 2. Update UI
+		videoDisplay.srcObject = localStream;
+		videoDisplay.classList.remove('hidden');
+		placeholder.classList.add('hidden');
+		videoDisplay.muted = true; // Mute self to avoid echo
+		goLiveBtn.classList.add('hidden');
+		stopLiveBtn.classList.remove('hidden');
+
+		// 3. Announce to Server
+		socket.emit('start_stream', streamName);
+		console.log("Stream announced:", streamName);
+
+		// 4. Handle Incoming Viewers
+		socket.on('viewer_joined', async ({ viewerId }) => {
+			console.log("New viewer joined:", viewerId);
+			createStreamerConnection(viewerId);
+		});
+
+		// 5. Handle Answers from Viewers
+		socket.on('webrtc_answer', async ({ sdp, sender }) => {
+			const pc = viewerConnections[sender];
+			if (pc) {
+				await pc.setRemoteDescription(new RTCSessionDescription(sdp));
+			}
+		});
+
+		// 6. Handle ICE Candidates from Viewers
+		socket.on('ice_candidate', async ({ candidate, sender }) => {
+			const pc = viewerConnections[sender];
+			if (pc) {
+				await pc.addIceCandidate(new RTCIceCandidate(candidate));
+			}
+		});
+
+		// NEW: Handle instant disconnects
+		socket.on('viewer_left', ({ viewerId }) => {
+			console.log(`Viewer ${viewerId} left via socket disconnect.`);
+			const pc = viewerConnections[viewerId];
+			if (pc) {
+				pc.close(); // Stop sending data immediately
+				delete viewerConnections[viewerId];
+			}
+		});
+
+	} catch (err) {
+		console.error("Error starting stream:", err);
+		alert("Could not access camera/microphone.");
+	}
+}
+
+function createStreamerConnection(viewerId) {
+	const pc = new RTCPeerConnection({ iceServers: cloudflareIceServers });
+	viewerConnections[viewerId] = pc;
+
+	// Add local stream tracks to this connection
+	localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
+
+	// Send ICE candidates to this specific viewer
+	pc.onicecandidate = (event) => {
+		if (event.candidate) {
+			socket.emit('ice_candidate', { target: viewerId, candidate: event.candidate });
+		}
+	};
+
+	// Create Offer
+	pc.createOffer().then(offer => {
+		pc.setLocalDescription(offer);
+		socket.emit('webrtc_offer', { target: viewerId, sdp: offer });
+	});
+
+	// Cleanup on disconnect
+	pc.onconnectionstatechange = () => {
+		if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
+			delete viewerConnections[viewerId];
+		}
+	};
+}

public/index.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<title>Live Stream Platform</title>
+	<style>
+		body {
+			font-family: 'Segoe UI', sans-serif;
+			margin: 0;
+			background: #f0f2f5;
+		}
+
+		/* Navbar */
+		nav {
+			background: #fff;
+			padding: 15px 20px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		}
+
+		h1 {
+			margin: 0;
+			font-size: 1.2rem;
+			color: #333;
+		}
+
+		.btn-primary {
+			background: #0070f3;
+			color: white;
+			border: none;
+			padding: 10px 20px;
+			border-radius: 5px;
+			cursor: pointer;
+			font-weight: bold;
+		}
+
+		.btn-primary:hover {
+			background: #0051a2;
+		}
+
+		.btn-danger {
+			background: #e00;
+			color: white;
+			border: none;
+			padding: 10px 20px;
+			border-radius: 5px;
+			cursor: pointer;
+		}
+
+		/* Layout */
+		.container {
+			display: flex;
+			max-width: 1200px;
+			margin: 20px auto;
+			gap: 20px;
+			padding: 0 20px;
+		}
+
+		/* Sidebar (Stream List) */
+		.sidebar {
+			flex: 1;
+			background: white;
+			padding: 20px;
+			border-radius: 8px;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+			height: fit-content;
+		}
+
+		.stream-item {
+			display: flex;
+			justify-content: space-between;
+			padding: 10px;
+			border-bottom: 1px solid #eee;
+			align-items: center;
+		}
+
+		.stream-item button {
+			padding: 5px 15px;
+			cursor: pointer;
+			background: #eee;
+			border: none;
+			border-radius: 4px;
+		}
+
+		.stream-item button:hover {
+			background: #ddd;
+		}
+
+		/* Video Area */
+		.main-stage {
+			flex: 3;
+			background: #000;
+			border-radius: 8px;
+			overflow: hidden;
+			min-height: 480px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+		}
+
+		video {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		.placeholder {
+			color: #888;
+			font-size: 1.5rem;
+		}
+
+		.hidden {
+			display: none !important;
+		}
+	</style>
+</head>
+
+<body>
+	<nav>
+		<h1>WebRTC Live</h1>
+		<button id="goLiveBtn" class="btn-primary" onclick="promptForStream()">Start Streaming</button>
+		<button id="stopLiveBtn" class="btn-danger hidden" onclick="location.reload()">Stop Streaming</button>
+	</nav>
+	<div class="container">
+		<div class="sidebar">
+			<h3>Active Streams</h3>
+			<div id="streamList">Loading...</div>
+		</div>
+		<div class="main-stage">
+			<div id="videoPlaceholder" class="placeholder">Select a stream to watch</div>
+			<video id="videoDisplay" class="hidden" autoplay playsinline></video>
+		</div>
+	</div>
+	<script src="/socket.io/socket.io.js"></script>
+	<script src="client.js"></script>
+</body>
+
+</html>

server.js

@@ -0,0 +1,81 @@
+require('dotenv').config();
+const express = require('express');
+const http = require('http');
+const { Server } = require("socket.io");
+const axios = require('axios');
+
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server);
+
+app.use(express.static('public'));
+
+// --- Cloudflare Credentials ---
+app.get('/api/get-turn-credentials', async (req, res) => {
+	try {
+		const response = await axios.post(
+			`https://rtc.live.cloudflare.com/v1/turn/keys/${process.env.CLOUDFLARE_APP_ID}/credentials/generate-ice-servers`,
+			{ ttl: 86400 },
+			{ headers: { 'Authorization': `Bearer ${process.env.CLOUDFLARE_API_TOKEN}`, 'Content-Type': 'application/json' } }
+		);
+		res.json(response.data);
+	} catch (error) {
+		console.error("Cloudflare error:", error.message);
+		res.status(500).json({ error: "Failed to fetch credentials" });
+	}
+});
+
+// --- Signaling Logic ---
+let streamers = {}; // socketId -> { name: "Gaming Stream" }
+// Add a map to track relationships: viewerSocketId -> streamerSocketId
+let relationships = {};
+
+io.on('connection', (socket) => {
+	// 1. Immediately send the list of active streams to the new user
+	socket.emit('streamer_list_update', streamers);
+
+	// 2. User wants to go live
+	socket.on('start_stream', (name) => {
+		streamers[socket.id] = { name: name };
+		io.emit('streamer_list_update', streamers); // Notify everyone
+	});
+
+	// 3. User wants to watch a specific streamer
+	socket.on('join_stream', (streamerId) => {
+		relationships[socket.id] = streamerId; // Record the link
+		io.to(streamerId).emit('viewer_joined', { viewerId: socket.id });
+	});
+
+	// 4. WebRTC Signaling (Offer/Answer/ICE)
+	socket.on('webrtc_offer', (data) => {
+		io.to(data.target).emit('webrtc_offer', { sdp: data.sdp, sender: socket.id });
+	});
+
+	socket.on('webrtc_answer', (data) => {
+		io.to(data.target).emit('webrtc_answer', { sdp: data.sdp, sender: socket.id });
+	});
+
+	socket.on('ice_candidate', (data) => {
+		io.to(data.target).emit('ice_candidate', { candidate: data.candidate, sender: socket.id });
+	});
+
+	// 5. Cleanup
+	socket.on('disconnect', () => {
+		// 1. If a STREAMER left (existing code)
+		if (streamers[socket.id]) {
+			delete streamers[socket.id];
+			io.emit('streamer_list_update', streamers);
+		}
+
+		// 2. If a VIEWER left (NEW CODE)
+		if (relationships[socket.id]) {
+			const streamerId = relationships[socket.id];
+			// Tell the specific streamer that this specific viewer is gone
+			io.to(streamerId).emit('viewer_left', { viewerId: socket.id });
+			delete relationships[socket.id];
+		}
+	});
+});
+
+const PORT = process.env.PORT || 3000;
+server.listen(PORT, () => console.log(`Server running on http://localhost:${PORT}`));