From ca0605fa391fa60b702c0705b53625037460bd3a Mon Sep 17 00:00:00 2001
From: Sinan <muhammedsinan7749@gmail.com>
Date: Mon, 30 Sep 2024 18:05:51 +0530
Subject: [PATCH] =?UTF-8?q?remote=20video=20in=20progress=20=F0=9F=9A=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../video-section/[sectionId]/page.tsx        |  50 ++---
 .../doctor/video-call/[sectionId]/page.tsx    |  50 ++---
 .../button/VideoSectionButtonPatient.tsx      |  19 +-
 .../page-components/video/VideoChat.tsx       | 200 ++++++++----------
 client/lib/hooks/useVideoCall.ts              |  94 ++++++++
 client/lib/webrtc/createPeerConnection.ts     |  80 ++++---
 client/types/index.ts                         |  13 +-
 7 files changed, 288 insertions(+), 218 deletions(-)
 create mode 100644 client/lib/hooks/useVideoCall.ts

diff --git a/client/app/(patient)/video-section/[sectionId]/page.tsx b/client/app/(patient)/video-section/[sectionId]/page.tsx
index 64b34221..56d7d3a2 100644
--- a/client/app/(patient)/video-section/[sectionId]/page.tsx
+++ b/client/app/(patient)/video-section/[sectionId]/page.tsx
@@ -1,49 +1,27 @@
 'use client'
 
-import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import JoinPage from './Join-page';
 import VideoChat from '@/components/page-components/video/VideoChat';
-import createPeerConnection from '@/lib/webrtc/createPeerConnection';
 import { useGetSectionByIdPatient } from '@/lib/hooks/video/usePatient';
+import { useVideoCall } from '@/lib/hooks/useVideoCall';
 
 export default function PatientVideoCallPage() {
   const { sectionId } = useParams();
-  const [hasJoined, setHasJoined] = useState(false);
-  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
   const { data, isLoading } = useGetSectionByIdPatient(sectionId as string);
   const section = data?.section;
 
-  useEffect(() => {
-    if (hasJoined && section && localStream) {
-      createPeerConnection(section.roomId ?? "id", 'patient', localStream).then(connection => {
-        if (connection) {
-          setRemoteStream(connection.remoteStream); 
-          return () => connection.peerConnection.close();
-        }
-      });
-    }
-  }, [hasJoined, section, localStream]);
-
-  const handleJoin = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-      setLocalStream(stream);
-      setHasJoined(true);
-    } catch (error) {
-      console.error('Error accessing media devices:', error);
-    }
-  };
-
-  const handleEndCall = () => {
-    if (localStream) {
-      localStream.getTracks().forEach(track => track.stop());
-    }
-    setLocalStream(null);
-    setRemoteStream(null);
-    setHasJoined(false);
-  };
+  const {
+    hasJoined,
+    localStream,
+    remoteStream,
+    handleJoin,
+    handleEndCall,
+    isMuted,
+    isVideoOff,
+    toggleMute,
+    toggleVideo
+  } = useVideoCall(section, 'patient');
 
   if (isLoading) return <div className="flex items-center justify-center h-screen">Loading...</div>;
 
