Adds an error for no webrtc enabled

Author: kern

.claude/settings.local.json

@@ -3,7 +3,9 @@
     "allow": [
       "Bash(pnpm build:*)",
       "Bash(pnpm test:*)",
-      "Bash(npm test:*)"
+      "Bash(npm test:*)",
+      "Bash(pnpm type:check:*)",
+      "Bash(pnpm lint:check:*)"
     ],
     "deny": []
   }

src/components/WebRTCProvider.tsx

@@ -11,6 +11,10 @@ import React, {
 import Loading from './Loading'
 import Peer from 'peerjs'
 import { ErrorMessage } from './ErrorMessage'
+import {
+  isWebRTCSupported,
+  getWebRTCErrorMessage,
+} from '../utils/webrtc-detection'
 
 export type WebRTCPeerValue = {
   peer: Peer
@@ -70,6 +74,9 @@ export default function WebRTCPeerProvider({
   const [isStopped, setIsStopped] = useState(false)
   const [error, setError] = useState<Error | null>(null)
 
+  // Check WebRTC support early
+  const webrtcSupported = isWebRTCSupported()
+
   const stop = useCallback(() => {
     console.log('[WebRTCProvider] Stopping peer')
     globalPeer?.destroy()
@@ -79,8 +86,12 @@ export default function WebRTCPeerProvider({
   }, [])
 
   useEffect(() => {
+    if (!webrtcSupported) {
+      setError(new Error(getWebRTCErrorMessage()))
+      return
+    }
     getOrCreateGlobalPeer().then(setPeerValue).catch(setError)
-  }, [])
+  }, [webrtcSupported])
 
   const value = useMemo(() => ({ peer: peerValue!, stop }), [peerValue, stop])
 

src/utils/webrtc-detection.ts

@@ -0,0 +1,32 @@
+/**
+ * Detects if WebRTC is available and enabled in the current browser
+ */
+export function isWebRTCSupported(): boolean {
+  // Check if RTCPeerConnection is available
+  if (typeof RTCPeerConnection === 'undefined') {
+    return false
+  }
+
+  // Test if we can actually create an RTCPeerConnection
+  // This catches cases where the API exists but is disabled (like Firefox's media.peerconnection.enabled = false)
+  try {
+    const testConnection = new RTCPeerConnection()
+    testConnection.close()
+    return true
+  } catch (error) {
+    console.warn('[WebRTC Detection] RTCPeerConnection creation failed:', error)
+    return false
+  }
+}
+
+/**
+ * Gets a user-friendly error message for WebRTC issues
+ */
+export function getWebRTCErrorMessage(): string {
+  if (typeof RTCPeerConnection === 'undefined') {
+    return 'Your browser does not support WebRTC. Please use a modern browser like Chrome, Firefox, Safari, or Edge.'
+  }
+
+  // This is likely Firefox with media.peerconnection.enabled = false
+  return 'WebRTC is disabled in your browser. In Firefox, please enable it by setting "media.peerconnection.enabled" to true in about:config.'
+}