🐛 Bug fixes of webrtc

lib/widgets/chat/call_participant_tile.dart

@@ -81,30 +81,65 @@ class SpeakingRippleAvatar extends HookConsumerWidget {
   }
 }
 
-class CallParticipantTile extends HookConsumerWidget {
+class CallParticipantTile extends StatefulWidget {
   final CallParticipantLive live;
 
   const CallParticipantTile({super.key, required this.live});
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    if (live.hasVideo && live.remoteParticipant.remoteStream != null) {
+  State<CallParticipantTile> createState() => _CallParticipantTileState();
+}
+
+class _CallParticipantTileState extends State<CallParticipantTile> {
+  RTCVideoRenderer? _renderer;
+
+  @override
+  void initState() {
+    super.initState();
+    _initRenderer();
+  }
+
+  @override
+  void didUpdateWidget(CallParticipantTile oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    // Update renderer source when the stream changes
+    if (_renderer != null &&
+        widget.live.remoteParticipant.remoteStream !=
+            oldWidget.live.remoteParticipant.remoteStream) {
+      _renderer!.srcObject = widget.live.remoteParticipant.remoteStream;
+    }
+  }
+
+  Future<void> _initRenderer() async {
+    _renderer = RTCVideoRenderer();
+    await _renderer!.initialize();
+    _renderer!.srcObject = widget.live.remoteParticipant.remoteStream;
+    if (mounted) {
+      setState(() {});
+    }
+  }
+
+  @override
+  void dispose() {
+    _renderer?.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.live.hasVideo &&
+        widget.live.remoteParticipant.remoteStream != null &&
+        _renderer != null) {
       return Stack(
         fit: StackFit.loose,
         children: [
-          AspectRatio(
-            aspectRatio: 16 / 9,
-            child: RTCVideoView(
-              RTCVideoRenderer()
-                ..srcObject = live.remoteParticipant.remoteStream,
-            ),
-          ),
+          AspectRatio(aspectRatio: 16 / 9, child: RTCVideoView(_renderer!)),
           Positioned(
             left: 8,
             right: 8,
             bottom: 8,
             child: Text(
-              '@${live.participant.name}',
+              '@${widget.live.participant.name}',
               textAlign: TextAlign.center,
               style: const TextStyle(
                 fontSize: 14,
@@ -123,7 +158,7 @@ class CallParticipantTile extends HookConsumerWidget {
         ],
       );
     } else {
-      return SpeakingRippleAvatar(size: 84, live: live);
+      return SpeakingRippleAvatar(size: 84, live: widget.live);
     }
   }
 }