feat(call): migrate from WebRTC to LiveKit

Replace the custom WebRTC implementation with LiveKit for improved
stability and feature support.

- Remove `react-native-webrtc` and custom `WebRTCManager`
- Implement `LiveKitService` for room and track management
- Update `callStore` to handle LiveKit events and connection states
- Refactor `CallScreen` (mobile and web) to use `@livekit/react-native`
  and `VideoView`
- Update WebSocket protocol to use `call_ready` instead of manual SDP/ICE
  exchanges
- Add necessary camera and microphone permissions to `app.json`
- Update Metro and Babel configurations for LiveKit compatibility

src/components/call/CallScreen.tsx

@@ -1,15 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import {
- View,
- Text,
- StyleSheet,
- TouchableOpacity,
- Image,
- StatusBar,
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  StatusBar,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { Track, LocalVideoTrack, RemoteVideoTrack } from 'livekit-client';
+import { VideoView } from '@livekit/react-native';
+
+type VideoTrack = LocalVideoTrack | RemoteVideoTrack;
 import { callStore } from '../../stores/call';
-import { RTCView } from 'react-native-webrtc';
+import { liveKitService } from '@/services/livekit';
 
 const formatDuration = (seconds: number): string => {
   const mins = Math.floor(seconds / 60);
@@ -17,12 +21,9 @@ const formatDuration = (seconds: number): string => {
   return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
 };
 
-
 const CallScreen: React.FC = () => {
   const currentCall = callStore((s) => s.currentCall);
   const callDuration = callStore((s) => s.callDuration);
-  const peerStream = callStore((s) => s.peerStream);
-  const localStream = callStore((s) => s.localStream);
   const endCall = callStore((s) => s.endCall);
   const toggleMute = callStore((s) => s.toggleMute);
   const toggleSpeaker = callStore((s) => s.toggleSpeaker);
@@ -30,33 +31,66 @@ const CallScreen: React.FC = () => {
   const isMinimized = callStore((s) => s.isMinimized);
   const toggleMinimize = callStore((s) => s.toggleMinimize);
 
-  // Track whether peer has video
-  const [hasPeerVideo, setHasPeerVideo] = useState(false);
-  // Track whether local has video
-  const [hasLocalVideo, setHasLocalVideo] = useState(false);
+  const [remoteVideoTrack, setRemoteVideoTrack] = useState<VideoTrack | null>(null);
+  const [localVideoTrack, setLocalVideoTrack] = useState<VideoTrack | null>(null);
 
-  // Check peer stream for video tracks
+  // Subscribe to LiveKit track events
   useEffect(() => {
-    if (peerStream) {
-      const videoTracks = peerStream.getVideoTracks();
-      const hasVideo = videoTracks.length > 0 && videoTracks.some((t) => t.enabled);
-      setHasPeerVideo(hasVideo);
-    } else {
-      setHasPeerVideo(false);
-    }
-  }, [peerStream]);
-  // Check local stream for video tracks
-  useEffect(() => {
-    if (localStream) {
-      const videoTracks = localStream.getVideoTracks();
-      const hasVideo = videoTracks.length > 0 && videoTracks.some((t) => t.enabled);
-      setHasLocalVideo(hasVideo);
-    } else {
-      setHasLocalVideo(false);
-    }
-  }, [localStream]);
+    const unsubs: (() => void)[] = [];
+
+    unsubs.push(
+      liveKitService.on('trackSubscribed', ({ track }) => {
+        if (track.kind === Track.Kind.Video) {
+          setRemoteVideoTrack(track as VideoTrack);
+        }
+      })
+    );
+
+    unsubs.push(
+      liveKitService.on('trackUnsubscribed', ({ track }) => {
+        if (track.kind === Track.Kind.Video) {
+          setRemoteVideoTrack(null);
+        }
+      })
+    );
+
+    unsubs.push(
+      liveKitService.on('trackMuted', ({ publication }) => {
+        if (publication.source === Track.Source.Camera) {
+          setRemoteVideoTrack(null);
+        }
+      })
+    );
+
+    unsubs.push(
+      liveKitService.on('trackUnmuted', ({ publication, participant }) => {
+        if (publication.source === Track.Source.Camera && publication.track) {
+          setRemoteVideoTrack(publication.track as VideoTrack);
+        }
+      })
+    );
+
+    // Poll local video track from localParticipant
+    const localPollInterval = setInterval(() => {
+      const lp = liveKitService.localParticipant;
+      if (lp) {
+        const videoPub = lp.getTrackPublication(Track.Source.Camera);
+        const track = (videoPub?.track ?? null) as VideoTrack | null;
+        setLocalVideoTrack((prev) => (prev === track ? prev : track));
+      } else {
+        setLocalVideoTrack((prev) => (prev === null ? prev : null));
+      }
+    }, 500);
+
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+      clearInterval(localPollInterval);
+    };
+  }, []);
+
   // Don't render full screen when minimized or no call
   if (!currentCall || isMinimized) return null;
+
   const getStatusText = (): string => {
     switch (currentCall.status) {
       case 'calling':
@@ -77,63 +111,52 @@ const CallScreen: React.FC = () => {
         return '';
     }
   };
+
   const handleEndCall = () => {
     endCall('hangup');
   };
-  const handleToggleMute = () => {
-    toggleMute();
-  };
-  const handleToggleSpeaker = () => {
-    toggleSpeaker();
-  };
-  const handleToggleVideo = () => {
-    toggleVideo();
-  };
-  const handleMinimize = () => {
-    toggleMinimize();
-  };
-  // Determine if we should show video UI
-  const showRemoteVideo = hasPeerVideo;
-  // Use currentCall.isVideoEnabled directly for local video
-  // This is more reliable than checking localStream.getVideoTracks()
-  // because the stream object reference may not trigger useEffect properly
-  const showLocalVideo = currentCall?.isVideoEnabled && localStream;
+
+  const showRemoteVideo = !!remoteVideoTrack;
+  const showLocalVideo = currentCall?.isVideoEnabled && !!localVideoTrack;
   const isVideoCallActive = showRemoteVideo || showLocalVideo;
+
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
-      {/* Background */}
       <View style={styles.background} />
-      {/* Remote video - full screen when peer has video */}
-      {showRemoteVideo && peerStream && (
-        <RTCView
-          streamURL={peerStream.toURL()}
+
+      {/* Remote video - full screen */}
+      {showRemoteVideo && remoteVideoTrack && (
+        <VideoView
+          videoTrack={remoteVideoTrack}
           style={styles.fullScreenVideo}
           objectFit="cover"
-          mirror={false}
         />
       )}
+
       {/* Local video - picture in picture */}
-      {showLocalVideo && localStream && (
+      {showLocalVideo && localVideoTrack && (
         <View style={styles.localVideoContainer}>
-          <RTCView
-            streamURL={localStream.toURL()}
+          <VideoView
+            videoTrack={localVideoTrack}
             style={styles.localVideo}
             objectFit="cover"
             mirror={true}
           />
         </View>
       )}
+
       {/* Top area: minimize button */}
       <View style={styles.topBar}>
         <TouchableOpacity
           style={styles.topButton}
-          onPress={handleMinimize}
+          onPress={toggleMinimize}
           activeOpacity={0.7}
         >
           <MaterialCommunityIcons name="chevron-down" size={28} color="#fff" />
         </TouchableOpacity>
       </View>
+
       {/* Center: Peer info - only show when no video */}
       {!isVideoCallActive && (
         <View style={styles.centerArea}>
@@ -154,6 +177,7 @@ const CallScreen: React.FC = () => {
           <Text style={styles.status}>{getStatusText()}</Text>
         </View>
       )}
+
       {/* Peer name overlay when video is active */}
       {isVideoCallActive && (
         <View style={styles.videoOverlayInfo}>
@@ -163,13 +187,14 @@ const CallScreen: React.FC = () => {
           <Text style={styles.videoStatus}>{getStatusText()}</Text>
         </View>
       )}
+
       {/* Bottom controls */}
       <View style={styles.controls}>
         <View style={styles.controlRow}>
           {/* Mute */}
           <TouchableOpacity
             style={[styles.controlButton, currentCall.isMuted && styles.controlButtonActive]}
-            onPress={handleToggleMute}
+            onPress={toggleMute}
             activeOpacity={0.7}
           >
             <View style={[styles.controlCircle, currentCall.isMuted && styles.controlCircleActive]}>
@@ -185,25 +210,25 @@ const CallScreen: React.FC = () => {
           </TouchableOpacity>
           {/* Video toggle */}
           <TouchableOpacity
-            style={[styles.controlButton, hasLocalVideo && styles.controlButtonActive]}
-            onPress={handleToggleVideo}
+            style={[styles.controlButton, currentCall.isVideoEnabled && styles.controlButtonActive]}
+            onPress={toggleVideo}
             activeOpacity={0.7}
           >
-            <View style={[styles.controlCircle, hasLocalVideo && styles.controlCircleActive]}>
+            <View style={[styles.controlCircle, currentCall.isVideoEnabled && styles.controlCircleActive]}>
               <MaterialCommunityIcons
-                name={hasLocalVideo ? 'video' : 'video-off'}
+                name={currentCall.isVideoEnabled ? 'video' : 'video-off'}
                 size={26}
-                color={hasLocalVideo ? '#333' : '#fff'}
+                color={currentCall.isVideoEnabled ? '#333' : '#fff'}
               />
             </View>
-            <Text style={[styles.controlLabel, hasLocalVideo && styles.controlLabelActive]}>
-              {hasLocalVideo ? '关闭摄像头' : '打开摄像头'}
+            <Text style={[styles.controlLabel, currentCall.isVideoEnabled && styles.controlLabelActive]}>
+              {currentCall.isVideoEnabled ? '关闭摄像头' : '打开摄像头'}
             </Text>
           </TouchableOpacity>
           {/* Speaker */}
           <TouchableOpacity
             style={[styles.controlButton, currentCall.isSpeakerOn && styles.controlButtonActive]}
-            onPress={handleToggleSpeaker}
+            onPress={toggleSpeaker}
             activeOpacity={0.7}
           >
             <View style={[styles.controlCircle, currentCall.isSpeakerOn && styles.controlCircleActive]}>
@@ -218,7 +243,7 @@ const CallScreen: React.FC = () => {
             </Text>
           </TouchableOpacity>
         </View>
-        {/* End call - prominent red button */}
+        {/* End call */}
         <TouchableOpacity
           style={styles.endCallButton}
           onPress={handleEndCall}
@@ -234,9 +259,6 @@ const CallScreen: React.FC = () => {
   );
 };
 
-const CONTROL_CIRCLE_SIZE = 56;
-const END_CALL_SIZE = 64;
-
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
@@ -408,5 +430,4 @@ const styles = StyleSheet.create({
   },
 });
 
-
 export default CallScreen;

src/components/call/CallScreen.web.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   TouchableOpacity,
+  Image,
   StatusBar,
 } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { Track, LocalVideoTrack, RemoteVideoTrack } from 'livekit-client';
+import { VideoView } from '@livekit/react-native';
 import { callStore } from '../../stores/call';
+import { liveKitService } from '@/services/livekit';
+
+type VideoTrack = LocalVideoTrack | RemoteVideoTrack;
 
 const formatDuration = (seconds: number): string => {
   const mins = Math.floor(seconds / 60);
@@ -19,70 +25,224 @@ const CallScreen: React.FC = () => {
   const currentCall = callStore((s) => s.currentCall);
   const callDuration = callStore((s) => s.callDuration);
   const endCall = callStore((s) => s.endCall);
+  const toggleMute = callStore((s) => s.toggleMute);
+  const toggleSpeaker = callStore((s) => s.toggleSpeaker);
+  const toggleVideo = callStore((s) => s.toggleVideo);
   const isMinimized = callStore((s) => s.isMinimized);
+  const toggleMinimize = callStore((s) => s.toggleMinimize);
+
+  const [remoteVideoTrack, setRemoteVideoTrack] = useState<VideoTrack | null>(null);
+  const [localVideoTrack, setLocalVideoTrack] = useState<VideoTrack | null>(null);
+
+  // Subscribe to LiveKit track events
+  useEffect(() => {
+    const unsubs: (() => void)[] = [];
+
+    unsubs.push(
+      liveKitService.on('trackSubscribed', ({ track }) => {
+        if (track.kind === Track.Kind.Video) {
+          setRemoteVideoTrack(track as VideoTrack);
+        }
+      })
+    );
+
+    unsubs.push(
+      liveKitService.on('trackUnsubscribed', ({ track }) => {
+        if (track.kind === Track.Kind.Video) {
+          setRemoteVideoTrack(null);
+        }
+      })
+    );
+
+    unsubs.push(
+      liveKitService.on('trackMuted', ({ publication }) => {
+        if (publication.source === Track.Source.Camera) {
+          setRemoteVideoTrack(null);
+        }
+      })
+    );
+
+    unsubs.push(
+      liveKitService.on('trackUnmuted', ({ publication }) => {
+        if (publication.source === Track.Source.Camera && publication.track) {
+          setRemoteVideoTrack(publication.track as VideoTrack);
+        }
+      })
+    );
+
+    const localPollInterval = setInterval(() => {
+      const lp = liveKitService.localParticipant;
+      if (lp) {
+        const videoPub = lp.getTrackPublication(Track.Source.Camera);
+        const track = (videoPub?.track ?? null) as VideoTrack | null;
+        setLocalVideoTrack((prev) => (prev === track ? prev : track));
+      } else {
+        setLocalVideoTrack((prev) => (prev === null ? prev : null));
+      }
+    }, 500);
+
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+      clearInterval(localPollInterval);
+    };
+  }, []);
 
-  // Don't render full screen when minimized or no call
   if (!currentCall || isMinimized) return null;
 
   const getStatusText = (): string => {
     switch (currentCall.status) {
+      case 'calling':
+        return '正在等待对方接听...';
       case 'ringing':
-        return '通话功能暂不支持网页端';
+        return '来电响铃中...';
       case 'connecting':
-        return '通话功能暂不支持网页端';
+        return '连接中...';
       case 'connected':
-        return '通话功能暂不支持网页端';
+        return formatDuration(callDuration);
+      case 'reconnecting':
+        return '网络重连中...';
       case 'ended':
         return '通话已结束';
+      case 'failed':
+        return '连接失败';
       default:
         return '';
     }
   };
 
-  const handleEndCall = () => {
-    endCall('hangup');
-  };
+  const showRemoteVideo = !!remoteVideoTrack;
+  const showLocalVideo = currentCall?.isVideoEnabled && !!localVideoTrack;
+  const isVideoCallActive = showRemoteVideo || showLocalVideo;
 
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
-
-      {/* Background - single consistent color */}
       <View style={styles.background} />
 
-      {/* Center: Peer info */}
-      <View style={styles.centerArea}>
-        <View style={styles.avatarOuter}>
-          <View style={[styles.avatar, styles.avatarPlaceholder]}>
-            <MaterialCommunityIcons name="web-off" size={50} color="#fff" />
-          </View>
+      {showRemoteVideo && remoteVideoTrack && (
+        <VideoView
+          videoTrack={remoteVideoTrack}
+          style={styles.fullScreenVideo}
+          objectFit="cover"
+        />
+      )}
+
+      {showLocalVideo && localVideoTrack && (
+        <View style={styles.localVideoContainer}>
+          <VideoView
+            videoTrack={localVideoTrack}
+            style={styles.localVideo}
+            objectFit="cover"
+            mirror={true}
+          />
         </View>
-        <Text style={styles.peerName} numberOfLines={1}>
-          {currentCall.peerName || '未知用户'}
-        </Text>
-        <Text style={styles.status}>{getStatusText()}</Text>
+      )}
+
+      <View style={styles.topBar}>
+        <TouchableOpacity
+          style={styles.topButton}
+          onPress={toggleMinimize}
+          activeOpacity={0.7}
+        >
+          <MaterialCommunityIcons name="chevron-down" size={28} color="#fff" />
+        </TouchableOpacity>
       </View>
 
-      {/* Bottom controls */}
+      {!isVideoCallActive && (
+        <View style={styles.centerArea}>
+          <View style={styles.avatarOuter}>
+            {currentCall.peerAvatar ? (
+              <Image source={{ uri: currentCall.peerAvatar }} style={styles.avatar} />
+            ) : (
+              <View style={[styles.avatar, styles.avatarPlaceholder]}>
+                <Text style={styles.avatarText}>
+                  {currentCall.peerName?.charAt(0).toUpperCase() || '?'}
+                </Text>
+              </View>
+            )}
+          </View>
+          <Text style={styles.peerName} numberOfLines={1}>
+            {currentCall.peerName || '未知用户'}
+          </Text>
+          <Text style={styles.status}>{getStatusText()}</Text>
+        </View>
+      )}
+
+      {isVideoCallActive && (
+        <View style={styles.videoOverlayInfo}>
+          <Text style={styles.videoPeerName} numberOfLines={1}>
+            {currentCall.peerName || '未知用户'}
+          </Text>
+          <Text style={styles.videoStatus}>{getStatusText()}</Text>
+        </View>
+      )}
+
       <View style={styles.controls}>
-        {/* End call - prominent red button */}
+        <View style={styles.controlRow}>
+          <TouchableOpacity
+            style={[styles.controlButton, currentCall.isMuted && styles.controlButtonActive]}
+            onPress={toggleMute}
+            activeOpacity={0.7}
+          >
+            <View style={[styles.controlCircle, currentCall.isMuted && styles.controlCircleActive]}>
+              <MaterialCommunityIcons
+                name={currentCall.isMuted ? 'microphone-off' : 'microphone'}
+                size={26}
+                color={currentCall.isMuted ? '#333' : '#fff'}
+              />
+            </View>
+            <Text style={[styles.controlLabel, currentCall.isMuted && styles.controlLabelActive]}>
+              {currentCall.isMuted ? '取消静音' : '静音'}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.controlButton, currentCall.isVideoEnabled && styles.controlButtonActive]}
+            onPress={toggleVideo}
+            activeOpacity={0.7}
+          >
+            <View style={[styles.controlCircle, currentCall.isVideoEnabled && styles.controlCircleActive]}>
+              <MaterialCommunityIcons
+                name={currentCall.isVideoEnabled ? 'video' : 'video-off'}
+                size={26}
+                color={currentCall.isVideoEnabled ? '#333' : '#fff'}
+              />
+            </View>
+            <Text style={[styles.controlLabel, currentCall.isVideoEnabled && styles.controlLabelActive]}>
+              {currentCall.isVideoEnabled ? '关闭摄像头' : '打开摄像头'}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.controlButton, currentCall.isSpeakerOn && styles.controlButtonActive]}
+            onPress={toggleSpeaker}
+            activeOpacity={0.7}
+          >
+            <View style={[styles.controlCircle, currentCall.isSpeakerOn && styles.controlCircleActive]}>
+              <MaterialCommunityIcons
+                name={currentCall.isSpeakerOn ? 'volume-high' : 'cellphone'}
+                size={26}
+                color={currentCall.isSpeakerOn ? '#333' : '#fff'}
+              />
+            </View>
+            <Text style={[styles.controlLabel, currentCall.isSpeakerOn && styles.controlLabelActive]}>
+              {currentCall.isSpeakerOn ? '免提' : '听筒'}
+            </Text>
+          </TouchableOpacity>
+        </View>
         <TouchableOpacity
           style={styles.endCallButton}
-          onPress={handleEndCall}
+          onPress={() => endCall('hangup')}
           activeOpacity={0.8}
         >
           <View style={styles.endCallCircle}>
             <MaterialCommunityIcons name="phone-hangup" size={32} color="#fff" />
           </View>
-          <Text style={styles.endCallLabel}>关闭</Text>
+          <Text style={styles.endCallLabel}>挂断</Text>
         </TouchableOpacity>
       </View>
     </View>
   );
 };
 
-const END_CALL_SIZE = 64;
-
 const styles = StyleSheet.create({
   container: {
     ...StyleSheet.absoluteFillObject,
@@ -93,6 +253,25 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     backgroundColor: '#1A1A2E',
   },
+  topBar: {
+    position: 'absolute',
+    top: 50,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 44,
+    zIndex: 100,
+  },
+  topButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   centerArea: {
     position: 'absolute',
     top: '28%',
@@ -132,20 +311,98 @@ const styles = StyleSheet.create({
     color: 'rgba(255, 255, 255, 0.5)',
     letterSpacing: 0.3,
   },
+  fullScreenVideo: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: '#1A1A2E',
+  },
+  localVideoContainer: {
+    position: 'absolute',
+    top: 100,
+    right: 20,
+    width: 120,
+    height: 160,
+    borderRadius: 16,
+    overflow: 'hidden',
+    backgroundColor: '#2A2A4E',
+    borderWidth: 2,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+    zIndex: 50,
+  },
+  localVideo: {
+    width: '100%',
+    height: '100%',
+  },
+  videoOverlayInfo: {
+    position: 'absolute',
+    top: 100,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 50,
+  },
+  videoPeerName: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: '#FFFFFF',
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+  },
+  videoStatus: {
+    fontSize: 14,
+    color: 'rgba(255, 255, 255, 0.8)',
+    marginTop: 4,
+    textShadowColor: 'rgba(0, 0, 0, 0.5)',
+    textShadowOffset: { width: 0, height: 1 },
+    textShadowRadius: 2,
+  },
   controls: {
     position: 'absolute',
     bottom: 60,
     left: 0,
     right: 0,
     alignItems: 'center',
+    zIndex: 100,
+  },
+  controlRow: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: 24,
+    marginBottom: 24,
+  },
+  controlButton: {
+    alignItems: 'center',
+    width: 70,
+  },
+  controlCircle: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  controlCircleActive: {
+    backgroundColor: '#FFFFFF',
+  },
+  controlButtonActive: {},
+  controlLabel: {
+    fontSize: 11,
+    color: 'rgba(255, 255, 255, 0.55)',
+    marginTop: 8,
+    textAlign: 'center',
+  },
+  controlLabelActive: {
+    color: '#FFFFFF',
+    fontWeight: '500',
   },
   endCallButton: {
     alignItems: 'center',
   },
   endCallCircle: {
-    width: END_CALL_SIZE,
-    height: END_CALL_SIZE,
-    borderRadius: END_CALL_SIZE / 2,
+    width: 64,
+    height: 64,
+    borderRadius: 32,
     backgroundColor: '#E54D42',
     justifyContent: 'center',
     alignItems: 'center',