Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WebRTC vs WebSocket Benchmark</title> | |
| <script src="https://cdn.jsdelivr.net/npm/alawmulaw"></script> | |
| <style> | |
| body { | |
| font-family: system-ui, -apple-system, sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 30px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .panel { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 20px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .chat-container { | |
| height: 400px; | |
| overflow-y: auto; | |
| border: 1px solid #e0e0e0; | |
| border-radius: 8px; | |
| padding: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .message { | |
| margin-bottom: 10px; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| max-width: 80%; | |
| } | |
| .message.user { | |
| background-color: #e3f2fd; | |
| margin-left: auto; | |
| } | |
| .message.assistant { | |
| background-color: #f5f5f5; | |
| } | |
| .metrics { | |
| margin-top: 15px; | |
| padding: 10px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| } | |
| .metric { | |
| margin: 5px 0; | |
| font-size: 14px; | |
| } | |
| button { | |
| background-color: #1976d2; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: background-color 0.2s; | |
| } | |
| button:hover { | |
| background-color: #1565c0; | |
| } | |
| button:disabled { | |
| background-color: #bdbdbd; | |
| cursor: not-allowed; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| color: #1976d2; | |
| } | |
| .visualizer { | |
| width: 100%; | |
| height: 100px; | |
| margin: 10px 0; | |
| background: #fafafa; | |
| border-radius: 8px; | |
| } | |
| /* Add styles for disclaimer */ | |
| .disclaimer { | |
| background-color: #fff3e0; | |
| padding: 15px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| max-width: 1400px; | |
| margin: 0 auto 20px auto; | |
| } | |
| /* Update nav bar styles */ | |
| .nav-bar { | |
| background-color: #f5f5f5; | |
| padding: 10px 20px; | |
| margin-bottom: 20px; | |
| } | |
| .nav-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .nav-button { | |
| background-color: #1976d2; | |
| color: white; | |
| border: none; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: background-color 0.2s; | |
| } | |
| .nav-button:hover { | |
| background-color: #1565c0; | |
| } | |
| /* Add styles for toast notifications */ | |
| .toast { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 16px 24px; | |
| border-radius: 4px; | |
| font-size: 14px; | |
| z-index: 1000; | |
| display: none; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .toast.error { | |
| background-color: #f44336; | |
| color: white; | |
| } | |
| .toast.warning { | |
| background-color: #ffd700; | |
| color: black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="nav-bar"> | |
| <div class="nav-container"> | |
| <a href="./webrtc/docs" class="nav-button">WebRTC Docs</a> | |
| <a href="./websocket/docs" class="nav-button">WebSocket Docs</a> | |
| <a href="./telephone/docs" class="nav-button">Telephone Docs</a> | |
| <a href="./ui" class="nav-button">UI</a> | |
| </div> | |
| </nav> | |
| <div class="disclaimer"> | |
| This page compares the WebRTC Round-Trip-Time calculated from <code>getStats()</code> to the time taken to | |
| process a ping/pong response pattern over websockets. It may not be a gold standard benchmark. Both WebRTC and | |
| Websockets have their merits/advantages which is why FastRTC supports both. Artifacts in the WebSocket playback | |
| audio are due to gaps in my frontend processing code and not FastRTC web server. | |
| </div> | |
| <div class="container"> | |
| <div class="panel"> | |
| <h2>WebRTC Connection</h2> | |
| <div id="webrtc-chat" class="chat-container"></div> | |
| <div id="webrtc-metrics" class="metrics"> | |
| <div class="metric">RTT (Round Trip Time): <span id="webrtc-rtt">-</span></div> | |
| </div> | |
| <button id="webrtc-button">Connect WebRTC</button> | |
| </div> | |
| <div class="panel"> | |
| <h2>WebSocket Connection</h2> | |
| <div id="ws-chat" class="chat-container"></div> | |
| <div id="ws-metrics" class="metrics"> | |
| <div class="metric">RTT (Round Trip Time): <span id="ws-rtt">0</span></div> | |
| </div> | |
| <button id="ws-button">Connect WebSocket</button> | |
| </div> | |
| </div> | |
| <audio id="webrtc-audio" style="display: none;"></audio> | |
| <audio id="ws-audio" style="display: none;"></audio> | |
| <div id="error-toast" class="toast"></div> | |
| <script> | |
| // Shared utilities | |
| function generateId() { | |
| return Math.random().toString(36).substring(7); | |
| } | |
| function sendInput(id) { | |
| return function handleMessage(event) { | |
| const eventJson = JSON.parse(event.data); | |
| if (eventJson.type === "send_input") { | |
| fetch('/input_hook', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| webrtc_id: id, | |
| chatbot: chatHistoryWebRTC | |
| }) | |
| }); | |
| } | |
| } | |
| } | |
| let chatHistoryWebRTC = []; | |
| let chatHistoryWebSocket = []; | |
| function addMessage(containerId, role, content) { | |
| const container = document.getElementById(containerId); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.classList.add('message', role); | |
| messageDiv.textContent = content; | |
| container.appendChild(messageDiv); | |
| container.scrollTop = container.scrollHeight; | |
| if (containerId === 'webrtc-chat') { | |
| chatHistoryWebRTC.push({ role, content }); | |
| } else { | |
| chatHistoryWebSocket.push({ role, content }); | |
| } | |
| } | |
| // WebRTC Implementation | |
| let webrtcPeerConnection; | |
| // Add this function to collect RTT stats | |
| async function updateWebRTCStats() { | |
| if (!webrtcPeerConnection) return; | |
| const stats = await webrtcPeerConnection.getStats(); | |
| stats.forEach(report => { | |
| if (report.type === 'candidate-pair' && report.state === 'succeeded') { | |
| const rtt = report.currentRoundTripTime * 1000; // Convert to ms | |
| document.getElementById('webrtc-rtt').textContent = `${rtt.toFixed(2)}ms`; | |
| } | |
| }); | |
| } | |
| async function setupWebRTC() { | |
| const button = document.getElementById('webrtc-button'); | |
| button.textContent = "Stop"; | |
| const config = __RTC_CONFIGURATION__; | |
| webrtcPeerConnection = new RTCPeerConnection(config); | |
| const webrtcId = generateId(); | |
| const timeoutId = setTimeout(() => { | |
| const toast = document.getElementById('error-toast'); | |
| toast.textContent = "Connection is taking longer than usual. Are you on a VPN?"; | |
| toast.className = 'toast warning'; | |
| toast.style.display = 'block'; | |
| // Hide warning after 5 seconds | |
| setTimeout(() => { | |
| toast.style.display = 'none'; | |
| }, 5000); | |
| }, 5000); | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| stream.getTracks().forEach(track => { | |
| webrtcPeerConnection.addTrack(track, stream); | |
| }); | |
| webrtcPeerConnection.addEventListener('track', (evt) => { | |
| const audio = document.getElementById('webrtc-audio'); | |
| if (audio.srcObject !== evt.streams[0]) { | |
| audio.srcObject = evt.streams[0]; | |
| audio.play(); | |
| } | |
| }); | |
| const dataChannel = webrtcPeerConnection.createDataChannel('text'); | |
| dataChannel.onmessage = sendInput(webrtcId); | |
| const offer = await webrtcPeerConnection.createOffer(); | |
| await webrtcPeerConnection.setLocalDescription(offer); | |
| await new Promise((resolve) => { | |
| if (webrtcPeerConnection.iceGatheringState === "complete") { | |
| resolve(); | |
| } else { | |
| const checkState = () => { | |
| if (webrtcPeerConnection.iceGatheringState === "complete") { | |
| webrtcPeerConnection.removeEventListener("icegatheringstatechange", checkState); | |
| resolve(); | |
| } | |
| }; | |
| webrtcPeerConnection.addEventListener("icegatheringstatechange", checkState); | |
| } | |
| }); | |
| const response = await fetch('/webrtc/offer', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| sdp: webrtcPeerConnection.localDescription.sdp, | |
| type: webrtcPeerConnection.localDescription.type, | |
| webrtc_id: webrtcId | |
| }) | |
| }); | |
| const serverResponse = await response.json(); | |
| await webrtcPeerConnection.setRemoteDescription(serverResponse); | |
| // Setup event source for messages | |
| const eventSource = new EventSource('/outputs?webrtc_id=' + webrtcId); | |
| eventSource.addEventListener("output", (event) => { | |
| const eventJson = JSON.parse(event.data); | |
| addMessage('webrtc-chat', eventJson.role, eventJson.content); | |
| }); | |
| // Add periodic stats collection | |
| const statsInterval = setInterval(updateWebRTCStats, 1000); | |
| // Store the interval ID on the connection | |
| webrtcPeerConnection.statsInterval = statsInterval; | |
| webrtcPeerConnection.addEventListener('connectionstatechange', () => { | |
| if (webrtcPeerConnection.connectionState === 'connected') { | |
| clearTimeout(timeoutId); | |
| const toast = document.getElementById('error-toast'); | |
| toast.style.display = 'none'; | |
| } | |
| }); | |
| } catch (err) { | |
| clearTimeout(timeoutId); | |
| console.error('WebRTC setup error:', err); | |
| } | |
| } | |
| function webrtc_stop() { | |
| if (webrtcPeerConnection) { | |
| // Clear the stats interval | |
| if (webrtcPeerConnection.statsInterval) { | |
| clearInterval(webrtcPeerConnection.statsInterval); | |
| } | |
| // Close all tracks | |
| webrtcPeerConnection.getSenders().forEach(sender => { | |
| if (sender.track) { | |
| sender.track.stop(); | |
| } | |
| }); | |
| webrtcPeerConnection.close(); | |
| webrtcPeerConnection = null; | |
| // Reset metrics display | |
| document.getElementById('webrtc-rtt').textContent = '-'; | |
| } | |
| } | |
| // WebSocket Implementation | |
| let webSocket; | |
| let wsMetrics = { | |
| pingStartTime: 0, | |
| rttValues: [] | |
| }; | |
| // Load mu-law library | |
| // Add load promise to track when the script is ready | |
| function resample(audioData, fromSampleRate, toSampleRate) { | |
| const ratio = fromSampleRate / toSampleRate; | |
| const newLength = Math.round(audioData.length / ratio); | |
| const result = new Float32Array(newLength); | |
| for (let i = 0; i < newLength; i++) { | |
| const position = i * ratio; | |
| const index = Math.floor(position); | |
| const fraction = position - index; | |
| if (index + 1 < audioData.length) { | |
| result[i] = audioData[index] * (1 - fraction) + audioData[index + 1] * fraction; | |
| } else { | |
| result[i] = audioData[index]; | |
| } | |
| } | |
| return result; | |
| } | |
| function convertToMulaw(audioData, sampleRate) { | |
| // Resample to 8000 Hz if needed | |
| if (sampleRate !== 8000) { | |
| audioData = resample(audioData, sampleRate, 8000); | |
| } | |
| // Convert float32 [-1,1] to int16 [-32768,32767] | |
| const int16Data = new Int16Array(audioData.length); | |
| for (let i = 0; i < audioData.length; i++) { | |
| int16Data[i] = Math.floor(audioData[i] * 32768); | |
| } | |
| // Convert to mu-law using the library | |
| return alawmulaw.mulaw.encode(int16Data); | |
| } | |
| async function setupWebSocket() { | |
| const button = document.getElementById('ws-button'); | |
| button.textContent = "Stop"; | |
| try { | |
| const stream = await navigator.mediaDevices.getUserMedia({ | |
| audio: { | |
| "echoCancellation": true, | |
| "noiseSuppression": { "exact": true }, | |
| "autoGainControl": { "exact": true }, | |
| "sampleRate": { "ideal": 24000 }, | |
| "sampleSize": { "ideal": 16 }, | |
| "channelCount": { "exact": 1 }, | |
| } | |
| }); | |
| const wsId = generateId(); | |
| wsMetrics.startTime = performance.now(); | |
| // Create audio context and analyser for visualization | |
| const audioContext = new AudioContext(); | |
| const analyser = audioContext.createAnalyser(); | |
| const source = audioContext.createMediaStreamSource(stream); | |
| source.connect(analyser); | |
| // Connect to websocket endpoint | |
| webSocket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/websocket/offer`); | |
| webSocket.onopen = () => { | |
| // Send initial start message | |
| webSocket.send(JSON.stringify({ | |
| event: "start", | |
| websocket_id: wsId | |
| })); | |
| // Setup audio processing | |
| const processor = audioContext.createScriptProcessor(2048, 1, 1); | |
| source.connect(processor); | |
| processor.connect(audioContext.destination); | |
| processor.onaudioprocess = (e) => { | |
| const inputData = e.inputBuffer.getChannelData(0); | |
| const mulawData = convertToMulaw(inputData, audioContext.sampleRate); | |
| const base64Audio = btoa(String.fromCharCode.apply(null, mulawData)); | |
| if (webSocket.readyState === WebSocket.OPEN) { | |
| webSocket.send(JSON.stringify({ | |
| event: "media", | |
| media: { | |
| payload: base64Audio | |
| } | |
| })); | |
| } | |
| }; | |
| // Add ping interval | |
| webSocket.pingInterval = setInterval(() => { | |
| wsMetrics.pingStartTime = performance.now(); | |
| webSocket.send(JSON.stringify({ | |
| event: "ping" | |
| })); | |
| }, 500); | |
| }; | |
| // Setup audio output context | |
| const outputContext = new AudioContext({ sampleRate: 24000 }); | |
| const sampleRate = 24000; // Updated to match server sample rate | |
| let audioQueue = []; | |
| let isPlaying = false; | |
| webSocket.onmessage = (event) => { | |
| const data = JSON.parse(event.data); | |
| if (data?.type === "send_input") { | |
| console.log("sending input") | |
| fetch('/input_hook', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ webrtc_id: wsId, chatbot: chatHistoryWebSocket }) | |
| }); | |
| } | |
| if (data.event === "media") { | |
| // Process received audio | |
| const audioData = atob(data.media.payload); | |
| const mulawData = new Uint8Array(audioData.length); | |
| for (let i = 0; i < audioData.length; i++) { | |
| mulawData[i] = audioData.charCodeAt(i); | |
| } | |
| // Convert mu-law to linear PCM | |
| const linearData = alawmulaw.mulaw.decode(mulawData); | |
| // Create an AudioBuffer | |
| const audioBuffer = outputContext.createBuffer(1, linearData.length, sampleRate); | |
| const channelData = audioBuffer.getChannelData(0); | |
| // Fill the buffer with the decoded data | |
| for (let i = 0; i < linearData.length; i++) { | |
| channelData[i] = linearData[i] / 32768.0; | |
| } | |
| // Queue the audio buffer | |
| audioQueue.push(audioBuffer); | |
| // Start playing if not already playing | |
| if (!isPlaying) { | |
| playNextBuffer(); | |
| } | |
| } | |
| // Add pong handler | |
| if (data.event === "pong") { | |
| const rtt = performance.now() - wsMetrics.pingStartTime; | |
| wsMetrics.rttValues.push(rtt); | |
| // Keep only last 20 values for running mean | |
| if (wsMetrics.rttValues.length > 20) { | |
| wsMetrics.rttValues.shift(); | |
| } | |
| const avgRtt = wsMetrics.rttValues.reduce((a, b) => a + b, 0) / wsMetrics.rttValues.length; | |
| document.getElementById('ws-rtt').textContent = `${avgRtt.toFixed(2)}ms`; | |
| return; | |
| } | |
| }; | |
| function playNextBuffer() { | |
| if (audioQueue.length === 0) { | |
| isPlaying = false; | |
| return; | |
| } | |
| isPlaying = true; | |
| const bufferSource = outputContext.createBufferSource(); | |
| bufferSource.buffer = audioQueue.shift(); | |
| bufferSource.connect(outputContext.destination); | |
| bufferSource.onended = playNextBuffer; | |
| bufferSource.start(); | |
| } | |
| const eventSource = new EventSource('/outputs?webrtc_id=' + wsId); | |
| eventSource.addEventListener("output", (event) => { | |
| console.log("ws output", event); | |
| const eventJson = JSON.parse(event.data); | |
| addMessage('ws-chat', eventJson.role, eventJson.content); | |
| }); | |
| } catch (err) { | |
| console.error('WebSocket setup error:', err); | |
| button.disabled = false; | |
| } | |
| } | |
| function ws_stop() { | |
| if (webSocket) { | |
| webSocket.send(JSON.stringify({ | |
| event: "stop" | |
| })); | |
| // Clear ping interval | |
| if (webSocket.pingInterval) { | |
| clearInterval(webSocket.pingInterval); | |
| } | |
| // Reset RTT display | |
| document.getElementById('ws-rtt').textContent = '-'; | |
| wsMetrics.rttValues = []; | |
| // Clear the stats interval | |
| if (webSocket.statsInterval) { | |
| clearInterval(webSocket.statsInterval); | |
| } | |
| webSocket.close(); | |
| } | |
| } | |
| // Event Listeners | |
| document.getElementById('webrtc-button').addEventListener('click', () => { | |
| const button = document.getElementById('webrtc-button'); | |
| if (button.textContent === 'Connect WebRTC') { | |
| setupWebRTC(); | |
| } else { | |
| webrtc_stop(); | |
| button.textContent = 'Connect WebRTC'; | |
| } | |
| }); | |
| const ws_start_button = document.getElementById('ws-button') | |
| ws_start_button.addEventListener('click', () => { | |
| if (ws_start_button.textContent === 'Connect WebSocket') { | |
| setupWebSocket(); | |
| ws_start_button.textContent = 'Stop'; | |
| } else { | |
| ws_stop(); | |
| ws_start_button.textContent = 'Connect WebSocket'; | |
| } | |
| }); | |
| document.addEventListener("beforeunload", () => { | |
| ws_stop(); | |
| webrtc_stop(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |