Spaces:

fastrtc
/

webrtc-vs-websocket

Running

File size: 22,839 Bytes

<!DOCTYPE html>
<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>