I’m building a simple peer-to-peer file transfer app using WebRTC in a React application. The goal is to allow direct file transfer between two devices without always relying on a TURN server.
However, I’m encountering a problem: most transfer attempts fail with the following errors in the browser console:
ICE failed
Uncaught (in promise) DOMException: Unknown ufrag
Despite these errors, occasionally the file does transfer successfully if I retry enough times.
Some key details:
-I’m using a custom signaling server over WebSockets to exchange offers, answers, and ICE candidates.
-I already have a TURN server set up, but I’d like to minimize its use for cost reasons and rely on STUN/direct connections when possible.
-Transfers from a phone to a PC work reliably, but the reverse (PC to phone) fails in most cases.
From my research, it seems like ICE candidates might be arriving before the remote description is set, leading to the Unknown ufrag issue.
What can I do to make the connection more stable and prevent these errors?
// File: src/lib/webrtcSender.ts
import { socket, sendOffer, sendCandidate, registerDevice } from "./socket";
interface Options {
senderId: string;
receiverId: string;
file: File;
onStatus?: (status: string) => void;
}
export function sendFileOverWebRTC({
senderId,
receiverId,
file,
onStatus = () => {},
}: Options): void {
const peerConnection = new RTCPeerConnection({
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});
registerDevice(senderId);
const dataChannel = peerConnection.createDataChannel("fileTransfer");
let remoteDescriptionSet = false;
const pendingCandidates: RTCIceCandidateInit[] = [];
dataChannel.onopen = () => {
onStatus("Sending file...");
sendFileChunks();
};
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
sendCandidate(receiverId, event.candidate);
}
};
socket.off("receive_answer");
socket.on("receive_answer", async ({ answer }) => {
if (!remoteDescriptionSet && peerConnection.signalingState === "have-local-offer") {
await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
remoteDescriptionSet = true;
// Drain pending candidates
for (const cand of pendingCandidates) {
await peerConnection.addIceCandidate(new RTCIceCandidate(cand));
}
pendingCandidates.length = 0;
} else {
console.warn("Unexpected signaling state:", peerConnection.signalingState);
}
});
socket.off("ice_candidate");
socket.on("ice_candidate", ({ candidate }) => {
if (remoteDescriptionSet) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
} else {
pendingCandidates.push(candidate);
}
});
peerConnection.createOffer()
.then((offer) => peerConnection.setLocalDescription(offer))
.then(() => {
if (peerConnection.localDescription) {
sendOffer(senderId, receiverId, peerConnection.localDescription);
onStatus("Offer sent. Waiting for answer...");
}
});
function sendFileChunks() {
const chunkSize = 16_384;
const reader = new FileReader();
let offset = 0;
dataChannel.send(JSON.stringify({
type: "metadata",
filename: file.name,
filetype: file.type,
size: file.size,
}));
reader.onload = (e) => {
if (e.target?.readyState !== FileReader.DONE) return;
const chunk = e.target.result as ArrayBuffer;
const sendChunk = () => {
if (dataChannel.bufferedAmount > 1_000_000) {
// Wait until buffer drains
setTimeout(sendChunk, 100);
} else {
dataChannel.send(chunk);
offset += chunk.byteLength;
if (offset < file.size) {
readSlice(offset);
} else {
onStatus("File sent successfully!");
}
}
};
sendChunk();
};
reader.onerror = () => onStatus("File read error");
const readSlice = (o: number) => reader.readAsArrayBuffer(file.slice(o, o + chunkSize));
readSlice(0);
}
}
// File: src/lib/webrtcSender.ts
import { socket, registerDevice, sendAnswer, sendCandidate } from './socket';
export function initializeReceiver(
fingerprint: string,
onStatus: (status: string) => void,
onFileReceived: (file: Blob, metadata: { name: string; type: string }) => void
) {
registerDevice(fingerprint);
let peerConnection: RTCPeerConnection | null = null;
let remoteDescriptionSet = false;
const pendingCandidates: RTCIceCandidateInit[] = [];
let receivedChunks: Uint8Array[] = [];
let receivedSize = 0;
let metadata: { name: string; type: string; size: number } | null = null;
socket.off('receive_offer');
socket.on('receive_offer', async ({ sender, offer }) => {
if (peerConnection) {
peerConnection.close(); // Prevent reuse
}
onStatus('Offer received. Creating answer...');
peerConnection = new RTCPeerConnection({
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
});
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
sendCandidate(sender, event.candidate);
}
};
peerConnection.ondatachannel = (event) => {
const channel = event.channel;
channel.onopen = () => onStatus('Data channel open. Receiving file...');
channel.onmessage = async (event) => {
if (typeof event.data === 'string') {
try {
const msg = JSON.parse(event.data);
if (msg.type === 'metadata') {
metadata = {
name: msg.filename,
type: msg.filetype,
size: msg.size,
};
receivedChunks = [];
receivedSize = 0;
onStatus(`Receiving ${msg.filename} (${msg.size} bytes)`);
}
} catch {
console.warn('Invalid metadata message');
}
} else {
const chunk = event.data instanceof Blob
? new Uint8Array(await event.data.arrayBuffer())
: new Uint8Array(event.data);
receivedChunks.push(chunk);
receivedSize += chunk.byteLength;
if (metadata && receivedSize >= metadata.size) {
const blob = new Blob(receivedChunks, { type: metadata.type });
onFileReceived(blob, metadata);
onStatus('File received and ready to download.');
}
}
};
};
await peerConnection.setRemoteDescription(offer);
remoteDescriptionSet = true;
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
sendAnswer(sender, answer);
onStatus('Answer sent.');
// Drain buffered ICE candidates
for (const cand of pendingCandidates) {
await peerConnection.addIceCandidate(new RTCIceCandidate(cand));
}
pendingCandidates.length = 0;
});
socket.off("ice_candidate");
socket.on("ice_candidate", ({ candidate }) => {
if (remoteDescriptionSet && peerConnection) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
} else {
pendingCandidates.push(candidate);
}
});
}
// File: src/dash/page.tsx
'use client';
import { useEffect, useState, useRef } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '../../store/useAuthStore';
import api from '../../lib/axios';
import FingerprintJS from '@fingerprintjs/fingerprintjs';
import { sendFileOverWebRTC } from '../../lib/webrtcSender';
import { initializeReceiver } from '../../lib/webrtcReceiver';
export default function DashPage() {
const { user, checkAuth, loading } = useAuthStore();
const router = useRouter();
const [devices, setDevices] = useState([]);
const [deviceName, setDeviceName] = useState('');
const [fingerprint, setFingerprint] = useState('');
const [status, setStatus] = useState('Idle');
const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [selectedDevice, setSelectedDevice] = useState('');
const fileInputRef = useRef<HTMLInputElement>(null);
// Initial auth check
useEffect(() => {
checkAuth();
}, [checkAuth]);
useEffect(() => {
if (!loading && !user) {
router.replace('/auth');
}
}, [loading, user, router]);
// Fetch user's devices
useEffect(() => {
if (!loading && user) {
api
.get('/devices/')
.then((res) => setDevices(res.data))
.catch((err) => console.error('Device fetch failed', err));
}
}, [loading, user]);
// Fingerprint only
useEffect(() => {
const loadFingerprint = async () => {
setStatus('Loading fingerprint...');
const fp = await FingerprintJS.load();
const result = await fp.get();
setFingerprint(result.visitorId);
setStatus('Ready to add device');
};
loadFingerprint();
}, []);
// Initialize receiver
useEffect(() => {
if (fingerprint) {
initializeReceiver(
fingerprint,
(newStatus) => setStatus(newStatus),
(fileBlob, metadata) => {
const url = URL.createObjectURL(fileBlob);
const a = document.createElement('a');
a.href = url;
a.download = metadata.name;
a.click();
URL.revokeObjectURL(url);
}
);
}
}, [fingerprint]);
const handleAddDevice = async () => {
if (!deviceName || !fingerprint) {
alert('Missing fingerprint or device name');
return;
}
try {
await api.post('/add-device/', {
fingerprint,
device_name: deviceName,
});
setDeviceName('');
setStatus('Device added successfully');
// Refresh device list
const res = await api.get('/devices/');
setDevices(res.data);
} catch (error) {
console.error('Error adding device:', error);
setStatus('Failed to add device');
}
};
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
setSelectedFile(e.target.files[0]);
}
};
const handleSendFile = () => {
if (!selectedFile || !selectedDevice) {
alert('Please select a file and a target device.');
return;
}
sendFileOverWebRTC({
senderId: fingerprint,
receiverId: selectedDevice,
file: selectedFile,
onStatus: setStatus,
});
};
if (loading) return <p className="text-center mt-10">Loading dashboard...</p>;
if (!user) return null;
return (
<div className="p-6 max-w-3xl mx-auto">
<h1 className="text-2xl font-bold mb-4">Welcome, {user.username}</h1>
<p>Your email: {user.email}</p>
<h2 className="text-xl font-semibold mt-6">Your Devices:</h2>
<ul className="mt-2 list-disc list-inside">
{devices.length === 0 && <p>No devices found.</p>}
{devices.map((device: any) => (
<li key={device.fingerprint}>
{device.device_name} ({device.fingerprint})
</li>
))}
</ul>
<hr className="my-6" />
<h2 className="text-xl font-semibold mb-2">Add This Device</h2>
<div className="space-y-2">
<p>
<strong>Status:</strong> {status}
</p>
<input
type="text"
className="border p-2 w-full"
placeholder="Device Nickname"
value={deviceName}
onChange={(e) => setDeviceName(e.target.value)}
/>
<button
onClick={handleAddDevice}
className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
>
Add This Device
</button>
</div>
<hr className="my-6" />
<h2 className="text-xl font-semibold mb-2">Send a File</h2>
<div className="space-y-2">
<input type="file" ref={fileInputRef} onChange={handleFileChange} />
<select
className="border p-2 w-full"
value={selectedDevice}
onChange={(e) => setSelectedDevice(e.target.value)}
>
<option value="">Select a device</option>
{devices.map((device: any) => (
<option key={device.fingerprint} value={device.fingerprint}>
{device.device_name}
</option>
))}
</select>
<button
onClick={handleSendFile}
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
>
Send File
</button>
</div>
</div>
);
}
