[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_204":205,"_206":207},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",14,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/webrtc.js","latestPath","fileId","843e64c6-84d2-11f0-ac66-0224a6c84d84","name","webrtc.js","fileType","script","content","class WebRTCMouseDemo {\n constructor() {\n this.peerId = this.generatePeerId();\n this.peers = new Map(); // peerId -> RTCPeerConnection\n this.cursors = new Map(); // peerId -> cursor element\n this.lastMouseUpdate = 0;\n this.mouseThrottle = 50; // ms\n this.ownCursor = null;\n this.logs = [];\n this.maxLogs = 50;\n \n this.setupLogging();\n this.init();\n }\n \n generatePeerId() {\n return Math.random().toString(36).substr(2, 9);\n }\n \n setupLogging() {\n // Override console methods to capture logs\n const originalLog = console.log;\n const originalError = console.error;\n const originalWarn = console.warn;\n \n console.log = (...args) => {\n this.addLog('LOG', args.join(' '));\n originalLog.apply(console, args);\n };\n \n console.error = (...args) => {\n this.addLog('ERROR', args.join(' '));\n originalError.apply(console, args);\n };\n \n console.warn = (...args) => {\n this.addLog('WARN', args.join(' '));\n originalWarn.apply(console, args);\n };\n \n // Catch unhandled errors\n window.addEventListener('error', (event) => {\n this.addLog('ERROR', `Unhandled error: ${event.error?.message || event.message}`);\n });\n \n window.addEventListener('unhandledrejection', (event) => {\n this.addLog('ERROR', `Unhandled promise rejection: ${event.reason}`);\n });\n \n // Setup log panel controls\n document.addEventListener('DOMContentLoaded', () => {\n const toggleBtn = document.getElementById('toggle-logs');\n const clearBtn = document.getElementById('clear-logs');\n const logsPanel = document.getElementById('logs-panel');\n \n if (toggleBtn && logsPanel) {\n toggleBtn.addEventListener('click', () => {\n const isHidden = logsPanel.classList.contains('hidden');\n if (isHidden) {\n logsPanel.classList.remove('hidden');\n toggleBtn.textContent = 'Hide Logs';\n } else {\n logsPanel.classList.add('hidden');\n toggleBtn.textContent = 'Show Logs';\n }\n });\n }\n \n if (clearBtn) {\n clearBtn.addEventListener('click', () => {\n this.clearLogs();\n });\n }\n });\n }\n \n addLog(level, message) {\n const timestamp = new Date().toLocaleTimeString();\n const logEntry = { level, message, timestamp };\n \n this.logs.push(logEntry);\n if (this.logs.length > this.maxLogs) {\n this.logs.shift();\n }\n \n this.updateLogDisplay();\n }\n \n updateLogDisplay() {\n const logContent = document.getElementById('log-content');\n if (!logContent) return;\n \n const logHtml = this.logs.map(log => {\n const color = log.level === 'ERROR' ? 'text-red-400' : \n log.level === 'WARN' ? 'text-yellow-400' : 'text-green-400';\n return `

[${log.timestamp}] ${log.level}: ${log.message}

`;\n }).join('');\n \n logContent.innerHTML = logHtml;\n logContent.scrollTop = logContent.scrollHeight;\n }\n \n clearLogs() {\n this.logs = [];\n this.updateLogDisplay();\n }\n \n generateColor() {\n const colors = [\n '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',\n '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43',\n '#10ac84', '#ee5a24', '#0abde3', '#3867d6', '#8854d0'\n ];\n return colors[Math.floor(Math.random() * colors.length)];\n }\n \n async init() {\n try {\n console.log(`Initializing WebRTC demo with peer ID: ${this.peerId}`);\n this.setupMouseTracking();\n this.createOwnCursor();\n await this.registerPeer();\n this.startPolling();\n this.updateStatus('Connected');\n console.log('WebRTC demo initialized successfully');\n } catch (error) {\n console.error('Failed to initialize WebRTC demo:', error);\n this.updateStatus('Initialization failed');\n }\n }\n \n setupMouseTracking() {\n let lastUpdate = 0;\n \n // Mouse events for desktop\n document.addEventListener('mousemove', (e) => {\n this.handlePointerMove(e.clientX, e.clientY, lastUpdate);\n });\n \n // Touch events for mobile\n let isDragging = false;\n \n document.addEventListener('touchstart', (e) => {\n isDragging = true;\n e.preventDefault(); // Prevent scrolling\n const touch = e.touches[0];\n this.handlePointerMove(touch.clientX, touch.clientY, lastUpdate);\n }, { passive: false });\n \n document.addEventListener('touchmove', (e) => {\n if (!isDragging) return;\n e.preventDefault(); // Prevent scrolling\n const touch = e.touches[0];\n this.handlePointerMove(touch.clientX, touch.clientY, lastUpdate);\n }, { passive: false });\n \n document.addEventListener('touchend', () => {\n isDragging = false;\n });\n \n console.log('Mouse and touch tracking setup complete');\n }\n \n handlePointerMove(x, y, lastUpdate) {\n const now = Date.now();\n if (now - lastUpdate < this.mouseThrottle) return;\n lastUpdate = now;\n \n const mouseData = {\n x: x / window.innerWidth,\n y: y / window.innerHeight,\n timestamp: now\n };\n \n this.updateOwnCursor(x, y);\n this.broadcastMousePosition(mouseData);\n }\n \n createOwnCursor() {\n this.ownCursor = document.createElement('div');\n this.ownCursor.className = 'cursor own-cursor';\n this.ownCursor.style.backgroundColor = '#ffffff';\n document.body.appendChild(this.ownCursor);\n }\n \n updateOwnCursor(x, y) {\n if (this.ownCursor) {\n this.ownCursor.style.left = (x - 6) + 'px';\n this.ownCursor.style.top = (y - 6) + 'px';\n }\n }\n \n async registerPeer() {\n try {\n console.log('Registering peer with signaling server...');\n const response = await fetch('/api/register', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ peerId: this.peerId })\n });\n \n if (!response.ok) {\n throw new Error(`Registration failed: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n console.log(`Registered successfully. Found ${data.peers.length} existing peers:`, data.peers);\n \n // Connect to existing peers\n for (const otherPeerId of data.peers) {\n console.log(`Initiating connection to peer: ${otherPeerId}`);\n await this.createPeerConnection(otherPeerId, true);\n }\n \n } catch (error) {\n console.error('Failed to register peer:', error);\n this.updateStatus('Connection failed');\n throw error;\n }\n }\n \n async createPeerConnection(otherPeerId, isInitiator = false) {\n if (this.peers.has(otherPeerId)) {\n console.log(`Peer connection already exists for: ${otherPeerId}`);\n return;\n }\n \n console.log(`Creating peer connection with ${otherPeerId} (initiator: ${isInitiator})`);\n \n try {\n const pc = new RTCPeerConnection({\n iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]\n });\n \n this.peers.set(otherPeerId, pc);\n \n // Create data channel for mouse positions\n const dataChannel = pc.createDataChannel('mouse', { ordered: false });\n this.setupDataChannel(dataChannel, otherPeerId);\n \n // Handle incoming data channels\n pc.ondatachannel = (event) => {\n console.log(`Received data channel from ${otherPeerId}`);\n this.setupDataChannel(event.channel, otherPeerId);\n };\n \n // Handle ICE candidates\n pc.onicecandidate = (event) => {\n if (event.candidate) {\n console.log(`Sending ICE candidate to ${otherPeerId}`);\n this.sendIceCandidate(otherPeerId, event.candidate);\n } else {\n console.log(`ICE gathering complete for ${otherPeerId}`);\n }\n };\n \n pc.onconnectionstatechange = () => {\n console.log(`Connection state with ${otherPeerId}: ${pc.connectionState}`);\n if (pc.connectionState === 'connected') {\n console.log(`✅ Successfully connected to ${otherPeerId}`);\n } else if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {\n console.log(`❌ Connection lost with ${otherPeerId}`);\n this.removePeer(otherPeerId);\n }\n };\n \n pc.oniceconnectionstatechange = () => {\n console.log(`ICE connection state with ${otherPeerId}: ${pc.iceConnectionState}`);\n };\n \n if (isInitiator) {\n console.log(`Creating offer for ${otherPeerId}`);\n const offer = await pc.createOffer();\n await pc.setLocalDescription(offer);\n await this.sendOffer(otherPeerId, offer);\n console.log(`Offer sent to ${otherPeerId}`);\n }\n \n this.updatePeerCount();\n \n } catch (error) {\n console.error(`Failed to create peer connection with ${otherPeerId}:`, error);\n this.peers.delete(otherPeerId);\n throw error;\n }\n }\n \n setupDataChannel(channel, peerId) {\n channel.onopen = () => {\n console.log(`Data channel opened with ${peerId}`);\n };\n \n channel.onmessage = (event) => {\n try {\n const mouseData = JSON.parse(event.data);\n this.updateRemoteCursor(peerId, mouseData);\n } catch (error) {\n console.error('Failed to parse mouse data:', error);\n }\n };\n \n // Store channel reference\n const pc = this.peers.get(peerId);\n if (pc) {\n pc.dataChannel = channel;\n }\n }\n \n updateRemoteCursor(peerId, mouseData) {\n let cursor = this.cursors.get(peerId);\n \n if (!cursor) {\n cursor = document.createElement('div');\n cursor.className = 'cursor';\n cursor.style.backgroundColor = this.generateColor();\n document.body.appendChild(cursor);\n this.cursors.set(peerId, cursor);\n }\n \n const x = mouseData.x * window.innerWidth;\n const y = mouseData.y * window.innerHeight;\n \n cursor.style.left = (x - 6) + 'px';\n cursor.style.top = (y - 6) + 'px';\n }\n \n broadcastMousePosition(mouseData) {\n const message = JSON.stringify(mouseData);\n \n for (const [peerId, pc] of this.peers.entries()) {\n if (pc.dataChannel && pc.dataChannel.readyState === 'open') {\n try {\n pc.dataChannel.send(message);\n } catch (error) {\n console.error(`Failed to send to ${peerId}:`, error);\n }\n }\n }\n }\n \n async sendOffer(toPeerId, offer) {\n await fetch('/api/offer', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n from: this.peerId,\n to: toPeerId,\n offer: offer\n })\n });\n }\n \n async sendAnswer(toPeerId, answer) {\n await fetch('/api/answer', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n from: this.peerId,\n to: toPeerId,\n answer: answer\n })\n });\n }\n \n async sendIceCandidate(toPeerId, candidate) {\n await fetch('/api/ice', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n from: this.peerId,\n to: toPeerId,\n candidate: candidate\n })\n });\n }\n \n async startPolling() {\n // Poll for offers, answers, and ICE candidates\n setInterval(async () => {\n await Promise.all([\n this.pollOffers(),\n this.pollAnswers(),\n this.pollIceCandidates()\n ]);\n }, 1000);\n }\n \n async pollOffers() {\n try {\n const response = await fetch(`/api/offers/${this.peerId}`);\n const data = await response.json();\n \n for (const offer of data.offers) {\n await this.handleOffer(offer);\n }\n } catch (error) {\n console.error('Failed to poll offers:', error);\n }\n }\n \n async pollAnswers() {\n try {\n const response = await fetch(`/api/answers/${this.peerId}`);\n const data = await response.json();\n \n for (const answer of data.answers) {\n await this.handleAnswer(answer);\n }\n } catch (error) {\n console.error('Failed to poll answers:', error);\n }\n }\n \n async pollIceCandidates() {\n try {\n const response = await fetch(`/api/ice/${this.peerId}`);\n const data = await response.json();\n \n for (const candidateData of data.candidates) {\n await this.handleIceCandidate(candidateData);\n }\n } catch (error) {\n console.error('Failed to poll ICE candidates:', error);\n }\n }\n \n async handleOffer(offerData) {\n const { from, offer } = offerData;\n \n if (!this.peers.has(from)) {\n await this.createPeerConnection(from, false);\n }\n \n const pc = this.peers.get(from);\n if (pc) {\n await pc.setRemoteDescription(new RTCSessionDescription(offer));\n const answer = await pc.createAnswer();\n await pc.setLocalDescription(answer);\n await this.sendAnswer(from, answer);\n }\n }\n \n async handleAnswer(answerData) {\n const { from, answer } = answerData;\n const pc = this.peers.get(from);\n \n if (pc) {\n await pc.setRemoteDescription(new RTCSessionDescription(answer));\n }\n }\n \n async handleIceCandidate(candidateData) {\n const { from, candidate } = candidateData;\n const pc = this.peers.get(from);\n \n if (pc) {\n await pc.addIceCandidate(new RTCIceCandidate(candidate));\n }\n }\n \n removePeer(peerId) {\n // Close peer connection\n const pc = this.peers.get(peerId);\n if (pc) {\n pc.close();\n this.peers.delete(peerId);\n }\n \n // Remove cursor\n const cursor = this.cursors.get(peerId);\n if (cursor) {\n cursor.remove();\n this.cursors.delete(peerId);\n }\n \n this.updatePeerCount();\n }\n \n updateStatus(status) {\n const statusEl = document.getElementById('status');\n if (statusEl) {\n statusEl.textContent = status;\n }\n }\n \n updatePeerCount() {\n const countEl = document.getElementById('peer-count');\n if (countEl) {\n countEl.textContent = `Peers: ${this.peers.size}`;\n }\n }\n}\n\n// Start the demo when page loads\ndocument.addEventListener('DOMContentLoaded', () => {\n new WebRTCMouseDemo();\n});","class WebRTCMouseDemo {\n constructor() {\n this.peerId = this.generatePeerId();\n this.peers = new Map(); // peerId -> RTCPeerConnection\n this.cursors = new Map(); // peerId -> cursor element\n this.lastMouseUpdate = 0;\n this.mouseThrottle = 50; // ms\n this.ownCursor = null;\n this.logs = [];\n this.maxLogs = 50;\n \n this.setupLogging();\n this.init();\n }\n \n generatePeerId() {\n return Math.random().toString(36).substr(2, 9);\n }\n \n setupLogging() {\n // Override console methods to capture logs\n const originalLog = console.log;\n const originalError = console.error;\n const originalWarn = console.warn;\n \n console.log = (...args) => {\n this.addLog('LOG', args.join(' '));\n originalLog.apply(console, args);\n };\n \n console.error = (...args) => {\n this.addLog('ERROR', args.join(' '));\n originalError.apply(console, args);\n };\n \n console.warn = (...args) => {\n this.addLog('WARN', args.join(' '));\n originalWarn.apply(console, args);\n };\n \n // Catch unhandled errors\n window.addEventListener('error', (event) => {\n this.addLog('ERROR', `Unhandled error: ${event.error?.message || event.message}`);\n });\n \n window.addEventListener('unhandledrejection', (event) => {\n this.addLog('ERROR', `Unhandled promise rejection: ${event.reason}`);\n });\n \n // Setup log panel controls\n document.addEventListener('DOMContentLoaded', () => {\n const toggleBtn = document.getElementById('toggle-logs');\n const clearBtn = document.getElementById('clear-logs');\n const logsPanel = document.getElementById('logs-panel');\n \n if (toggleBtn && logsPanel) {\n toggleBtn.addEventListener('click', () => {\n const isHidden = logsPanel.classList.contains('hidden');\n if (isHidden) {\n logsPanel.classList.remove('hidden');\n toggleBtn.textContent = 'Hide Logs';\n } else {\n logsPanel.classList.add('hidden');\n toggleBtn.textContent = 'Show Logs';\n }\n });\n }\n \n if (clearBtn) {\n clearBtn.addEventListener('click', () => {\n this.clearLogs();\n });\n }\n });\n }\n \n addLog(level, message) {\n const timestamp = new Date().toLocaleTimeString();\n const logEntry = { level, message, timestamp };\n \n this.logs.push(logEntry);\n if (this.logs.length > this.maxLogs) {\n this.logs.shift();\n }\n \n this.updateLogDisplay();\n }\n \n updateLogDisplay() {\n const logContent = document.getElementById('log-content');\n if (!logContent) return;\n \n const logHtml = this.logs.map(log => {\n const color = log.level === 'ERROR' ? 'text-red-400' : \n log.level === 'WARN' ? 'text-yellow-400' : 'text-green-400';\n return `

[${log.timestamp}] ${log.level}: ${log.message}

`;\n }).join('');\n \n logContent.innerHTML = logHtml;\n logContent.scrollTop = logContent.scrollHeight;\n }\n \n clearLogs() {\n this.logs = [];\n this.updateLogDisplay();\n }\n \n generateColor() {\n const colors = [\n '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4', '#feca57',\n '#ff9ff3', '#54a0ff', '#5f27cd', '#00d2d3', '#ff9f43',\n '#10ac84', '#ee5a24', '#0abde3', '#3867d6', '#8854d0'\n ];\n return colors[Math.floor(Math.random() * colors.length)];\n }\n \n async init() {\n try {\n console.log(`Initializing WebRTC demo with peer ID: ${this.peerId}`);\n this.setupMouseTracking();\n this.createOwnCursor();\n await this.registerPeer();\n this.startPolling();\n this.updateStatus('Connected');\n console.log('WebRTC demo initialized successfully');\n } catch (error) {\n console.error('Failed to initialize WebRTC demo:', error);\n this.updateStatus('Initialization failed');\n }\n }\n \n setupMouseTracking() {\n let lastUpdate = 0;\n \n // Mouse events for desktop\n document.addEventListener('mousemove', (e) => {\n this.handlePointerMove(e.clientX, e.clientY, lastUpdate);\n });\n \n // Touch events for mobile\n let isDragging = false;\n \n document.addEventListener('touchstart', (e) => {\n isDragging = true;\n e.preventDefault(); // Prevent scrolling\n const touch = e.touches[0];\n this.handlePointerMove(touch.clientX, touch.clientY, lastUpdate);\n }, { passive: false });\n \n document.addEventListener('touchmove', (e) => {\n if (!isDragging) return;\n e.preventDefault(); // Prevent scrolling\n const touch = e.touches[0];\n this.handlePointerMove(touch.clientX, touch.clientY, lastUpdate);\n }, { passive: false });\n \n document.addEventListener('touchend', () => {\n isDragging = false;\n });\n \n console.log('Mouse and touch tracking setup complete');\n }\n \n handlePointerMove(x, y, lastUpdate) {\n const now = Date.now();\n if (now - lastUpdate < this.mouseThrottle) return;\n lastUpdate = now;\n \n const mouseData = {\n x: x / window.innerWidth,\n y: y / window.innerHeight,\n timestamp: now\n };\n \n this.updateOwnCursor(x, y);\n this.broadcastMousePosition(mouseData);\n }\n \n createOwnCursor() {\n this.ownCursor = document.createElement('div');\n this.ownCursor.className = 'cursor own-cursor';\n this.ownCursor.style.backgroundColor = '#ffffff';\n document.body.appendChild(this.ownCursor);\n }\n \n updateOwnCursor(x, y) {\n if (this.ownCursor) {\n this.ownCursor.style.left = (x - 6) + 'px';\n this.ownCursor.style.top = (y - 6) + 'px';\n }\n }\n \n async registerPeer() {\n try {\n console.log('Registering peer with signaling server...');\n const response = await fetch('/api/register', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ peerId: this.peerId })\n });\n \n if (!response.ok) {\n throw new Error(`Registration failed: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n console.log(`Registered successfully. Found ${data.peers.length} existing peers:`, data.peers);\n \n // Connect to existing peers\n for (const otherPeerId of data.peers) {\n console.log(`Initiating connection to peer: ${otherPeerId}`);\n await this.createPeerConnection(otherPeerId, true);\n }\n \n } catch (error) {\n console.error('Failed to register peer:', error);\n this.updateStatus('Connection failed');\n throw error;\n }\n }\n \n async createPeerConnection(otherPeerId, isInitiator = false) {\n if (this.peers.has(otherPeerId)) {\n console.log(`Peer connection already exists for: ${otherPeerId}`);\n return;\n }\n \n console.log(`Creating peer connection with ${otherPeerId} (initiator: ${isInitiator})`);\n \n try {\n const pc = new RTCPeerConnection({\n iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]\n });\n \n this.peers.set(otherPeerId, pc);\n \n // Create data channel for mouse positions\n const dataChannel = pc.createDataChannel('mouse', { ordered: false });\n this.setupDataChannel(dataChannel, otherPeerId);\n \n // Handle incoming data channels\n pc.ondatachannel = (event) => {\n console.log(`Received data channel from ${otherPeerId}`);\n this.setupDataChannel(event.channel, otherPeerId);\n };\n \n // Handle ICE candidates\n pc.onicecandidate = (event) => {\n if (event.candidate) {\n console.log(`Sending ICE candidate to ${otherPeerId}`);\n this.sendIceCandidate(otherPeerId, event.candidate);\n } else {\n console.log(`ICE gathering complete for ${otherPeerId}`);\n }\n };\n \n pc.onconnectionstatechange = () => {\n console.log(`Connection state with ${otherPeerId}: ${pc.connectionState}`);\n if (pc.connectionState === 'connected') {\n console.log(`✅ Successfully connected to ${otherPeerId}`);\n } else if (pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {\n console.log(`❌ Connection lost with ${otherPeerId}`);\n this.removePeer(otherPeerId);\n }\n };\n \n pc.oniceconnectionstatechange = () => {\n console.log(`ICE connection state with ${otherPeerId}: ${pc.iceConnectionState}`);\n };\n \n if (isInitiator) {\n console.log(`Creating offer for ${otherPeerId}`);\n const offer = await pc.createOffer();\n await pc.setLocalDescription(offer);\n await this.sendOffer(otherPeerId, offer);\n console.log(`Offer sent to ${otherPeerId}`);\n }\n \n this.updatePeerCount();\n \n } catch (error) {\n console.error(`Failed to create peer connection with ${otherPeerId}:`, error);\n this.peers.delete(otherPeerId);\n throw error;\n }\n }\n \n setupDataChannel(channel, peerId) {\n channel.onopen = () => {\n console.log(`✅ Data channel opened with ${peerId}`);\n };\n \n channel.onclose = () => {\n console.log(`❌ Data channel closed with ${peerId}`);\n };\n \n channel.onerror = (error) => {\n console.error(`Data channel error with ${peerId}:`, error);\n };\n \n channel.onmessage = (event) => {\n try {\n const mouseData = JSON.parse(event.data);\n this.updateRemoteCursor(peerId, mouseData);\n } catch (error) {\n console.error(`Failed to parse mouse data from ${peerId}:`, error);\n }\n };\n \n // Store channel reference\n const pc = this.peers.get(peerId);\n if (pc) {\n pc.dataChannel = channel;\n }\n }\n \n updateRemoteCursor(peerId, mouseData) {\n let cursor = this.cursors.get(peerId);\n \n if (!cursor) {\n cursor = document.createElement('div');\n cursor.className = 'cursor';\n cursor.style.backgroundColor = this.generateColor();\n document.body.appendChild(cursor);\n this.cursors.set(peerId, cursor);\n }\n \n const x = mouseData.x * window.innerWidth;\n const y = mouseData.y * window.innerHeight;\n \n cursor.style.left = (x - 6) + 'px';\n cursor.style.top = (y - 6) + 'px';\n }\n \n broadcastMousePosition(mouseData) {\n const message = JSON.stringify(mouseData);\n \n for (const [peerId, pc] of this.peers.entries()) {\n if (pc.dataChannel && pc.dataChannel.readyState === 'open') {\n try {\n pc.dataChannel.send(message);\n } catch (error) {\n console.error(`Failed to send to ${peerId}:`, error);\n }\n }\n }\n }\n \n async sendOffer(toPeerId, offer) {\n await fetch('/api/offer', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n from: this.peerId,\n to: toPeerId,\n offer: offer\n })\n });\n }\n \n async sendAnswer(toPeerId, answer) {\n await fetch('/api/answer', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n from: this.peerId,\n to: toPeerId,\n answer: answer\n })\n });\n }\n \n async sendIceCandidate(toPeerId, candidate) {\n await fetch('/api/ice', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n from: this.peerId,\n to: toPeerId,\n candidate: candidate\n })\n });\n }\n \n async startPolling() {\n // Poll for offers, answers, and ICE candidates\n setInterval(async () => {\n await Promise.all([\n this.pollOffers(),\n this.pollAnswers(),\n this.pollIceCandidates()\n ]);\n }, 1000);\n }\n \n async pollOffers() {\n try {\n const response = await fetch(`/api/offers/${this.peerId}`);\n const data = await response.json();\n \n for (const offer of data.offers) {\n await this.handleOffer(offer);\n }\n } catch (error) {\n console.error('Failed to poll offers:', error);\n }\n }\n \n async pollAnswers() {\n try {\n const response = await fetch(`/api/answers/${this.peerId}`);\n const data = await response.json();\n \n for (const answer of data.answers) {\n await this.handleAnswer(answer);\n }\n } catch (error) {\n console.error('Failed to poll answers:', error);\n }\n }\n \n async pollIceCandidates() {\n try {\n const response = await fetch(`/api/ice/${this.peerId}`);\n const data = await response.json();\n \n for (const candidateData of data.candidates) {\n await this.handleIceCandidate(candidateData);\n }\n } catch (error) {\n console.error('Failed to poll ICE candidates:', error);\n }\n }\n \n async handleOffer(offerData) {\n const { from, offer } = offerData;\n \n if (!this.peers.has(from)) {\n await this.createPeerConnection(from, false);\n }\n \n const pc = this.peers.get(from);\n if (pc) {\n await pc.setRemoteDescription(new RTCSessionDescription(offer));\n const answer = await pc.createAnswer();\n await pc.setLocalDescription(answer);\n await this.sendAnswer(from, answer);\n }\n }\n \n async handleAnswer(answerData) {\n const { from, answer } = answerData;\n const pc = this.peers.get(from);\n \n if (pc) {\n await pc.setRemoteDescription(new RTCSessionDescription(answer));\n }\n }\n \n async handleIceCandidate(candidateData) {\n const { from, candidate } = candidateData;\n const pc = this.peers.get(from);\n \n if (pc) {\n await pc.addIceCandidate(new RTCIceCandidate(candidate));\n }\n }\n \n removePeer(peerId) {\n // Close peer connection\n const pc = this.peers.get(peerId);\n if (pc) {\n pc.close();\n this.peers.delete(peerId);\n }\n \n // Remove cursor\n const cursor = this.cursors.get(peerId);\n if (cursor) {\n cursor.remove();\n this.cursors.delete(peerId);\n }\n \n this.updatePeerCount();\n }\n \n updateStatus(status) {\n const statusEl = document.getElementById('status');\n if (statusEl) {\n statusEl.textContent = status;\n }\n }\n \n updatePeerCount() {\n const countEl = document.getElementById('peer-count');\n if (countEl) {\n countEl.textContent = `Peers: ${this.peers.size}`;\n }\n }\n}\n\n// Start the demo when page loads\ndocument.addEventListener('DOMContentLoaded', () => {\n new WebRTCMouseDemo();\n});","createdAt",["D",1756470330342],"branchVersion","branchId","e96dcd8e-84d0-11f0-9cb1-0224a6c84d84","id","e96ce914-84d0-11f0-9cb1-0224a6c84d84","WebRTC",["D",1756469325272],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","d543153e-84d1-11f0-aaf4-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",24,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":200,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":201,"_81":202,"_83":203,"_85":25},"tree",[163,165,168],"files",[163,164,165,166,167,168],"counts",{"_153":137,"_154":63,"_155":137,"_156":157,"_158":159},"contents",[127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":148,"_32":149,"_30":150,"_133":-5,"_42":43,"_41":63,"_135":59,"_39":151,"_13":137,"_34":146,"_36":-5,"_24":25,"_139":-5,"_27":152},{"_44":141,"_32":142,"_30":143,"_133":-5,"_42":43,"_41":144,"_135":59,"_39":145,"_13":137,"_34":146,"_36":-5,"_24":25,"_139":-5,"_27":147},{"_44":130,"_32":131,"_30":132,"_133":-5,"_42":43,"_41":134,"_135":25,"_39":136,"_13":137,"_34":20,"_36":138,"_24":25,"_139":-5,"_27":140},"a99c0d7c-84d2-11f0-aefb-0224a6c84d84","README.md","a99c0e26-84d2-11f0-aefb-0224a6c84d84","parentId",6,"latest",["D",1756470077182],0,"# WebRTC Mouse Cursor Demo\n\nA minimal WebRTC demonstration that shows real-time mouse cursor sharing between multiple users.\n\n## Features\n\n- **Real-time mouse cursor sharing**: See other users' mouse positions in real-time\n- **Peer-to-peer communication**: Uses WebRTC data channels for direct browser-to-browser communication\n- **HTTP-based signaling**: Simple REST API for WebRTC signaling (offers, answers, ICE candidates)\n- **Automatic connection**: Users automatically connect when they visit the page\n- **Minimal UI**: Clean, simple interface with colored cursors for each user\n\n## Architecture\n\n### Frontend (`/frontend/`)\n- `index.html`: Main page with Tailwind CSS styling\n- `webrtc.js`: WebRTC client logic for peer connections and mouse tracking\n\n### Backend (`/backend/`)\n- `index.ts`: Hono server with signaling API endpoints\n\n## How it Works\n\n1. **User visits page**: Automatically generates a unique peer ID\n2. **Registration**: Registers with signaling server and gets list of existing peers\n3. **WebRTC handshake**: Establishes peer-to-peer connections using HTTP polling for signaling\n4. **Mouse sharing**: Broadcasts mouse positions directly between browsers via WebRTC data channels\n5. **Visual feedback**: Shows each user's cursor as a colored dot on screen\n\n## API Endpoints\n\n- `POST /api/register` - Register a new peer\n- `POST /api/offer` - Send WebRTC offer\n- `GET /api/offers/:peerId` - Poll for incoming offers\n- `POST /api/answer` - Send WebRTC answer\n- `GET /api/answers/:peerId` - Poll for incoming answers\n- `POST /api/ice` - Send ICE candidate\n- `GET /api/ice/:peerId` - Poll for ICE candidates\n\n## Technical Details\n\n- **Throttling**: Mouse positions are throttled to 50ms intervals\n- **Cleanup**: Automatic cleanup of stale connections and signaling data\n- **STUN server**: Uses Google's public STUN server for NAT traversal\n- **Data channels**: Unordered data channels for low-latency mouse position updates\n\n## Usage\n\nSimply visit the page and move your mouse around. Open multiple browser tabs or share the URL with others to see multiple cursors in real-time!","label",[131],"6e4f20ba-84d2-11f0-8c5f-0224a6c84d84","frontend","fbd7379b-b748-465c-9284-a94b081a9e35",2,["D",1756469977706],"directory",[142],"d5432470-84d1-11f0-aaf4-0224a6c84d84","backend","95adb4b3-d052-4e19-9770-4d3664b9cb76",["D",1756469720936],[149],"pulls","branches","forks","envVars",{"_160":137,"_162":137},"connections",{"_160":137,"_161":137},"count","unfilledCount","emptyCount",{"_44":148,"_32":149,"_30":150,"_133":-5,"_42":43,"_41":63,"_135":59,"_39":197,"_13":137,"_34":146,"_36":-5,"_24":25,"_139":-5,"_170":198,"_27":199},{"_44":189,"_32":190,"_30":57,"_133":150,"_42":43,"_41":191,"_135":59,"_39":192,"_13":63,"_34":193,"_36":194,"_24":25,"_139":-5,"_170":195,"_27":196},{"_44":141,"_32":142,"_30":143,"_133":-5,"_42":43,"_41":144,"_135":59,"_39":186,"_13":137,"_34":146,"_36":-5,"_24":25,"_139":-5,"_170":187,"_27":188},{"_44":178,"_32":179,"_30":180,"_133":143,"_42":43,"_41":181,"_135":25,"_39":182,"_13":63,"_34":20,"_36":183,"_24":25,"_139":-5,"_170":184,"_27":185},{"_44":173,"_32":33,"_30":31,"_133":143,"_42":43,"_41":14,"_135":25,"_39":174,"_13":175,"_34":35,"_36":38,"_24":25,"_139":-5,"_170":176,"_27":177},{"_44":130,"_32":131,"_30":132,"_133":-5,"_42":43,"_41":134,"_135":25,"_39":169,"_13":137,"_34":20,"_36":138,"_24":25,"_139":-5,"_170":171,"_27":172},["D",1756470077182],"children",[],[131],"407fa94c-84d3-11f0-ad36-0224a6c84d84",["D",1756470330342],8,[],[142,33],"18f0d8d8-84d3-11f0-a56a-0224a6c84d84","index.html","6e4f1a7a-84d2-11f0-8c5f-0224a6c84d84",7,["D",1756470263981],"\n\n\n \n \n WebRTC Mouse Cursors\n \n \n\n\n

WebRTC Mouse Demo

Connecting...

Peers: 0

\n \n

Move mouse/touch to share cursor

Each cursor is a different user

\n\n \n \n\n \n\n",[],[142,179],["D",1756469977706],[166,167],[142],"86713fd4-84d2-11f0-9051-0224a6c84d84","index.ts",4,["D",1756470018193],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// In-memory storage for signaling\nconst peers = new Map();\nconst offers = new Map();\nconst answers = new Map();\nconst iceCandidates = new Map();\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Register a peer\napp.post(\"/api/register\", async c => {\n const { peerId } = await c.req.json();\n peers.set(peerId, { id: peerId, lastSeen: Date.now() });\n \n // Return list of other active peers\n const otherPeers = Array.from(peers.keys()).filter(id => id !== peerId);\n return c.json({ peers: otherPeers });\n});\n\n// Send offer\napp.post(\"/api/offer\", async c => {\n const { from, to, offer } = await c.req.json();\n offers.set(`${from}-${to}`, { from, to, offer, timestamp: Date.now() });\n return c.json({ success: true });\n});\n\n// Get offers for a peer\napp.get(\"/api/offers/:peerId\", c => {\n const peerId = c.req.param(\"peerId\");\n const peerOffers = [];\n \n for (const [key, offer] of offers.entries()) {\n if (offer.to === peerId) {\n peerOffers.push(offer);\n offers.delete(key); // Remove after retrieving\n }\n }\n \n return c.json({ offers: peerOffers });\n});\n\n// Send answer\napp.post(\"/api/answer\", async c => {\n const { from, to, answer } = await c.req.json();\n answers.set(`${from}-${to}`, { from, to, answer, timestamp: Date.now() });\n return c.json({ success: true });\n});\n\n// Get answers for a peer\napp.get(\"/api/answers/:peerId\", c => {\n const peerId = c.req.param(\"peerId\");\n const peerAnswers = [];\n \n for (const [key, answer] of answers.entries()) {\n if (answer.to === peerId) {\n peerAnswers.push(answer);\n answers.delete(key); // Remove after retrieving\n }\n }\n \n return c.json({ answers: peerAnswers });\n});\n\n// Send ICE candidate\napp.post(\"/api/ice\", async c => {\n const { from, to, candidate } = await c.req.json();\n const key = `${from}-${to}`;\n \n if (!iceCandidates.has(key)) {\n iceCandidates.set(key, []);\n }\n \n iceCandidates.get(key)!.push({ from, to, candidate, timestamp: Date.now() });\n return c.json({ success: true });\n});\n\n// Get ICE candidates for a peer\napp.get(\"/api/ice/:peerId\", c => {\n const peerId = c.req.param(\"peerId\");\n const peerCandidates = [];\n \n for (const [key, candidates] of iceCandidates.entries()) {\n const [from, to] = key.split('-');\n if (to === peerId) {\n peerCandidates.push(...candidates);\n iceCandidates.delete(key); // Remove after retrieving\n }\n }\n \n return c.json({ candidates: peerCandidates });\n});\n\n// Cleanup old entries periodically (simple cleanup)\nsetInterval(() => {\n const now = Date.now();\n const timeout = 30000; // 30 seconds\n \n // Clean up old peers\n for (const [id, peer] of peers.entries()) {\n if (now - peer.lastSeen > timeout) {\n peers.delete(id);\n }\n }\n \n // Clean up old offers/answers/candidates\n for (const [key, offer] of offers.entries()) {\n if (now - offer.timestamp > timeout) {\n offers.delete(key);\n }\n }\n \n for (const [key, answer] of answers.entries()) {\n if (now - answer.timestamp > timeout) {\n answers.delete(key);\n }\n }\n \n for (const [key, candidates] of iceCandidates.entries()) {\n const filtered = candidates.filter(c => now - c.timestamp < timeout);\n if (filtered.length === 0) {\n iceCandidates.delete(key);\n } else {\n iceCandidates.set(key, filtered);\n }\n }\n}, 10000); // Run cleanup every 10 seconds\n\nexport default app.fetch;",[],[149,190],["D",1756469720936],[164],[149],["D",1756469325272],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":237,"_238":239,"_240":241,"_242":25,"_243":25,"_244":25,"_245":59,"_246":-5,"_247":-7,"_248":-7,"_249":137,"_250":25,"_251":25,"_252":-5,"_253":25,"_254":25,"_255":25,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":87,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v14