Merge pull request #369 from Yaladah/N1.1

Implement end call function for video chat
CS3219-AY2324S1 · Nov 14, 2023 · a01db82 · a01db82
2 parents e51c507 + c912d57
commit a01db82
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 1 deletion.
diff --git a/backend_services/communication_service/app/main.py b/backend_services/communication_service/app/main.py
@@ -153,6 +153,14 @@ async def join_video_channel(websocket: WebSocket, room_id: str, user_id: str):
                                 "p2pId": p2p_id,
                             }
                         )
+            elif event == "terminate-call":
+                for client in clients:
+                    if client is not websocket:
+                        await client.send_json(
+                            {
+                                "event": "terminate-call"
+                            }
+                        )
     except WebSocketDisconnect:
         websocket.close()
         clients.remove(websocket)
diff --git a/frontend/src/components/VideoChat.tsx b/frontend/src/components/VideoChat.tsx
@@ -91,6 +91,11 @@ const VideoChat: React.FC<VideoChatProps> = ({
             const data = JSON.parse(event.data)
             if (data.event == 'join-video') {
                 setRemotePeerIdValue(data.p2pId)
+            } else if (data.event == 'terminate-call') {
+                terminate_call()
+                offCamera()
+                offMic()
+                closeVideoChat()
             }
         }
 
@@ -144,6 +149,16 @@ const VideoChat: React.FC<VideoChatProps> = ({
         })
     }
 
+    const offMic = () => {
+        const localStream = currentUserVideoRef.current.srcObject
+
+        setIsMicMuted(true)
+
+        localStream.getAudioTracks().forEach((track) => {
+            track.enabled = false // Use the updated state directly
+        })
+    }
+
     const toggleCamera = () => {
         const localStream = currentUserVideoRef.current.srcObject
 
@@ -157,6 +172,40 @@ const VideoChat: React.FC<VideoChatProps> = ({
         })
     }
 
+    const offCamera = () => {
+        const localStream = currentUserVideoRef.current.srcObject
+
+        setIsCameraOn(false)
+
+        localStream.getVideoTracks().forEach((track) => {
+            track.enabled = false // Use the updated state directly
+        })
+    }
+
+    const terminate_call = () => {
+        if (peerInstance.current && peerInstance.current.connections[remotePeerIdValue]) {
+            const call = peerInstance.current.connections[remotePeerIdValue][0] // Get the call object
+            if (call) {
+                call.close() // Close the call
+            }
+        }
+    }
+
+    const endCall = () => {
+        if (socket == null) return
+
+        socket.send(
+            JSON.stringify({
+                event: 'terminate-call',
+            })
+        )
+
+        offMic()
+        offCamera()
+        terminate_call()
+        closeVideoChat()
+    }
+
     return (
         <div>
             <div className='video-chat-box'>
@@ -184,7 +233,7 @@ const VideoChat: React.FC<VideoChatProps> = ({
                     </button>
                 )}
 
-                <button className='callend-icon' onClick={closeVideoChat}>
+                <button className='callend-icon' onClick={endCall}>
                     <CallEnd />
                 </button>
             </div>