@@ -53,6 +31,10 @@ export default function PatientVideoCallPage() {
 
   return (
     <VideoChat
+      isMuted={isMuted}
+      isVideoOff={isVideoOff}
+      toggleMute={toggleMute}
+      toggleVideo={toggleVideo}
       localStream={localStream}
       remoteStream={remoteStream}
       handleEndCall={handleEndCall}
diff --git a/client/app/doctor/video-call/[sectionId]/page.tsx b/client/app/doctor/video-call/[sectionId]/page.tsx
index 230fd64d..b5aca898 100644
--- a/client/app/doctor/video-call/[sectionId]/page.tsx
+++ b/client/app/doctor/video-call/[sectionId]/page.tsx
@@ -1,49 +1,27 @@
 'use client'
 
-import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import JoinPage from './Join-page';
 import VideoChat from '@/components/page-components/video/VideoChat';
-import createPeerConnection from '@/lib/webrtc/createPeerConnection';
 import { useGetSectionByIdDoctor } from '@/lib/hooks/video/useDoctor';
+import { useVideoCall } from '@/lib/hooks/useVideoCall';
 
 export default function DoctorVideoCallPage() {
   const { sectionId } = useParams();
-  const [hasJoined, setHasJoined] = useState(false);
-  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
-  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
   const { data, isLoading } = useGetSectionByIdDoctor(sectionId as string);
   const section = data?.section;
 
-  useEffect(() => {
-    if (hasJoined && section && localStream) {
-      createPeerConnection(section.roomId ?? "id", 'doctor', localStream).then(connection => {
-        if (connection) {
-          setRemoteStream(connection.remoteStream); 
-          return () => connection.peerConnection.close();
-        }
-      });
-    }
-  }, [hasJoined, section, localStream]);
-
-  const handleJoin = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
-      setLocalStream(stream);
-      setHasJoined(true);
-    } catch (error) {
-      console.error('Error accessing media devices:', error);
-    }
-  };
-
-  const handleEndCall = () => {
-    if (localStream) {
-      localStream.getTracks().forEach(track => track.stop());
-    }
-    setLocalStream(null);
-    setRemoteStream(null);
-    setHasJoined(false);
-  };
+  const {
+    hasJoined,
+    localStream,
+    remoteStream,
+    handleJoin,
+    handleEndCall,
+    isMuted,
+    isVideoOff,
+    toggleMute,
+    toggleVideo
+  } = useVideoCall(section, 'doctor');
 
   if (isLoading) return <div className="flex items-center justify-center h-screen">Loading...</div>;
 
@@ -53,6 +31,10 @@ export default function DoctorVideoCallPage() {
 
   return (
     <VideoChat
+      isMuted={isMuted}
+      isVideoOff={isVideoOff}
+      toggleMute={toggleMute}
+      toggleVideo={toggleVideo}
       localStream={localStream}
       remoteStream={remoteStream}
       handleEndCall={handleEndCall}
diff --git a/client/components/button/VideoSectionButtonPatient.tsx b/client/components/button/VideoSectionButtonPatient.tsx
index 5c1e54fd..3f4a472c 100644
--- a/client/components/button/VideoSectionButtonPatient.tsx
+++ b/client/components/button/VideoSectionButtonPatient.tsx
@@ -13,8 +13,7 @@ const VideoSectionButtonPatient = () => {
     const handleClick = () => {
         setIsModalOpen(true);
     }
-
-    console.log(upcomingSections);
+    
     if (isLoading) return null
 
 
@@ -38,13 +37,15 @@ const VideoSectionButtonPatient = () => {
                 )}
                 <span className="sr-only">View Upcoming Video Calls</span>
             </ButtonV2>
-            <VideoSectionsModel
-                open={isModalOpen}
-                setOpen={setIsModalOpen}
-                sections={upcomingSections!}
-                link="/video-section"
-                user='patient'
-            />
+            {upcomingSections && (
+                <VideoSectionsModel
+                    open={isModalOpen}
+                    setOpen={setIsModalOpen}
+                    sections={upcomingSections!}
+                    link="/video-section"
+                    user='patient'
+                />
+            )}
         </>
     )
 }
diff --git a/client/components/page-components/video/VideoChat.tsx b/client/components/page-components/video/VideoChat.tsx
index 1f618fa6..de1a05b4 100644
--- a/client/components/page-components/video/VideoChat.tsx
+++ b/client/components/page-components/video/VideoChat.tsx
@@ -1,67 +1,45 @@
-'use client'
-
-import { useState, useEffect, useRef } from 'react'
-import { Mic, MicOff, Video, VideoOff, PhoneOff } from 'lucide-react'
-import { Button } from "@/components/ui/button"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-
-interface VideoChatProps {
-  localStream: MediaStream | null
-  remoteStream: MediaStream | null
-  handleEndCall: () => void
-  isDoctor: boolean
-  selfAvatar: string
-  remoteAvatar: string
-}
+import { useRef, useEffect } from 'react';
+import { Mic, MicOff, Video, VideoOff, PhoneOff } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { VideoChatProps } from '@/types';
 
 export default function VideoChat({
   localStream,
   remoteStream,
   handleEndCall,
+  toggleMute,
+  toggleVideo,
+  isMuted,
+  isVideoOff,
   isDoctor,
   selfAvatar,
   remoteAvatar
 }: VideoChatProps) {
-  const [isMuted, setIsMuted] = useState(false)
-  const [isVideoOff, setIsVideoOff] = useState(false)
-  const [showControls, setShowControls] = useState(true)
-  const localVideoRef = useRef<HTMLVideoElement>(null)
-  const remoteVideoRef = useRef<HTMLVideoElement>(null)
-
+  const localVideoRef = useRef<HTMLVideoElement>(null);
+  const remoteVideoRef = useRef<HTMLVideoElement>(null);
   useEffect(() => {
     if (localVideoRef.current && localStream) {
-      localVideoRef.current.srcObject = localStream
+      localVideoRef.current.srcObject = localStream;
     }
-  }, [localStream])
+  }, [localStream, isVideoOff]);
+
 
   useEffect(() => {
     if (remoteVideoRef.current && remoteStream) {
-      remoteVideoRef.current.srcObject = remoteStream
+      console.log('Setting remote stream');
+      remoteVideoRef.current.srcObject = remoteStream;
+    } else {
+      console.log('Remote stream is not available');
     }
-  }, [remoteStream])
-
-  const toggleMute = () => {
-    if (localStream) {
-      localStream.getAudioTracks().forEach(track => track.enabled = !track.enabled)
-      setIsMuted(!isMuted)
-    }
-  }
-
-  const toggleVideo = () => {
-    if (localStream) {
-      localStream.getVideoTracks().forEach(track => track.enabled = !track.enabled)
-      setIsVideoOff(!isVideoOff)
-    }
-  }
-
-  const toggleControls = () => {
-    setShowControls(!showControls)
-  }
+  }, [remoteStream]);
+  
 
   return (
-    <div className="relative w-full h-screen bg-black" onClick={toggleControls}>
-      <div className="absolute inset-0">
+    <div className="relative w-full max-w-3xl mx-auto aspect-video bg-gray-900 rounded-lg overflow-hidden shadow-lg">
+      {/* Remote Video */}
+      <div className="absolute inset-0 flex items-center justify-center">
         {remoteStream ? (
           <video
             ref={remoteVideoRef}
@@ -70,16 +48,17 @@ export default function VideoChat({
             className="w-full h-full object-cover"
           />
         ) : (
-          <div className="w-full h-full flex items-center justify-center">
-            <Avatar className="w-32 h-32">
+          <div className="w-full h-full flex items-center justify-center bg-gray-800">
+            <Avatar className="w-32 h-32 sm:w-48 sm:h-48">
               <AvatarImage src={remoteAvatar} alt="Remote user" />
               <AvatarFallback>{isDoctor ? 'P' : 'D'}</AvatarFallback>
             </Avatar>
           </div>
         )}
       </div>
-      <div className="absolute top-4 right-4 w-32 h-24 overflow-hidden rounded-lg shadow-lg">
-        {localStream ? (
+
+      <div className="absolute top-2 right-2 sm:top-4 sm:right-4 w-24 h-18 sm:w-32 sm:h-24 overflow-hidden rounded-lg shadow-lg">
+        {localStream && !isVideoOff ? (
           <video
             ref={localVideoRef}
             autoPlay
@@ -89,70 +68,73 @@ export default function VideoChat({
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center bg-gray-800">
-            <Avatar className="w-12 h-12">
+            <Avatar className="w-12 h-12 sm:w-16 sm:h-16">
               <AvatarImage src={selfAvatar} alt="You" />
               <AvatarFallback>{isDoctor ? 'D' : 'P'}</AvatarFallback>
             </Avatar>
           </div>
         )}
       </div>
-      {showControls && (
-        <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
-          <div className="flex justify-center space-x-4">
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    onClick={toggleMute}
-                    variant={isMuted ? "destructive" : "secondary"}
-                    size="icon"
-                    className="rounded-full"
-                  >
-                    {isMuted ? <MicOff className="h-5 w-5" /> : <Mic className="h-5 w-5" />}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{isMuted ? 'Unmute' : 'Mute'}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    onClick={toggleVideo}
-                    variant={isVideoOff ? "destructive" : "secondary"}
-                    size="icon"
-                    className="rounded-full"
-                  >
-                    {isVideoOff ? <VideoOff className="h-5 w-5" /> : <Video className="h-5 w-5" />}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{isVideoOff ? 'Turn on video' : 'Turn off video'}</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    onClick={handleEndCall}
-                    variant="destructive"
-                    size="icon"
-                    className="rounded-full"
-                  >
-                    <PhoneOff className="h-5 w-5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>End call</p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
+
+
+      {/* Control Buttons */}
+      <div className="absolute bottom-0 left-0 right-0 p-2 sm:p-4 bg-gradient-to-t from-black to-transparent">
+        <div className="flex justify-center space-x-2 sm:space-x-4">
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={toggleMute}
+                  variant={isMuted ? "destructive" : "secondary"}
+                  size="icon"
+                  className="rounded-full w-8 h-8 sm:w-10 sm:h-10"
+                >
+                  {isMuted ? <MicOff className="h-4 w-4 sm:h-5 sm:w-5" /> : <Mic className="h-4 w-4 sm:h-5 sm:w-5" />}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{isMuted ? 'Unmute' : 'Mute'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={toggleVideo}
+                  variant={isVideoOff ? "destructive" : "secondary"}
+                  size="icon"
+                  className="rounded-full w-8 h-8 sm:w-10 sm:h-10"
+                >
+                  {isVideoOff ? <VideoOff className="h-4 w-4 sm:h-5 sm:w-5" /> : <Video className="h-4 w-4 sm:h-5 sm:w-5" />}
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>{isVideoOff ? 'Turn on video' : 'Turn off video'}</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  onClick={handleEndCall}
+                  variant="destructive"
+                  size="icon"
+                  className="rounded-full w-8 h-8 sm:w-10 sm:h-10"
+                >
+                  <PhoneOff className="h-4 w-4 sm:h-5 sm:w-5" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>End call</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
         </div>
-      )}
+      </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/client/lib/hooks/useVideoCall.ts b/client/lib/hooks/useVideoCall.ts
new file mode 100644
index 00000000..998e7a48
--- /dev/null
+++ b/client/lib/hooks/useVideoCall.ts
@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import createPeerConnection from '@/lib/webrtc/createPeerConnection';
+
+export const useVideoCall = (section: any, role: 'patient' | 'doctor') => {
+  const [hasJoined, setHasJoined] = useState(false);
+  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
+  const [remoteStream, setRemoteStream] = useState<MediaStream>(new MediaStream()); // Initialize to a new MediaStream
+  const [isMuted, setIsMuted] = useState(false);
+  const [isVideoOff, setIsVideoOff] = useState(false);
+
+  useEffect(() => {
+    let peerConnection: RTCPeerConnection | null = null;
+  
+    if (hasJoined && section && localStream) {
+      createPeerConnection(section.roomId!, role, localStream).then(connection => {
+        if (connection) {
+          peerConnection = connection.peerConnection;
+  
+          peerConnection.ontrack = (event) => {
+            const [stream] = event.streams;
+            console.log('Received remote track:', stream);
+            if (stream) {
+              stream.getTracks().forEach(track => {
+                console.log('Remote track info:', track); // Log each track
+                remoteStream.addTrack(track);
+              });
+              setRemoteStream(new MediaStream(remoteStream));  // Trigger state update
+            }
+          };
+          
+          
+        }
+      });
+    }
+
+    
+  
+    return () => {
+      if (peerConnection) {
+        peerConnection.close();
+      }
+    };
+  }, [hasJoined, section, localStream, role]);
+  
+
+  const handleJoin = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
+      setLocalStream(stream);
+      setHasJoined(true);
+    } catch (error) {
+      console.error('Error accessing media devices:', error);
+    }
+  };
+
+  const handleEndCall = () => {
+    if (localStream) {
+      localStream.getTracks().forEach(track => track.stop());
+    }
+    setLocalStream(null);
+    setRemoteStream(new MediaStream()); // Reset remote stream
+    setHasJoined(false);
+  };
+
+  const toggleMute = () => {
+    if (localStream) {
+      localStream.getAudioTracks().forEach(track => {
+        track.enabled = !track.enabled;
+      });
+      setIsMuted(prev => !prev);
+    }
+  };
+
+  const toggleVideo = () => {
+    if (localStream) {
+      localStream.getVideoTracks().forEach(track => {
+        track.enabled = !track.enabled; // Toggle the enabled state
+      });
+      setIsVideoOff(prev => !prev); // Update the isVideoOff state
+    }
+  };
+
+  return {
+    hasJoined,
+    localStream,
+    remoteStream,
+    isMuted,
+    isVideoOff,
+    handleJoin,
+    handleEndCall,
+    toggleMute,
+    toggleVideo,
+  };
+};
diff --git a/client/lib/webrtc/createPeerConnection.ts b/client/lib/webrtc/createPeerConnection.ts
index 0e28b327..d3989749 100644
--- a/client/lib/webrtc/createPeerConnection.ts
+++ b/client/lib/webrtc/createPeerConnection.ts
@@ -2,66 +2,84 @@ import peerConfiguration from "@/config/webRTCStuntServer";
 import connectSocketIO from "../socket.io/connectSocketIO";
 
 const createPeerConnection = async (
-  roomId: string, 
-  role: 'patient' | 'doctor', 
+  roomId: string,
+  role: 'patient' | 'doctor',
   localStream: MediaStream
-): Promise<{ 
-  peerConnection: RTCPeerConnection, 
-  remoteStream: MediaStream 
+): Promise<{
+  peerConnection: RTCPeerConnection,
+  remoteStream: MediaStream
 } | null> => {
   try {
     const socket = connectSocketIO({ role, namespace: 'video' });
     const peerConnection = new RTCPeerConnection(peerConfiguration);
     const remoteStream = new MediaStream();
+    const candidateQueue: RTCIceCandidate[] = [];
 
-    // Join the room
     socket.emit('join-room', roomId);
-    
-    // Add local stream tracks to peer connection
-    localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
 
-    // Handle onicecandidate event
+    localStream.getTracks().forEach(track => {
+      peerConnection.addTrack(track, localStream);
+    });
+
     peerConnection.onicecandidate = (event) => {
       if (event.candidate) {
         socket.emit('ice-candidate', event.candidate, roomId);
       }
     };
 
-    // Handle incoming remote stream
     peerConnection.ontrack = (event) => {
-      event.streams[0].getTracks().forEach((track) => {
+      event.streams[0].getTracks().forEach(track => {
         remoteStream.addTrack(track);
       });
     };
 
-    // Listen for ice candidates from server
-    socket.on('ice-candidate', (candidate) => {
-      peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
+    socket.on('ice-candidate', async (candidate) => {
+      const iceCandidate = new RTCIceCandidate(candidate);
+      if (peerConnection.signalingState === 'closed') return;
+
+      if (peerConnection.remoteDescription) {
+        try {
+          await peerConnection.addIceCandidate(iceCandidate);
+        } catch (error) {
+          console.error('Error adding received ICE candidate:', error);
+        }
+      } else {
+        candidateQueue.push(iceCandidate);
+      }
     });
 
-    if (role === 'doctor') {
-      // Doctor creates and sends offer
-      const offer = await peerConnection.createOffer();
-      await peerConnection.setLocalDescription(offer);
-      socket.emit('offer', offer, roomId);
-    }
+    const processIceCandidates = async () => {
+      while (candidateQueue.length > 0 && peerConnection.signalingState !== 'closed') {
+        const candidate = candidateQueue.shift();
+        if (candidate) {
+          await peerConnection.addIceCandidate(candidate);
+        }
+      }
+    };
+
+    const offer = await peerConnection.createOffer();
+    await peerConnection.setLocalDescription(offer);
+    socket.emit('offer', offer, roomId);
+
+    socket.on('answer', async (answer) => {
+      if (peerConnection.signalingState !== 'closed') {
+        await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
+        await processIceCandidates(); // Process queued candidates
+      }
+    });
 
-    // Handle offer and send answer if patient
-    if (role === 'patient') {
-      socket.on('offer', async (offer) => {
-        await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
+    socket.on('offer', async (offer) => {
+      if (peerConnection.signalingState === 'stable') {
         const answer = await peerConnection.createAnswer();
         await peerConnection.setLocalDescription(answer);
         socket.emit('answer', answer, roomId);
-      });
-    }
-
-    // Handle answer if doctor
-    socket.on('answer', async (answer) => {
-      await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
+      } else {
+        console.warn('Received an offer while in a non-stable state; ignoring.');
+      }
     });
 
     return { peerConnection, remoteStream };
+
   } catch (error) {
     console.error('Error in createPeerConnection:', error);
     return null;
diff --git a/client/types/index.ts b/client/types/index.ts
index b53e1b41..d1342f68 100644
--- a/client/types/index.ts
+++ b/client/types/index.ts
@@ -58,4 +58,15 @@ export interface CustomProps {
    showDateText?: string;
 }
 
-
+export interface VideoChatProps {
+   localStream: MediaStream | null;
+   remoteStream: MediaStream | null;
+   handleEndCall: () => void;
+   toggleMute: () => void;
+   toggleVideo: () => void;
+   isMuted: boolean;
+   isVideoOff: boolean;
+   isDoctor: boolean;
+   selfAvatar: string;
+   remoteAvatar: string;
+}