feat: implement WebRTC P2P file transfer with detection and fallback
Implemented complete WebRTC peer-to-peer file transfer system for match chat: **Core WebRTC Implementation:** - Created useWebRTC hook with RTCPeerConnection and RTCDataChannel - P2P file transfer with 16KB chunking for large files (tested up to 700MB) - Real-time progress monitoring for sender and receiver - Automatic file download on receiver side - End-to-end encryption via DTLS (native WebRTC) - ICE candidate exchange via Socket.IO signaling - Support for host candidates (localhost testing) **WebRTC Detection & User Experience:** - Automatic WebRTC capability detection on page load - Detects if ICE candidates can be generated (fails in Opera, privacy-focused browsers, VPNs) - User-friendly warning component with fix suggestions - Graceful degradation: disables WebRTC button when blocked - Suggests alternative methods (video links via Google Drive/Dropbox) **Socket.IO Improvements:** - Fixed multiple socket instance creation issue - Implemented socket instance reuse pattern - Disabled React.StrictMode to prevent reconnection loops in development **Technical Details:** - RTCPeerConnection with configurable STUN servers (currently using localhost config) - RTCDataChannel with ordered delivery - Comprehensive logging for debugging (ICE gathering, connection states, signaling) - Match room-based signaling relay via Socket.IO - Authorization checks for all WebRTC signaling events **Files Changed:** - frontend/src/hooks/useWebRTC.js - Complete WebRTC implementation - frontend/src/utils/webrtcDetection.js - WebRTC capability detection - frontend/src/components/WebRTCWarning.jsx - User warning component - frontend/src/pages/MatchChatPage.jsx - WebRTC integration - frontend/src/services/socket.js - Socket instance reuse - frontend/src/main.jsx - Disabled StrictMode for Socket.IO stability **Testing:** - ✅ Verified working in Chrome (ICE candidates generated) - ✅ Tested with 700MB file transfer - ✅ Detection working in Opera (shows warning when WebRTC blocked) - ✅ P2P connection establishment and DataChannel opening - ✅ File chunking and progress monitoring **TODO:** - Add STUN server configuration for production (NAT traversal) - Consider server-based upload fallback for blocked users
This commit is contained in:
Radosław Gierwiało
99
frontend/src/components/WebRTCWarning.jsx
Normal file
99
frontend/src/components/WebRTCWarning.jsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import { AlertTriangle, X } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
/**
|
||||
* WebRTC Warning Component
|
||||
*
|
||||
* Shows a dismissible warning when WebRTC is not available or blocked
|
||||
*/
|
||||
const WebRTCWarning = ({ detection, onDismiss }) => {
|
||||
const [isDismissed, setIsDismissed] = useState(false);
|
||||
|
||||
if (isDismissed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Don't show if WebRTC is working fine
|
||||
if (detection.supported && detection.hasIceCandidates) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleDismiss = () => {
|
||||
setIsDismissed(true);
|
||||
if (onDismiss) {
|
||||
onDismiss();
|
||||
}
|
||||
};
|
||||
|
||||
const getMessage = () => {
|
||||
if (!detection.supported) {
|
||||
return {
|
||||
title: 'WebRTC Not Supported',
|
||||
description: 'Your browser does not support WebRTC. P2P video transfer is disabled.',
|
||||
suggestions: [
|
||||
'Update your browser to the latest version',
|
||||
'Try using Chrome, Firefox, or Edge',
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
if (!detection.hasIceCandidates) {
|
||||
return {
|
||||
title: 'WebRTC Blocked',
|
||||
description: 'WebRTC is blocked by browser settings or extensions. P2P video transfer is disabled.',
|
||||
suggestions: [
|
||||
'Check browser privacy settings (e.g., Opera: Settings → Privacy → WebRTC)',
|
||||
'Disable VPN extensions that block WebRTC',
|
||||
'Try using Chrome or Firefox',
|
||||
'Use incognito/private mode without extensions',
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: 'WebRTC Error',
|
||||
description: detection.error || 'Unknown WebRTC error',
|
||||
suggestions: ['Try refreshing the page', 'Try a different browser'],
|
||||
};
|
||||
};
|
||||
|
||||
const { title, description, suggestions } = getMessage();
|
||||
|
||||
return (
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start space-x-3 flex-1">
|
||||
<AlertTriangle className="w-5 h-5 text-yellow-600 flex-shrink-0 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-sm font-semibold text-yellow-800 mb-1">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-yellow-700 mb-2">
|
||||
{description}
|
||||
</p>
|
||||
<div className="text-sm text-yellow-700">
|
||||
<p className="font-medium mb-1">How to fix:</p>
|
||||
<ul className="list-disc list-inside space-y-1 ml-2">
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<li key={index}>{suggestion}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<p className="text-xs text-yellow-600 mt-2 italic">
|
||||
You can still send video links via Google Drive, Dropbox, etc. using the "Link" button.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleDismiss}
|
||||
className="text-yellow-400 hover:text-yellow-600 transition-colors flex-shrink-0 ml-2"
|
||||
aria-label="Dismiss warning"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default WebRTCWarning;
|
||||
@@ -8,6 +8,13 @@ const rtcConfig = {
|
||||
{ urls: 'stun:stun1.l.google.com:19302' },
|
||||
{ urls: 'stun:stun2.l.google.com:19302' },
|
||||
],
|
||||
iceTransportPolicy: 'all', // Use all candidates (host, srflx, relay)
|
||||
iceCandidatePoolSize: 10, // Pre-gather candidates
|
||||
};
|
||||
|
||||
// Alternative config for localhost testing (no STUN)
|
||||
const rtcConfigLocalhost = {
|
||||
iceServers: [], // No STUN - use only host candidates for localhost
|
||||
};
|
||||
|
||||
// File chunk size (16KB recommended for WebRTC DataChannel)
|
||||
@@ -29,6 +36,14 @@ export const useWebRTC = (matchId, userId) => {
|
||||
const peerConnectionRef = useRef(null);
|
||||
const dataChannelRef = useRef(null);
|
||||
const socketRef = useRef(null);
|
||||
const matchIdRef = useRef(matchId);
|
||||
const userIdRef = useRef(userId);
|
||||
|
||||
// Update refs when props change
|
||||
useEffect(() => {
|
||||
matchIdRef.current = matchId;
|
||||
userIdRef.current = userId;
|
||||
}, [matchId, userId]);
|
||||
|
||||
// File transfer state
|
||||
const fileTransferRef = useRef({
|
||||
@@ -53,18 +68,37 @@ export const useWebRTC = (matchId, userId) => {
|
||||
return peerConnectionRef.current;
|
||||
}
|
||||
|
||||
const pc = new RTCPeerConnection(rtcConfig);
|
||||
// Use localhost config for testing (no STUN servers)
|
||||
const pc = new RTCPeerConnection(rtcConfigLocalhost);
|
||||
peerConnectionRef.current = pc;
|
||||
console.log('🔧 Using rtcConfigLocalhost (no STUN servers)');
|
||||
|
||||
// ICE candidate handler
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && socketRef.current) {
|
||||
if (event.candidate) {
|
||||
console.log('🧊 ICE candidate generated:', event.candidate.type);
|
||||
if (socketRef.current) {
|
||||
socketRef.current.emit('webrtc_ice_candidate', {
|
||||
matchId,
|
||||
matchId: matchIdRef.current,
|
||||
candidate: event.candidate,
|
||||
});
|
||||
console.log('📤 Sent ICE candidate');
|
||||
} else {
|
||||
console.error('❌ Socket not available to send ICE candidate');
|
||||
}
|
||||
} else {
|
||||
console.log('🧊 ICE gathering complete (candidate is null)');
|
||||
}
|
||||
};
|
||||
|
||||
// ICE gathering state handler
|
||||
pc.onicegatheringstatechange = () => {
|
||||
console.log('🧊 ICE gathering state:', pc.iceGatheringState);
|
||||
};
|
||||
|
||||
// Signaling state handler
|
||||
pc.onsignalingstatechange = () => {
|
||||
console.log('📡 Signaling state:', pc.signalingState);
|
||||
};
|
||||
|
||||
// Connection state change handler
|
||||
@@ -84,8 +118,9 @@ export const useWebRTC = (matchId, userId) => {
|
||||
};
|
||||
|
||||
console.log('✅ RTCPeerConnection initialized');
|
||||
console.log('🔍 Initial states - Connection:', pc.connectionState, 'ICE:', pc.iceConnectionState, 'Signaling:', pc.signalingState);
|
||||
return pc;
|
||||
}, [matchId]);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Create data channel for file transfer
|
||||
@@ -200,9 +235,11 @@ export const useWebRTC = (matchId, userId) => {
|
||||
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
console.log('✅ Local description set (offer). ICE gathering should start now...');
|
||||
console.log('🔍 SDP has candidates:', pc.localDescription.sdp.includes('candidate:'));
|
||||
|
||||
socketRef.current.emit('webrtc_offer', {
|
||||
matchId,
|
||||
matchId: matchIdRef.current,
|
||||
offer: pc.localDescription,
|
||||
});
|
||||
|
||||
@@ -211,7 +248,7 @@ export const useWebRTC = (matchId, userId) => {
|
||||
console.error('Failed to create offer:', error);
|
||||
setConnectionState('failed');
|
||||
}
|
||||
}, [matchId, initializePeerConnection, createDataChannel]);
|
||||
}, [initializePeerConnection, createDataChannel]);
|
||||
|
||||
/**
|
||||
* Handle incoming offer and create answer
|
||||
@@ -230,12 +267,15 @@ export const useWebRTC = (matchId, userId) => {
|
||||
};
|
||||
|
||||
await pc.setRemoteDescription(new RTCSessionDescription(offer));
|
||||
console.log('✅ Remote description set (offer)');
|
||||
|
||||
const answer = await pc.createAnswer();
|
||||
await pc.setLocalDescription(answer);
|
||||
console.log('✅ Local description set (answer). ICE gathering should start now...');
|
||||
console.log('🔍 SDP has candidates:', pc.localDescription.sdp.includes('candidate:'));
|
||||
|
||||
socketRef.current.emit('webrtc_answer', {
|
||||
matchId,
|
||||
matchId: matchIdRef.current,
|
||||
answer: pc.localDescription,
|
||||
});
|
||||
|
||||
@@ -244,7 +284,7 @@ export const useWebRTC = (matchId, userId) => {
|
||||
console.error('Failed to handle offer:', error);
|
||||
setConnectionState('failed');
|
||||
}
|
||||
}, [matchId, initializePeerConnection, setupDataChannelHandlers]);
|
||||
}, [initializePeerConnection, setupDataChannelHandlers]);
|
||||
|
||||
/**
|
||||
* Handle incoming answer
|
||||
@@ -258,7 +298,7 @@ export const useWebRTC = (matchId, userId) => {
|
||||
}
|
||||
|
||||
await pc.setRemoteDescription(new RTCSessionDescription(answer));
|
||||
console.log('✅ Remote description set');
|
||||
console.log('✅ Remote description set (answer). ICE should connect now...');
|
||||
} catch (error) {
|
||||
console.error('Failed to handle answer:', error);
|
||||
setConnectionState('failed');
|
||||
@@ -385,36 +425,67 @@ export const useWebRTC = (matchId, userId) => {
|
||||
|
||||
socketRef.current = socket;
|
||||
|
||||
// Listen for WebRTC signaling events
|
||||
socket.on('webrtc_offer', ({ from, offer }) => {
|
||||
console.log('📥 Received WebRTC offer from:', from);
|
||||
if (from !== userId) {
|
||||
// Create stable handlers using current values from refs
|
||||
const onOffer = ({ from, offer }) => {
|
||||
console.log('📥 Received WebRTC offer from:', from, 'My userId:', userIdRef.current);
|
||||
if (from !== userIdRef.current) {
|
||||
handleOffer(offer);
|
||||
} else {
|
||||
console.log('⏭️ Ignoring offer from self');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
socket.on('webrtc_answer', ({ from, answer }) => {
|
||||
console.log('📥 Received WebRTC answer from:', from);
|
||||
if (from !== userId) {
|
||||
const onAnswer = ({ from, answer }) => {
|
||||
console.log('📥 Received WebRTC answer from:', from, 'My userId:', userIdRef.current);
|
||||
if (from !== userIdRef.current) {
|
||||
handleAnswer(answer);
|
||||
} else {
|
||||
console.log('⏭️ Ignoring answer from self');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
socket.on('webrtc_ice_candidate', ({ from, candidate }) => {
|
||||
const onIceCandidate = ({ from, candidate }) => {
|
||||
console.log('📥 Received ICE candidate from:', from);
|
||||
if (from !== userId) {
|
||||
if (from !== userIdRef.current) {
|
||||
handleIceCandidate(candidate);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Cleanup on unmount
|
||||
// Attach listeners
|
||||
const attachListeners = () => {
|
||||
socket.off('webrtc_offer', onOffer);
|
||||
socket.off('webrtc_answer', onAnswer);
|
||||
socket.off('webrtc_ice_candidate', onIceCandidate);
|
||||
|
||||
socket.on('webrtc_offer', onOffer);
|
||||
socket.on('webrtc_answer', onAnswer);
|
||||
socket.on('webrtc_ice_candidate', onIceCandidate);
|
||||
|
||||
console.log('✅ WebRTC Socket.IO listeners attached (socketId:', socket.id, ')');
|
||||
};
|
||||
|
||||
// Attach initially
|
||||
attachListeners();
|
||||
|
||||
// Reattach on reconnect
|
||||
const onReconnect = () => {
|
||||
console.log('🔄 Socket reconnected - reattaching WebRTC listeners');
|
||||
attachListeners();
|
||||
};
|
||||
|
||||
socket.on('connect', onReconnect);
|
||||
|
||||
// Cleanup on unmount only
|
||||
return () => {
|
||||
socket.off('webrtc_offer');
|
||||
socket.off('webrtc_answer');
|
||||
socket.off('webrtc_ice_candidate');
|
||||
console.log('🧹 Removing WebRTC Socket.IO listeners');
|
||||
socket.off('connect', onReconnect);
|
||||
socket.off('webrtc_offer', onOffer);
|
||||
socket.off('webrtc_answer', onAnswer);
|
||||
socket.off('webrtc_ice_candidate', onIceCandidate);
|
||||
cleanupConnection();
|
||||
};
|
||||
}, [userId, handleOffer, handleAnswer, handleIceCandidate, cleanupConnection]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [userId]); // Only re-run if userId changes
|
||||
|
||||
return {
|
||||
connectionState,
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.jsx'
|
||||
|
||||
// StrictMode disabled for development - causes Socket.IO reconnection issues
|
||||
// TODO: Re-enable in production or fix Socket.IO to handle double mounting
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
@@ -6,6 +6,8 @@ import { matchesAPI } from '../services/api';
|
||||
import { Send, Video, Upload, X, Check, Link as LinkIcon, Loader2 } from 'lucide-react';
|
||||
import { connectSocket, getSocket } from '../services/socket';
|
||||
import { useWebRTC } from '../hooks/useWebRTC';
|
||||
import { detectWebRTCSupport } from '../utils/webrtcDetection';
|
||||
import WebRTCWarning from '../components/WebRTCWarning';
|
||||
|
||||
const MatchChatPage = () => {
|
||||
const { slug } = useParams();
|
||||
@@ -19,6 +21,7 @@ const MatchChatPage = () => {
|
||||
const [showLinkInput, setShowLinkInput] = useState(false);
|
||||
const [videoLink, setVideoLink] = useState('');
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [webrtcDetection, setWebrtcDetection] = useState(null);
|
||||
const messagesEndRef = useRef(null);
|
||||
const fileInputRef = useRef(null);
|
||||
|
||||
@@ -33,6 +36,21 @@ const MatchChatPage = () => {
|
||||
cleanupConnection,
|
||||
} = useWebRTC(match?.id, user?.id);
|
||||
|
||||
// Detect WebRTC support on mount
|
||||
useEffect(() => {
|
||||
const runDetection = async () => {
|
||||
const result = await detectWebRTCSupport();
|
||||
setWebrtcDetection(result);
|
||||
|
||||
if (result.hasIceCandidates) {
|
||||
console.log('✅ WebRTC detection: Working correctly');
|
||||
} else {
|
||||
console.warn('⚠️ WebRTC detection:', result.error);
|
||||
}
|
||||
};
|
||||
runDetection();
|
||||
}, []);
|
||||
|
||||
// Fetch match data
|
||||
useEffect(() => {
|
||||
const loadMatch = async () => {
|
||||
@@ -88,13 +106,15 @@ const MatchChatPage = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
// Socket event listeners
|
||||
socket.on('connect', () => {
|
||||
// Helper to join match room
|
||||
const joinMatchRoom = () => {
|
||||
setIsConnected(true);
|
||||
// Join match room using numeric match ID for socket
|
||||
socket.emit('join_match_room', { matchId: match.id });
|
||||
console.log(`Joined match room ${match.id}`);
|
||||
});
|
||||
};
|
||||
|
||||
// Socket event listeners
|
||||
socket.on('connect', joinMatchRoom);
|
||||
|
||||
socket.on('disconnect', () => {
|
||||
setIsConnected(false);
|
||||
@@ -105,9 +125,14 @@ const MatchChatPage = () => {
|
||||
setMessages((prev) => [...prev, message]);
|
||||
});
|
||||
|
||||
// Join immediately if already connected
|
||||
if (socket.connected) {
|
||||
joinMatchRoom();
|
||||
}
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
socket.off('connect');
|
||||
socket.off('connect', joinMatchRoom);
|
||||
socket.off('disconnect');
|
||||
socket.off('match_message');
|
||||
};
|
||||
@@ -315,6 +340,13 @@ const MatchChatPage = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col h-[calc(100vh-320px)]">
|
||||
{/* WebRTC Warning */}
|
||||
{webrtcDetection && (
|
||||
<div className="p-4 pb-0">
|
||||
<WebRTCWarning detection={webrtcDetection} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{messages.length === 0 && (
|
||||
@@ -472,7 +504,12 @@ const MatchChatPage = () => {
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
disabled={isTransferring || selectedFile}
|
||||
disabled={isTransferring || selectedFile || (webrtcDetection && !webrtcDetection.hasIceCandidates)}
|
||||
title={
|
||||
webrtcDetection && !webrtcDetection.hasIceCandidates
|
||||
? 'WebRTC is blocked - see warning above'
|
||||
: 'Send video via P2P WebRTC'
|
||||
}
|
||||
className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2"
|
||||
>
|
||||
<Video className="w-4 h-4" />
|
||||
|
||||
@@ -12,10 +12,14 @@ export function connectSocket() {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (socket && socket.connected) {
|
||||
// Return existing socket instance (even if not connected yet)
|
||||
// This prevents creating multiple socket instances during React StrictMode
|
||||
if (socket) {
|
||||
console.log('♻️ Reusing existing socket instance');
|
||||
return socket;
|
||||
}
|
||||
|
||||
console.log('🔌 Creating new socket instance');
|
||||
socket = io(SOCKET_URL, {
|
||||
auth: {
|
||||
token,
|
||||
|
||||
123
frontend/src/utils/webrtcDetection.js
Normal file
123
frontend/src/utils/webrtcDetection.js
Normal file
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* WebRTC Detection Utility
|
||||
*
|
||||
* Detects if WebRTC ICE candidate generation is working.
|
||||
* This can fail due to:
|
||||
* - Browser privacy settings (Opera, Brave)
|
||||
* - VPN extensions blocking WebRTC
|
||||
* - Corporate firewalls
|
||||
* - Browser not supporting WebRTC
|
||||
*/
|
||||
|
||||
/**
|
||||
* Test if WebRTC can generate ICE candidates
|
||||
* @returns {Promise<{supported: boolean, hasIceCandidates: boolean, error: string|null}>}
|
||||
*/
|
||||
export async function detectWebRTCSupport() {
|
||||
const result = {
|
||||
supported: false,
|
||||
hasIceCandidates: false,
|
||||
error: null,
|
||||
};
|
||||
|
||||
// Check if RTCPeerConnection is available
|
||||
if (!window.RTCPeerConnection) {
|
||||
result.error = 'RTCPeerConnection not available in this browser';
|
||||
return result;
|
||||
}
|
||||
|
||||
result.supported = true;
|
||||
|
||||
// Test ICE candidate generation
|
||||
try {
|
||||
const pc = new RTCPeerConnection({
|
||||
iceServers: [], // No STUN servers for quick test
|
||||
});
|
||||
|
||||
let candidateReceived = false;
|
||||
|
||||
// Wait for ICE candidates
|
||||
const candidatePromise = new Promise((resolve) => {
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate) {
|
||||
candidateReceived = true;
|
||||
resolve(true);
|
||||
} else if (event.candidate === null) {
|
||||
// Gathering complete
|
||||
resolve(candidateReceived);
|
||||
}
|
||||
};
|
||||
|
||||
// Timeout after 3 seconds
|
||||
setTimeout(() => {
|
||||
resolve(candidateReceived);
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
// Create a data channel and offer to trigger ICE gathering
|
||||
pc.createDataChannel('test');
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
// Wait for candidates
|
||||
result.hasIceCandidates = await candidatePromise;
|
||||
|
||||
// Cleanup
|
||||
pc.close();
|
||||
|
||||
if (!result.hasIceCandidates) {
|
||||
result.error = 'ICE candidates not generated - WebRTC may be blocked by browser settings or extensions';
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
result.error = `WebRTC test failed: ${error.message}`;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get user-friendly error message based on detection result
|
||||
* @param {{supported: boolean, hasIceCandidates: boolean, error: string|null}} detection
|
||||
* @returns {string}
|
||||
*/
|
||||
export function getWebRTCErrorMessage(detection) {
|
||||
if (!detection.supported) {
|
||||
return 'Your browser does not support WebRTC. Please use a modern browser like Chrome, Firefox, or Edge.';
|
||||
}
|
||||
|
||||
if (!detection.hasIceCandidates) {
|
||||
return 'WebRTC is blocked by your browser settings or extensions. P2P file transfer is disabled. Please check your privacy settings or try a different browser.';
|
||||
}
|
||||
|
||||
if (detection.error) {
|
||||
return `WebRTC error: ${detection.error}`;
|
||||
}
|
||||
|
||||
return 'WebRTC is working correctly.';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get suggestions to fix WebRTC issues
|
||||
* @param {{supported: boolean, hasIceCandidates: boolean, error: string|null}} detection
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function getWebRTCFixSuggestions(detection) {
|
||||
if (!detection.supported) {
|
||||
return [
|
||||
'Update your browser to the latest version',
|
||||
'Try using Chrome, Firefox, or Edge',
|
||||
];
|
||||
}
|
||||
|
||||
if (!detection.hasIceCandidates) {
|
||||
return [
|
||||
'Check browser privacy settings (e.g., Opera: Settings → Privacy → WebRTC)',
|
||||
'Disable VPN extensions that block WebRTC',
|
||||
'Try using Chrome or Firefox with default settings',
|
||||
'Use incognito/private mode to test without extensions',
|
||||
];
|
||||
}
|
||||
|
||||
return [];
|
||||
}
|
||||
Reference in New Issue
Block a user