feat: browser compatibility check and warnings implemented

Author: kerembkmz

apps/client/src/contexts/SessionContext.tsx

@@ -23,12 +23,14 @@ type SessionContextType = {
   roomState: RoomState | undefined
   sessionDurationMinutes: number
   rewindFetchGroupSize: number
+  mediaStreamTrackProcessorMissing: boolean
   setSession: (
     userId: string,
     username: string,
     roomState: RoomState,
     sessionDurationMinutes: number,
     rewindFetchGroupSize: number,
+    mediaStreamTrackProcessorMissing?: boolean,
   ) => void
   clearSession: () => void
 }
@@ -41,19 +43,22 @@ export function SessionProvider({ children }: { children: ReactNode }) {
   const [roomState, setRoomState] = useState<RoomState | undefined>(undefined)
   const [sessionDurationMinutes, setSessionDurationMinutes] = useState(10) // default fallback
   const [rewindFetchGroupSize, setRewindFetchGroupSize] = useState(5) // default fallback
+  const [mediaStreamTrackProcessorMissing, setMediaStreamTrackProcessorMissing] = useState(false)
 
   function setSession(
     userId: string,
     username: string,
     roomState: RoomState,
     sessionDurationMinutes: number,
     rewindFetchGroupSize: number,
+    mediaStreamTrackProcessorMissing: boolean = false,
   ) {
     setUserId(userId)
     setUsername(username)
     setRoomState(roomState)
     setSessionDurationMinutes(sessionDurationMinutes)
     setRewindFetchGroupSize(rewindFetchGroupSize)
+    setMediaStreamTrackProcessorMissing(mediaStreamTrackProcessorMissing)
   }
 
   function clearSession() {
@@ -62,11 +67,21 @@ export function SessionProvider({ children }: { children: ReactNode }) {
     setRoomState(undefined)
     setSessionDurationMinutes(10)
     setRewindFetchGroupSize(5)
+    setMediaStreamTrackProcessorMissing(false)
   }
 
   return (
     <SessionContext.Provider
-      value={{ userId, username, roomState, sessionDurationMinutes, rewindFetchGroupSize, setSession, clearSession }}
+      value={{
+        userId,
+        username,
+        roomState,
+        sessionDurationMinutes,
+        rewindFetchGroupSize,
+        mediaStreamTrackProcessorMissing,
+        setSession,
+        clearSession,
+      }}
     >
       {children}
     </SessionContext.Provider>

apps/client/src/pages/JoinPage.tsx

@@ -22,11 +22,93 @@ import { useSocket } from '@/sockets/SocketContext'
 import { SocketClock } from '@/util/socketClock'
 import { setClock } from '@/composables/useVideoPipeline'
 
+// Check for required browser APIs
+function checkBrowserCompatibility() {
+  const missingApis: string[] = []
+  const missingDetails: { api: string; link?: string; message?: string }[] = []
+  const criticalMissing: string[] = []
+  const mediaStreamTrackProcessorMissing = !('MediaStreamTrackProcessor' in window)
+
+  try {
+    // Check for WebTransport
+    if (!('WebTransport' in window)) {
+      missingApis.push('WebTransport')
+      missingDetails.push({
+        api: 'WebTransport',
+      })
+      criticalMissing.push('WebTransport')
+    }
+
+    // Check for WebCodecs
+    if (!('VideoEncoder' in window) || !('VideoDecoder' in window)) {
+      missingApis.push('WebCodecs')
+      criticalMissing.push('WebCodecs')
+      missingDetails.push({ api: 'WebCodecs' })
+    }
+
+    // Check for MediaStreamTrackProcessor (non-critical)
+    if (mediaStreamTrackProcessorMissing) {
+      missingApis.push('MediaStreamTrackProcessor')
+      missingDetails.push({
+        api: 'MediaStreamTrackProcessor',
+        link: 'https://caniuse.com/?search=MediaStreamTrackProcessor',
+        message: 'Video publishing will not be available',
+      })
+    }
+
+    // Check for AudioWorklet - more robust check
+    try {
+      if (!('AudioContext' in window) && !('webkitAudioContext' in window)) {
+        missingApis.push('AudioContext')
+        criticalMissing.push('AudioContext')
+        missingDetails.push({ api: 'AudioContext' })
+      } else {
+        const AudioCtx = window.AudioContext || (window as any).webkitAudioContext
+        if (!AudioCtx || !AudioCtx.prototype || !('audioWorklet' in AudioCtx.prototype)) {
+          missingApis.push('AudioWorklet')
+          criticalMissing.push('AudioWorklet')
+          missingDetails.push({ api: 'AudioWorklet' })
+        }
+      }
+    } catch (e) {
+      missingApis.push('AudioWorklet')
+      criticalMissing.push('AudioWorklet')
+      missingDetails.push({ api: 'AudioWorklet' })
+    }
+
+    // Check for ReadableStream
+    if (!('ReadableStream' in window)) {
+      missingApis.push('ReadableStream')
+      criticalMissing.push('ReadableStream')
+      missingDetails.push({ api: 'ReadableStream' })
+    }
+  } catch (error) {
+    console.error('Error checking browser compatibility:', error)
+    // If we can't check, assume incompatible
+    missingApis.push('Browser compatibility check failed')
+    criticalMissing.push('Browser compatibility check failed')
+    missingDetails.push({ api: 'Browser compatibility check failed' })
+  }
+
+  return {
+    missingApis,
+    missingDetails,
+    criticalMissing,
+    mediaStreamTrackProcessorMissing,
+  }
+}
+
 export default function JoinPage() {
   const [username, setUsername] = useState('')
   const [roomName, setRoomName] = useState('')
   const [error, setError] = useState('')
   const [connecting, setConnecting] = useState(false)
+  const [compatibilityError, setCompatibilityError] = useState<string | null>(null)
+  const [compatibilityDetails, setCompatibilityDetails] = useState<{ api: string; link?: string; message?: string }[]>(
+    [],
+  )
+  const [hasCriticalMissing, setHasCriticalMissing] = useState(false)
+  const [hasMediaStreamTrackProcessorMissing, setHasMediaStreamTrackProcessorMissing] = useState(false)
   const [roomLimits, setRoomLimits] = useState({
     maxRooms: 5,
     maxUsersPerRoom: 6,
@@ -36,10 +118,42 @@ export default function JoinPage() {
   const { setSession } = useSession()
   const { socket: contextSocket, reconnect } = useSocket()
 
+  // Check browser compatibility on component mount
   useEffect(() => {
-    if (!contextSocket || !contextSocket.connected) {
-      console.log('WebSocket not connected on page load, reconnecting...')
-      reconnect()
+    try {
+      const { missingApis, missingDetails, criticalMissing, mediaStreamTrackProcessorMissing } =
+        checkBrowserCompatibility()
+
+      if (criticalMissing.length > 0) {
+        // Critical APIs missing - block joining and redirect to wiki
+        setHasCriticalMissing(true)
+        setHasMediaStreamTrackProcessorMissing(mediaStreamTrackProcessorMissing)
+        setCompatibilityError(
+          `Your browser is missing critical APIs required for MOQtail: ${criticalMissing.join(', ')}.`,
+        )
+        setCompatibilityDetails(missingDetails)
+      } else if (mediaStreamTrackProcessorMissing) {
+        // Only MediaStreamTrackProcessor missing - allow joining with warning
+        setHasCriticalMissing(false)
+        setHasMediaStreamTrackProcessorMissing(true)
+        setCompatibilityError(
+          'MediaStreamTrackProcessor is not available. You can join the session but video publishing will be limited.',
+        )
+        setCompatibilityDetails(missingDetails)
+      } else if (missingApis.length > 0) {
+        // Other non-critical APIs missing
+        setHasMediaStreamTrackProcessorMissing(false)
+        setCompatibilityError(`Some APIs are not fully supported: ${missingApis.join(', ')}.`)
+        setCompatibilityDetails(missingDetails)
+      } else {
+        // No missing APIs
+        setHasMediaStreamTrackProcessorMissing(false)
+      }
+    } catch (error) {
+      console.error('Error during compatibility check:', error)
+      setHasCriticalMissing(true)
+      setCompatibilityError('Unable to verify browser compatibility. Please use a recent version of Google Chrome.')
+      setCompatibilityDetails([])
     }
   }, [])
 
@@ -77,6 +191,7 @@ export default function JoinPage() {
         response.roomState,
         response.sessionDurationMinutes,
         response.rewindFetchGroupSize,
+        hasMediaStreamTrackProcessorMissing,
       )
       console.log(
         'Navigating to /session',
@@ -106,6 +221,14 @@ export default function JoinPage() {
     e.preventDefault()
     setError('')
 
+    // Check for critical compatibility errors first
+    if (hasCriticalMissing) {
+      // Redirect to wiki for critical missing APIs
+      window.open('https://github.com/moqtail/demo-timetravel/wiki', '_blank')
+      setError('Redirecting to setup guide for browser compatibility information.')
+      return
+    }
+
     const trimmedUsername = username.trim()
     const trimmedRoomName = roomName.trim()
 
@@ -139,6 +262,51 @@ export default function JoinPage() {
           <b>MOQtail Demo</b>
         </h1>
         <h2>Join a Room</h2>
+        {compatibilityError && (
+          <div className="compatibility-error">
+            <strong>⚠️ Browser Compatibility Issue</strong>
+            <p>{compatibilityError}</p>
+            {compatibilityDetails.length > 0 && (
+              <div className="compatibility-details">
+                <p>
+                  <strong>Missing APIs:</strong>
+                </p>
+                <ul>
+                  {compatibilityDetails.map((detail, index) => (
+                    <li key={index}>
+                      <strong>{detail.api}</strong>
+                      {detail.message && <div className="compatibility-message">{detail.message}</div>}
+                      {detail.link && (
+                        <div>
+                          <a
+                            href={detail.link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="compatibility-link"
+                          >
+                            → Browser Support Info
+                          </a>
+                        </div>
+                      )}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            {hasCriticalMissing && (
+              <div className="wiki-link-section">
+                <a
+                  href="https://github.com/moqtail/demo-timetravel/wiki"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="wiki-link-button"
+                >
+                  📖 View Setup Guide & Browser Requirements
+                </a>
+              </div>
+            )}
+          </div>
+        )}
         <div className="browser-compatibility">
           Use a recent version of Google Chrome that supports the WebCodecs and WebTransport APIs.
         </div>
@@ -157,7 +325,7 @@ export default function JoinPage() {
             role="textbox"
             inputMode="text"
             className="join-input"
-            disabled={connecting}
+            disabled={connecting || hasCriticalMissing}
             maxLength={30}
           />
           <input
@@ -174,11 +342,11 @@ export default function JoinPage() {
             role="textbox"
             inputMode="text"
             className="join-input"
-            disabled={connecting}
+            disabled={connecting || hasCriticalMissing}
             maxLength={20}
           />
-          <button className="join-button" disabled={connecting}>
-            {connecting ? 'Connecting...' : 'Join'}
+          <button className="join-button" disabled={connecting || hasCriticalMissing}>
+            {hasCriticalMissing ? 'Browser Not Compatible - Check Wiki' : connecting ? 'Connecting...' : 'Join'}
           </button>
         </form>
         <div className="privacy-notice">
@@ -293,6 +461,85 @@ export default function JoinPage() {
         margin-top: 1rem;
         font-weight: 600;
       }
+      .compatibility-error {
+        background-color: #fdf2f2;
+        border: 2px solid #f8d7da;
+        color: #721c24;
+        padding: 1rem;
+        border-radius: 6px;
+        margin-bottom: 1rem;
+        text-align: left;
+      }
+      .compatibility-error strong {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-size: 1rem;
+      }
+      .compatibility-error p {
+        margin: 0;
+        font-size: 0.9rem;
+        line-height: 1.4;
+      }
+      .compatibility-details {
+        margin-top: 0.75rem;
+      }
+      .compatibility-details p {
+        margin-bottom: 0.5rem;
+        font-weight: 600;
+      }
+      .compatibility-details ul {
+        margin: 0;
+        padding-left: 1.2rem;
+        list-style-type: disc;
+      }
+      .compatibility-details li {
+        margin-bottom: 0.3rem;
+        font-size: 0.85rem;
+        line-height: 1.3;
+      }
+      .compatibility-link {
+        color: #577B9F;
+        text-decoration: underline;
+        font-weight: 500;
+        transition: color 0.2s;
+      }
+      .compatibility-link:hover {
+        color: #D74401;
+      }
+      .wiki-link-section {
+        margin-top: 1rem;
+        text-align: center;
+      }
+      .wiki-link-button {
+        display: inline-block;
+        background-color: #577B9F;
+        color: white;
+        padding: 0.8rem 1.2rem;
+        border-radius: 6px;
+        text-decoration: none;
+        font-weight: 600;
+        font-size: 0.9rem;
+        transition: background-color 0.2s;
+      }
+      .wiki-link-button:hover {
+        background-color: #D74401;
+        color: white;
+        text-decoration: none;
+      }
+      .join-input:disabled {
+        background-color: #f5f5f5;
+        color: #999;
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      .join-button:disabled {
+        background-color: #bdc3c7;
+        cursor: not-allowed;
+        opacity: 0.7;
+      }
+      .join-button:disabled:hover {
+        background-color: #bdc3c7;
+      }
       .privacy-notice {
         font-size: 0.75rem;
         color: #7f8c8d;