[${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 const touch = e.touches[0];\n this.handlePointerMove(touch.clientX, touch.clientY, lastUpdate);\n });\n \n document.addEventListener('touchmove', (e) => {\n if (!isDragging) return;\n const touch = e.touches[0];\n this.handlePointerMove(touch.clientX, touch.clientY, lastUpdate);\n });\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 const color = this.generateColor();\n console.log(`Creating new cursor for ${peerId} with color ${color}`);\n cursor = document.createElement('div');\n cursor.className = 'cursor';\n cursor.style.backgroundColor = color;\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 try {\n const response = 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 if (!response.ok) {\n throw new Error(`Failed to send offer: ${response.status}`);\n }\n \n console.log(`Offer sent successfully to ${toPeerId}`);\n } catch (error) {\n console.error(`Failed to send offer to ${toPeerId}:`, error);\n throw error;\n }\n }\n \n async sendAnswer(toPeerId, answer) {\n try {\n const response = 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 if (!response.ok) {\n throw new Error(`Failed to send answer: ${response.status}`);\n }\n \n console.log(`Answer sent successfully to ${toPeerId}`);\n } catch (error) {\n console.error(`Failed to send answer to ${toPeerId}:`, error);\n throw error;\n }\n }\n \n async sendIceCandidate(toPeerId, candidate) {\n try {\n const response = 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 if (!response.ok) {\n throw new Error(`Failed to send ICE candidate: ${response.status}`);\n }\n } catch (error) {\n console.error(`Failed to send ICE candidate to ${toPeerId}:`, error);\n }\n }\n \n async startPolling() {\n console.log('Starting signaling polling...');\n // Poll for offers, answers, and ICE candidates\n setInterval(async () => {\n try {\n await Promise.all([\n this.pollOffers(),\n this.pollAnswers(),\n this.pollIceCandidates()\n ]);\n } catch (error) {\n console.error('Polling error:', error);\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 console.log(`Received offer from ${from}`);\n \n try {\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 console.log(`Setting remote description for ${from}`);\n await pc.setRemoteDescription(new RTCSessionDescription(offer));\n \n console.log(`Creating answer for ${from}`);\n const answer = await pc.createAnswer();\n await pc.setLocalDescription(answer);\n await this.sendAnswer(from, answer);\n console.log(`Answer sent to ${from}`);\n }\n } catch (error) {\n console.error(`Failed to handle offer from ${from}:`, error);\n }\n }\n \n async handleAnswer(answerData) {\n const { from, answer } = answerData;\n console.log(`Received answer from ${from}`);\n \n try {\n const pc = this.peers.get(from);\n if (pc) {\n console.log(`Setting remote description (answer) for ${from}`);\n await pc.setRemoteDescription(new RTCSessionDescription(answer));\n }\n } catch (error) {\n console.error(`Failed to handle answer from ${from}:`, error);\n }\n }\n \n async handleIceCandidate(candidateData) {\n const { from, candidate } = candidateData;\n \n try {\n const pc = this.peers.get(from);\n if (pc) {\n await pc.addIceCandidate(new RTCIceCandidate(candidate));\n }\n } catch (error) {\n console.error(`Failed to handle ICE candidate from ${from}:`, error);\n }\n }\n \n removePeer(peerId) {\n console.log(`Removing peer: ${peerId}`);\n \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});",[],[198,190],"frontend","79a9baf0-84d3-11f0-9bd6-0224a6c84d84","index.html","6e4f1a7a-84d2-11f0-8c5f-0224a6c84d84",22,["D",1756470426251],"\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 Debug Logs\n \n

\n\n \n\n",[],[198,200],"6e4f20ba-84d2-11f0-8c5f-0224a6c84d84",["D",1756469977706],[176,177],[198],["D",1756470018193],[],[18,64],["D",1756469720936],[174],[18],["D",1756469325272],{"_11":12,"_129":70},{"_11":12,"_125":-5,"_69":70,"_31":68,"_126":127,"_128":30},{"_40":116,"_13":16,"_34":37,"_117":83,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":14,"_124":12},"ctx",{"_52":-5,"_148":254,"_255":256,"_257":258,"_259":30,"_260":30,"_261":30,"_262":24,"_263":-5,"_264":-7,"_265":-7,"_266":26,"_267":30,"_268":30,"_269":-5,"_270":30,"_271":30,"_272":30,"_273":-5},"ENV",{"_225":226,"_227":228,"_229":16,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253},"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"]

History · backend