From caf595e9686be7070ac9358bafe26c6d70f5d8ba Mon Sep 17 00:00:00 2001 From: denis0001-dev Date: Sat, 11 Oct 2025 14:05:44 +0300 Subject: [PATCH] Start the implementation --- backend/routes/messaging.py | 61 +++ frontend/src/core/calls/e2eeWorker.ts | 94 ++-- frontend/src/core/calls/signaling.ts | 42 +- frontend/src/core/calls/webrtc.ts | 482 ++++++++++++++++-- frontend/src/core/types.d.ts | 16 +- frontend/src/pages/chat/css/_callWindow.scss | 206 ++++++-- frontend/src/pages/chat/hooks/useAudioCall.ts | 22 +- frontend/src/pages/chat/hooks/useCall.ts | 389 ++++++++++++++ frontend/src/pages/chat/state.ts | 72 ++- .../chat/ui/right/calls/MinimizedCallBar.tsx | 4 +- 10 files changed, 1210 insertions(+), 178 deletions(-) create mode 100644 frontend/src/pages/chat/hooks/useCall.ts diff --git a/backend/routes/messaging.py b/backend/routes/messaging.py index e44eede..d76a28d 100644 --- a/backend/routes/messaging.py +++ b/backend/routes/messaging.py @@ -914,6 +914,9 @@ class MessaggingSocketManager: elif type == "call_signaling": # Forward WebRTC signaling between peers try: + current_user = get_current_user_inner() + if not current_user: + raise HTTPException(401) self.user_by_ws[websocket] = current_user.id payload = data.get("data") or {} @@ -934,6 +937,64 @@ class MessaggingSocketManager: await websocket.send_json({"type": "call_signaling", "data": {"status": "ok"}}) except HTTPException as e: await self.send_error(websocket, type, e) + elif type == "call_video_toggle": + # Forward video toggle state between peers + try: + current_user = get_current_user_inner() + if not current_user: + raise HTTPException(401) + self.user_by_ws[websocket] = current_user.id + + payload = data.get("data") or {} + to_user_id = int(payload.get("toUserId") or 0) + if not to_user_id: + raise HTTPException(status_code=400, detail="Missing toUserId") + + # Ensure sender is set by the server + payload["fromUserId"] = current_user.id + + await self.send_to_user(to_user_id, { + "type": "call_signaling", + "data": { + "type": "call_video_toggle", + "fromUserId": current_user.id, + "toUserId": to_user_id, + "data": {"enabled": payload.get("enabled", False)} + } + }) + + await websocket.send_json({"type": "call_video_toggle", "data": {"status": "ok"}}) + except HTTPException as e: + await self.send_error(websocket, type, e) + elif type == "call_screen_share_toggle": + # Forward screen share toggle state between peers + try: + current_user = get_current_user_inner() + if not current_user: + raise HTTPException(401) + self.user_by_ws[websocket] = current_user.id + + payload = data.get("data") or {} + to_user_id = int(payload.get("toUserId") or 0) + if not to_user_id: + raise HTTPException(status_code=400, detail="Missing toUserId") + + # Ensure sender is set by the server + payload["fromUserId"] = current_user.id + + await self.send_to_user(to_user_id, { + "type": "call_signaling", + "data": { + "type": "call_screen_share_toggle", + "fromUserId": current_user.id, + "toUserId": to_user_id, + "data": {"enabled": payload.get("enabled", False)} + } + }) + + await websocket.send_json({"type": "call_screen_share_toggle", "data": {"status": "ok"}}) + except HTTPException as e: + await self.send_error(websocket, type, e) else: await websocket.send_json({"type": type, "error": {"code": 400, "detail": "Invalid type"}}) diff --git a/frontend/src/core/calls/e2eeWorker.ts b/frontend/src/core/calls/e2eeWorker.ts index 3d453de..2dac954 100644 --- a/frontend/src/core/calls/e2eeWorker.ts +++ b/frontend/src/core/calls/e2eeWorker.ts @@ -1,6 +1,7 @@ /** * E2EE Worker for WebRTC Insertable Streams - * Conditionally encrypts or decrypts encoded audio frames using AES-GCM + * Encrypts/decrypts encoded audio and video frames using AES-GCM + * Optimized for both small audio frames and large video frames */ export interface EncodedFrame { @@ -10,87 +11,60 @@ export interface EncodedFrame { export interface WorkerOptions { key: CryptoKey; mode: 'encrypt' | 'decrypt'; - sessionId?: string; // For replay protection + sessionId?: string; } addEventListener("rtctransform", (event) => { const { transformer } = event; const { readable, writable } = transformer; - const { key, mode, sessionId } = transformer.options as WorkerOptions; + const { key, mode } = transformer.options as WorkerOptions; - // Generate a random base IV once per transform session - const ivBase = crypto.getRandomValues(new Uint8Array(8)); // 8 random bytes + // Use a synchronized counter for IV generation + // Both sides must start from the same point for the same session let frameCounter = 0; - let lastFrameTime = 0; - const FRAME_WINDOW_MS = 5000; // 5 second window for replay protection - + + // Track sender vs receiver side independently + // Each side maintains its own counter + const isEncrypting = mode === 'encrypt'; + async function transform(encodedFrame: EncodedFrame, controller: TransformStreamDefaultController) { try { - const currentTime = Date.now(); - - // Replay protection for decryption - if (mode === 'decrypt') { - // Simple time-based replay protection - if (currentTime - lastFrameTime > FRAME_WINDOW_MS && lastFrameTime > 0) { - console.warn("Potential replay attack detected - frame outside time window"); - controller.error(new Error("Replay attack detected")); - return; - } - lastFrameTime = currentTime; - } - - // Create IV: 8 random bytes + 4-byte frame counter + // Create a unique IV for each frame using the counter + // Format: 12 bytes total = 8 bytes of zeros + 4 bytes counter const iv = new Uint8Array(12); - iv.set(ivBase, 0); // Copy random base const view = new DataView(iv.buffer); - view.setUint32(8, frameCounter++, false); // Big-endian frame counter + view.setUint32(8, frameCounter++, false); // Big-endian counter const data = new Uint8Array(encodedFrame.data); - - // Add frame metadata for authentication - const frameMetadata = new TextEncoder().encode(JSON.stringify({ - frameNumber: frameCounter - 1, - timestamp: currentTime, - sessionId: sessionId || 'default' - })); - - // Combine frame data with metadata - const combinedData = new Uint8Array(data.length + frameMetadata.length); - combinedData.set(frameMetadata, 0); - combinedData.set(data, frameMetadata.length); - const params: AesGcmParams = { name: 'AES-GCM', iv }; let result: ArrayBuffer; - if (mode === 'encrypt') { - result = await crypto.subtle.encrypt(params, key, combinedData); + + if (isEncrypting) { + // Encrypt: just encrypt the raw frame data + result = await crypto.subtle.encrypt(params, key, data); } else { - result = await crypto.subtle.decrypt(params, key, combinedData); - - // Verify frame metadata on decryption - const decryptedData = new Uint8Array(result); - const metadataLength = frameMetadata.length; - const extractedMetadata = decryptedData.slice(0, metadataLength); - const extractedData = decryptedData.slice(metadataLength); - - try { - const metadata = JSON.parse(new TextDecoder().decode(extractedMetadata)); - if (metadata.frameNumber !== frameCounter - 1) { - throw new Error("Frame sequence number mismatch"); - } - result = extractedData.buffer; - } catch (parseError) { - console.warn("Frame authentication failed:", parseError); - controller.error(new Error("Frame authentication failed")); - return; - } + // Decrypt: just decrypt the raw frame data + result = await crypto.subtle.decrypt(params, key, data); } + // Update frame data with encrypted/decrypted result encodedFrame.data = new Uint8Array(result); controller.enqueue(encodedFrame); + } catch (e) { - console.error(`E2EE ${mode} failed:`, e); - controller.error(new Error(`E2EE ${mode} failed`)); + // Log error but don't stop the stream - allows graceful degradation + console.error(`E2EE ${mode} failed for frame ${frameCounter}:`, e); + + // For decryption errors, we can't recover - must drop the frame + if (!isEncrypting) { + // Just drop the frame silently to avoid breaking the stream + return; + } + + // For encryption errors, pass through unencrypted as last resort + console.warn("Passing through unencrypted frame due to encryption failure"); + controller.enqueue(encodedFrame); } } diff --git a/frontend/src/core/calls/signaling.ts b/frontend/src/core/calls/signaling.ts index 831c6f1..c555084 100644 --- a/frontend/src/core/calls/signaling.ts +++ b/frontend/src/core/calls/signaling.ts @@ -5,6 +5,8 @@ export interface CallState { receiveCall: (userId: number, username: string) => void; endCall: () => void; setCallSessionKeyHash: (sessionKeyHash: string) => void; + setRemoteVideoEnabled: (enabled: boolean) => void; + setRemoteScreenSharing: (enabled: boolean) => void; } export class CallSignalingHandler { @@ -52,6 +54,12 @@ export class CallSignalingHandler { case "call_session_key": this.handleCallSessionKey(data); break; + case "call_video_toggle": + this.handleVideoToggle(data); + break; + case "call_screen_share_toggle": + this.handleScreenShareToggle(data); + break; } } @@ -59,11 +67,11 @@ export class CallSignalingHandler { const { fromUserId, fromUsername } = data; const state = this.getState(); - // Show incoming call UI - state.receiveCall(fromUserId, fromUsername); - - // Handle incoming call in WebRTC service + // First, create the peer connection in WebRTC service await WebRTC.handleIncomingCall(fromUserId, fromUsername); + + // Then show incoming call UI + state.receiveCall(fromUserId, fromUsername); } private async handleCallAccept(data: any) { @@ -126,4 +134,30 @@ export class CallSignalingHandler { WebRTC.receiveWrappedSessionKey(message.fromUserId, data.wrappedSessionKey, sessionKeyHash); } } + + private handleVideoToggle(data: any) { + console.log("handleVideoToggle called with data:", data); + const state = this.getState(); + const { data: toggleData } = data; + + if (toggleData && typeof toggleData.enabled === "boolean") { + console.log("Setting remote video enabled to:", toggleData.enabled); + state.setRemoteVideoEnabled(toggleData.enabled); + } else { + console.warn("Invalid toggle data:", toggleData); + } + } + + private handleScreenShareToggle(data: any) { + console.log("handleScreenShareToggle called with data:", data); + const state = this.getState(); + const { data: toggleData } = data; + + if (toggleData && typeof toggleData.enabled === "boolean") { + console.log("Setting remote screen sharing to:", toggleData.enabled); + state.setRemoteScreenSharing(toggleData.enabled); + } else { + console.warn("Invalid toggle data:", toggleData); + } + } } diff --git a/frontend/src/core/calls/webrtc.ts b/frontend/src/core/calls/webrtc.ts index 1424230..82f2d32 100644 --- a/frontend/src/core/calls/webrtc.ts +++ b/frontend/src/core/calls/webrtc.ts @@ -1,21 +1,25 @@ import { getAuthHeaders } from "@/core/api/authApi"; import type { CallSignalingMessage, IceServersResponse } from "@/core/types"; import { request } from "@/core/websocket"; -import { wrapCallSessionKeyForRecipient, unwrapCallSessionKeyFromSender } from "./encryption"; +import { wrapCallSessionKeyForRecipient, unwrapCallSessionKeyFromSender, rotateCallSessionKey } from "./encryption"; import { fetchUserPublicKey } from "@/core/api/dmApi"; import { importAesGcmKey } from "@/utils/crypto/symmetric"; import E2EEWorker from "./e2eeWorker?worker"; -import { rotateCallSessionKey, createSharedSecretAndDeriveSessionKey } from "./encryption"; export interface WebRTCCall { peerConnection: RTCPeerConnection; localStream: MediaStream | null; remoteStream: MediaStream | null; + localVideoStream: MediaStream | null; + screenShareStream: MediaStream | null; isInitiator: boolean; remoteUserId: number; remoteUsername: string; isEnding?: boolean; isMuted?: boolean; + isLocalVideoEnabled: boolean; + isScreenSharing: boolean; + isNegotiating?: boolean; // Insertable Streams E2EE sessionKey?: Uint8Array | null; sessionCryptoKey?: CryptoKey | null; @@ -28,6 +32,10 @@ export interface WebRTCCall { export let authToken: string | null = null; export let onCallStateChange: ((userId: number, state: string) => void) | null = null; export let onRemoteStream: ((userId: number, stream: MediaStream) => void) | null = null; +export let onLocalVideoStream: ((userId: number, stream: MediaStream | null) => void) | null = null; +export let onRemoteVideoStream: ((userId: number, stream: MediaStream | null) => void) | null = null; +export let onLocalScreenShare: ((userId: number, stream: MediaStream | null) => void) | null = null; +export let onRemoteScreenShare: ((userId: number, stream: MediaStream | null) => void) | null = null; const calls: Map = new Map(); export function setAuthToken(token: string) { @@ -42,6 +50,22 @@ export function setRemoteStreamHandler(handler: (userId: number, stream: MediaSt onRemoteStream = handler; } +export function setLocalVideoStreamHandler(handler: (userId: number, stream: MediaStream | null) => void) { + onLocalVideoStream = handler; +} + +export function setRemoteVideoStreamHandler(handler: (userId: number, stream: MediaStream | null) => void) { + onRemoteVideoStream = handler; +} + +export function setLocalScreenShareHandler(handler: (userId: number, stream: MediaStream | null) => void) { + onLocalScreenShare = handler; +} + +export function setRemoteScreenShareHandler(handler: (userId: number, stream: MediaStream | null) => void) { + onRemoteScreenShare = handler; +} + async function sendSignalingMessage(message: CallSignalingMessage) { if (!authToken) { throw new Error("No auth token available"); @@ -99,10 +123,14 @@ async function createPeerConnection(userId: number): Promise peerConnection, localStream: null, remoteStream: null, + localVideoStream: null, + screenShareStream: null, isInitiator: false, remoteUserId: userId, remoteUsername: "", isMuted: false, + isLocalVideoEnabled: false, + isScreenSharing: false, sessionKey: null, sessionCryptoKey: null, sessionId: crypto.randomUUID() @@ -144,17 +172,103 @@ async function createPeerConnection(userId: number): Promise }); peerConnection.addEventListener("signalingstatechange", () => { - // Signaling state changed + console.log("Signaling state changed:", peerConnection.signalingState); + }); + + // Handle renegotiation when tracks are added/removed + peerConnection.addEventListener("negotiationneeded", async () => { + try { + console.log("Negotiation needed for user", userId); + const call = calls.get(userId); + if (!call) { + console.log("Skipping renegotiation - call not found"); + return; + } + + // Prevent multiple simultaneous negotiations + if (call.isNegotiating) { + console.log("Already negotiating, skipping"); + return; + } + + // Skip if we're in "stable" state and haven't finished the initial handshake + if (peerConnection.signalingState !== "stable") { + console.log("Skipping renegotiation - signaling state is", peerConnection.signalingState); + return; + } + + call.isNegotiating = true; + console.log("Creating new offer for renegotiation (signalingState:", peerConnection.signalingState + ")"); + + const offer = await peerConnection.createOffer(); + await peerConnection.setLocalDescription(offer); + + console.log("Sending renegotiation offer to user", userId); + await sendSignalingMessage({ + type: "call_offer", + fromUserId: 0, + toUserId: userId, + data: offer + }); + + call.isNegotiating = false; + } catch (error) { + console.error("Failed to handle negotiation:", error); + const call = calls.get(userId); + if (call) { + call.isNegotiating = false; + } + } }); // Handle remote stream - peerConnection.addEventListener("track", (event) => { + peerConnection.addEventListener("track", async (event) => { + console.log("Received track:", event.track.kind, "from user", userId, "stream ID:", event.streams[0]?.id); + const [remoteStream] = event.streams; const call = calls.get(userId); - if (call) { - call.remoteStream = remoteStream; - if (onRemoteStream) { - onRemoteStream(userId, remoteStream); + if (call && remoteStream) { + const track = event.track; + + // Apply E2EE transform to the receiver for this new track if session key is available + // Currently disabled for video tracks due to counter synchronization issues + if (call.sessionKey && window.RTCRtpScriptTransform && track.kind === "audio") { + try { + const key = await importAesGcmKey(call.sessionKey); + const receiver = call.peerConnection.getReceivers().find(r => r.track === track); + if (receiver) { + console.log(`Applying decrypt transform to newly received ${track.kind} track`); + // @ts-ignore + receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId: call.sessionId }); + } + } catch (error) { + console.error("Failed to apply E2EE to received track:", error); + } + } + + // Determine stream type based on track kind and stream ID + const streamId = remoteStream.id; + + // Check if this is a screen share stream (we'll use a convention: screen share streams have "screen" in their ID) + if (streamId.includes("screen")) { + console.log("Detected screen share track, notifying handler"); + // Handle remote screen share + if (onRemoteScreenShare) { + onRemoteScreenShare(userId, remoteStream); + } + } else if (track.kind === "video") { + console.log("Detected video track, notifying handler"); + // Handle remote video + if (onRemoteVideoStream) { + onRemoteVideoStream(userId, remoteStream); + } + } else if (track.kind === "audio") { + console.log("Detected audio track, notifying handler"); + // Handle remote audio (existing behavior) + call.remoteStream = remoteStream; + if (onRemoteStream) { + onRemoteStream(userId, remoteStream); + } } } }); @@ -168,10 +282,10 @@ async function createPeerConnection(userId: number): Promise onCallStateChange(userId, peerConnection.connectionState); } - // Clean up if connection failed or closed + // Clean up only on permanent failures + // Don't end on "disconnected" - ICE can recover from temporary disconnections if (peerConnection.connectionState === "failed" || - peerConnection.connectionState === "closed" || - peerConnection.connectionState === "disconnected") { + peerConnection.connectionState === "closed") { // Only send end call message if we're not already cleaning up const call = calls.get(userId); if (call && !call.isEnding) { @@ -270,20 +384,37 @@ export async function sendWrappedCallSessionKey(userId: number, sessionKey: Uint async function applyE2EETransforms(call: WebRTCCall): Promise { try { // @ts-ignore - if (!call.sessionKey || !window.RTCRtpScriptTransform) return; + if (!call.sessionKey || !window.RTCRtpScriptTransform) { + console.log("Skipping E2EE transforms - session key or RTCRtpScriptTransform not available"); + return; + } + + console.log("Applying E2EE transforms for call", call.remoteUserId); const key = await importAesGcmKey(call.sessionKey); call.sessionCryptoKey = key; - const receiver = call.peerConnection.getReceivers().find(r => r.track && r.track.kind === 'audio'); - if (receiver) { - // @ts-ignore - receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt' }); + + // Apply to audio receivers only (video E2EE requires synchronized counters) + const receivers = call.peerConnection.getReceivers(); + for (const receiver of receivers) { + if (receiver.track && receiver.track.kind === "audio") { + console.log(`Applying decrypt transform to ${receiver.track.kind} receiver`); + // @ts-ignore + receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId: call.sessionId }); + } } - const sender = call.peerConnection.getSenders().find(s => s.track && s.track.kind === 'audio'); - if (sender) { - // @ts-ignore - sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt' }); + + // Apply to audio senders only (video E2EE requires synchronized counters) + const senders = call.peerConnection.getSenders(); + for (const sender of senders) { + if (sender.track && sender.track.kind === "audio") { + console.log(`Applying encrypt transform to ${sender.track.kind} sender`); + // @ts-ignore + sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt', sessionId: call.sessionId }); + } } - } catch {} + } catch (error) { + console.error("Failed to apply E2EE transforms:", error); + } } export async function setSessionKey(userId: number, keyBytes: Uint8Array): Promise { @@ -341,19 +472,15 @@ export async function receiveWrappedSessionKey(fromUserId: number, wrappedPayloa if (!senderPublicKey) return; if (!wrappedPayload || !sessionKeyHash) return; - // First unwrap the session key from the encrypted payload (for validation) - await unwrapCallSessionKeyFromSender(senderPublicKey, { + // Unwrap the session key from the encrypted payload + const unwrappedSessionKey = await unwrapCallSessionKeyFromSender(senderPublicKey, { salt: wrappedPayload.salt, iv2: wrappedPayload.iv2, wrapped: wrappedPayload.wrapped }); - // Then derive the actual session key from the shared secret - const call = calls.get(fromUserId); - const isInitiator = call?.isInitiator ?? false; - const derivedSessionKey = await createSharedSecretAndDeriveSessionKey(senderPublicKey, sessionKeyHash, isInitiator); - - await setSessionKey(fromUserId, derivedSessionKey.key); + // Use the unwrapped session key directly (both sides should have the same key) + await setSessionKey(fromUserId, unwrappedSessionKey); } catch (e) { console.error("Failed to unwrap session key:", e); } @@ -369,10 +496,12 @@ export async function acceptCall(userId: number): Promise { if (!call) return false; } - // Get user media and attach - const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); - call.localStream = localStream; - localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream)); + // Get user media and attach (only if not already attached) + if (!call.localStream) { + const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); + call.localStream = localStream; + localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream)); + } // Notify initiator that callee accepted; initiator will generate offer await sendSignalingMessage({ @@ -440,6 +569,10 @@ export async function onRemoteAccepted(userId: number): Promise { } try { + // Small delay to ensure remote peer finishes processing the accept + // This prevents race conditions where our offer arrives before they're ready + await new Promise(resolve => setTimeout(resolve, 100)); + // Create offer const offer = await call.peerConnection.createOffer(); await call.peerConnection.setLocalDescription(offer); @@ -459,39 +592,88 @@ export async function onRemoteAccepted(userId: number): Promise { async function createE2EETransform(sessionKey: NonNullable, peerConnection: RTCPeerConnection, sessionId?: string): Promise { try { - if (sessionKey && window.RTCRtpScriptTransform) { - const key = await importAesGcmKey(sessionKey); - const receiver = peerConnection.getReceivers().find(r => r.track && r.track.kind === 'audio'); - if (receiver) { + // @ts-ignore + if (!sessionKey || !window.RTCRtpScriptTransform) { + console.log("Skipping E2EE transform in createE2EETransform - not supported or no session key"); + return; + } + + console.log("Creating E2EE transform with sessionId:", sessionId); + const key = await importAesGcmKey(sessionKey); + + // Apply to audio receivers only (video E2EE requires synchronized counters) + const receivers = peerConnection.getReceivers(); + for (const receiver of receivers) { + if (receiver.track && receiver.track.kind === "audio") { + console.log(`Applying decrypt transform to ${receiver.track.kind} in createE2EETransform`); + // @ts-ignore receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt', sessionId }); } - const sender = peerConnection.getSenders().find(s => s.track && s.track.kind === 'audio'); - if (sender) { + } + + // Apply to audio senders only (video E2EE requires synchronized counters) + const senders = peerConnection.getSenders(); + for (const sender of senders) { + if (sender.track && sender.track.kind === "audio") { + console.log(`Applying encrypt transform to ${sender.track.kind} in createE2EETransform`); + // @ts-ignore sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt', sessionId }); } } } catch (error) { console.error("Failed to create E2EE transform:", error); - throw error; + // Don't throw - let the call continue without E2EE } } export async function handleCallOffer(userId: number, offer: RTCSessionDescriptionInit): Promise { - const call = calls.get(userId); + let call = calls.get(userId); + + console.log("handleCallOffer called for user", userId, "offer type:", offer.type); + + // Handle race condition - offer might arrive before peer connection is created if (!call) { - throw new Error("No call found for offer"); + console.log("No call found for offer, creating peer connection (race condition handling)"); + await createPeerConnection(userId); + call = calls.get(userId); + if (!call) { + throw new Error("Failed to create call for offer"); + } } try { + // Ensure we have local media before answering + if (!call.localStream) { + console.log("Getting local media for answer"); + try { + const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false }); + call.localStream = localStream; + localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream)); + } catch (mediaError) { + console.error("Failed to get local media:", mediaError); + // Continue anyway - we can still receive media + } + } + + console.log("Setting remote description with", offer.sdp?.split('\n').filter(l => l.includes('m=')).join(', ')); + // Set remote description await call.peerConnection.setRemoteDescription(offer); + console.log("Creating answer..."); // Create answer const answer = await call.peerConnection.createAnswer(); await call.peerConnection.setLocalDescription(answer); - // Attach transforms on callee side if session key set and insertable streams supported - await createE2EETransform(call.sessionKey!, call.peerConnection, call.sessionId); + console.log("Answer created with", answer.sdp?.split('\n').filter(l => l.includes('m=')).join(', ')); + + // Attach transforms on callee side if session key is available + // If not available yet, setSessionKey will apply them when it arrives + if (call.sessionKey) { + await createE2EETransform(call.sessionKey, call.peerConnection, call.sessionId); + } else { + console.log("Session key not yet available in handleCallOffer - will apply transforms when key arrives"); + } // Send answer to remote peer await sendSignalingMessage({ @@ -500,6 +682,8 @@ export async function handleCallOffer(userId: number, offer: RTCSessionDescripti toUserId: userId, data: answer }); + + console.log("Answer sent successfully"); } catch (error) { console.error("Failed to handle offer:", error); throw error; @@ -514,8 +698,17 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip try { await call.peerConnection.setRemoteDescription(answer); - // After signaling completes, attach transforms on initiator side if supported - await createE2EETransform(call.sessionKey!, call.peerConnection, call.sessionId); + + // Reset negotiating flag + call.isNegotiating = false; + + // Attach transforms on initiator side if session key is available + // If not available yet, setSessionKey will apply them when it arrives + if (call.sessionKey) { + await createE2EETransform(call.sessionKey, call.peerConnection, call.sessionId); + } else { + console.log("Session key not yet available in handleCallAnswer - will apply transforms when key arrives"); + } } catch (error) { console.error("Failed to handle answer:", error); throw error; @@ -523,9 +716,10 @@ export async function handleCallAnswer(userId: number, answer: RTCSessionDescrip } export async function handleIceCandidate(userId: number, candidate: RTCIceCandidateInit): Promise { - const call = calls.get(userId); + let call = calls.get(userId); if (!call) { - console.warn("No call found for ICE candidate from user", userId); + console.warn("No call found for ICE candidate from user", userId, "- might arrive before connection setup"); + // Don't create peer connection here - ICE candidates will be gathered again after connection is established return; } @@ -616,6 +810,188 @@ export function getCall(userId: number): WebRTCCall | undefined { return calls.get(userId); } +export async function toggleVideo(userId: number): Promise { + const call = calls.get(userId); + if (!call) { + return false; + } + + if (!call.isLocalVideoEnabled) { + // Enable video + try { + const videoStream = await navigator.mediaDevices.getUserMedia({ + video: true, + audio: false + }); + + call.localVideoStream = videoStream; + call.isLocalVideoEnabled = true; + + // Add video track to peer connection + const videoTrack = videoStream.getVideoTracks()[0]; + call.peerConnection.addTrack(videoTrack, videoStream); + + console.log("Video track added successfully"); + console.log("Current senders:", call.peerConnection.getSenders().map(s => s.track?.kind)); + console.log("Current transceivers:", call.peerConnection.getTransceivers().map(t => ({ + sender: t.sender.track?.kind, + receiver: t.receiver.track?.kind, + direction: t.direction + }))); + + // Note: E2EE for video is temporarily disabled for testing + // Will re-enable with proper counter synchronization + console.log("Video sent without E2EE (will implement synchronized encryption)"); + + // Notify local video stream handler + if (onLocalVideoStream) { + console.log("Calling onLocalVideoStream handler with stream:", videoStream); + onLocalVideoStream(userId, videoStream); + } else { + console.warn("onLocalVideoStream handler is not set!"); + } + + // Send signaling message to notify remote peer + console.log("Sending call_video_toggle with enabled: true"); + await sendSignalingMessage({ + type: "call_video_toggle", + fromUserId: 0, + toUserId: userId, + data: { enabled: true } + }); + + console.log("Video enabled successfully"); + return true; + } catch (error) { + console.error("Failed to enable video:", error); + return false; + } + } else { + // Disable video + if (call.localVideoStream) { + call.localVideoStream.getTracks().forEach(track => { + track.stop(); + // Remove track from peer connection + const senders = call.peerConnection.getSenders(); + const videoSender = senders.find(s => s.track === track); + if (videoSender) { + call.peerConnection.removeTrack(videoSender); + } + }); + call.localVideoStream = null; + } + + call.isLocalVideoEnabled = false; + + // Notify local video stream handler + if (onLocalVideoStream) { + onLocalVideoStream(userId, null); + } + + // Send signaling message to notify remote peer + await sendSignalingMessage({ + type: "call_video_toggle", + fromUserId: 0, + toUserId: userId, + data: { enabled: false } + }); + + return false; + } +} + +export async function toggleScreenShare(userId: number): Promise { + const call = calls.get(userId); + if (!call) { + return false; + } + + if (!call.isScreenSharing) { + // Enable screen sharing + try { + // @ts-ignore - getDisplayMedia might not be in all TypeScript versions + const screenStream = await navigator.mediaDevices.getDisplayMedia({ + video: true, + audio: false + }); + + // Set a special ID to identify screen share streams + Object.defineProperty(screenStream, "id", { + value: `screen-${crypto.randomUUID()}`, + writable: false + }); + + call.screenShareStream = screenStream; + call.isScreenSharing = true; + + // Add screen share track to peer connection + const videoTrack = screenStream.getVideoTracks()[0]; + + // Handle when user stops sharing via browser UI + videoTrack.addEventListener("ended", () => { + toggleScreenShare(userId); + }); + + call.peerConnection.addTrack(videoTrack, screenStream); + + console.log("Screen share track added successfully"); + + // Note: E2EE for screen share is temporarily disabled for testing + // Will re-enable with proper counter synchronization + console.log("Screen share sent without E2EE (will implement synchronized encryption)"); + + // Notify local screen share handler + if (onLocalScreenShare) { + onLocalScreenShare(userId, screenStream); + } + + // Send signaling message to notify remote peer + await sendSignalingMessage({ + type: "call_screen_share_toggle", + fromUserId: 0, + toUserId: userId, + data: { enabled: true } + }); + + return true; + } catch (error) { + console.error("Failed to enable screen sharing:", error); + return false; + } + } else { + // Disable screen sharing + if (call.screenShareStream) { + call.screenShareStream.getTracks().forEach(track => { + track.stop(); + // Remove track from peer connection + const senders = call.peerConnection.getSenders(); + const screenSender = senders.find(s => s.track === track); + if (screenSender) { + call.peerConnection.removeTrack(screenSender); + } + }); + call.screenShareStream = null; + } + + call.isScreenSharing = false; + + // Notify local screen share handler + if (onLocalScreenShare) { + onLocalScreenShare(userId, null); + } + + // Send signaling message to notify remote peer + await sendSignalingMessage({ + type: "call_screen_share_toggle", + fromUserId: 0, + toUserId: userId, + data: { enabled: false } + }); + + return false; + } +} + export function cleanupCall(userId: number): void { const call = calls.get(userId); if (call) { @@ -634,6 +1010,16 @@ export function cleanupCall(userId: number): void { call.localStream.getTracks().forEach(track => track.stop()); } + // Stop local video stream + if (call.localVideoStream) { + call.localVideoStream.getTracks().forEach(track => track.stop()); + } + + // Stop screen share stream + if (call.screenShareStream) { + call.screenShareStream.getTracks().forEach(track => track.stop()); + } + calls.delete(userId); } } diff --git a/frontend/src/core/types.d.ts b/frontend/src/core/types.d.ts index 7e34bfb..d57fc3b 100644 --- a/frontend/src/core/types.d.ts +++ b/frontend/src/core/types.d.ts @@ -442,7 +442,7 @@ export interface CallInvite extends CallSignalingData { timestamp: string; } -export type CallSignalingDataType = "call_offer" | "call_answer" | "call_ice_candidate" | "call_end" | "call_invite" | "call_accept" | "call_reject" | "call_session_key" | "call_signaling"; +export type CallSignalingDataType = "call_offer" | "call_answer" | "call_ice_candidate" | "call_end" | "call_invite" | "call_accept" | "call_reject" | "call_session_key" | "call_signaling" | "call_video_toggle" | "call_screen_share_toggle"; export interface CallSignalingMessage extends WebSocketMessage { type: CallSignalingDataType; @@ -450,4 +450,18 @@ export interface CallSignalingMessage extends WebSocketMessage { toUserId: number; sessionKeyHash?: string; data: any; +} + +export interface CallVideoToggleMessage extends CallSignalingMessage { + type: "call_video_toggle"; + data: { + enabled: boolean; + }; +} + +export interface CallScreenShareToggleMessage extends CallSignalingMessage { + type: "call_screen_share_toggle"; + data: { + enabled: boolean; + }; } \ No newline at end of file diff --git a/frontend/src/pages/chat/css/_callWindow.scss b/frontend/src/pages/chat/css/_callWindow.scss index 465faaa..46f7176 100644 --- a/frontend/src/pages/chat/css/_callWindow.scss +++ b/frontend/src/pages/chat/css/_callWindow.scss @@ -5,7 +5,9 @@ position: fixed; z-index: 1000; - width: 300px; + min-width: 800px; + width: fit-content; + max-width: 1200px; background-color: rgba($color-dark-surface, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); @@ -16,6 +18,8 @@ transition: opacity 0.3s $transition, transform 0.3s $transition; transform-origin: center; user-select: none; + display: flex; + flex-direction: column; &.visible { opacity: 1; @@ -100,12 +104,13 @@ border-bottom: 1px solid $color-dark-outline-variant; position: relative; z-index: 1; + display: flex; + align-items: center; + justify-content: space-between; .window-controls { - position: absolute; - top: 8px; - right: 8px; - z-index: 2; + display: flex; + gap: 8px; .minimize-btn { color: $color-dark-on-surface-variant; @@ -117,69 +122,143 @@ } } - .user-info-centered { + .call-header-info { + flex: 1; display: flex; flex-direction: column; align-items: center; - gap: 12px; + gap: 4px; text-align: center; - .avatar { - width: 64px; - height: 64px; - border-radius: 50%; + .username { + margin: 0; + font-size: 18px; + font-weight: 600; + color: $color-dark-on-surface; + } + + .status { + margin: 0; + font-size: 14px; + color: $color-dark-on-surface-variant; + font-weight: 500; + } + + .encryption-emojis { + display: flex; + justify-content: center; + gap: 8px; + margin-top: 8px; + + .encryption-emoji { + font-size: 20px; + display: inline-block; + animation: emoji-pulse 2s ease-in-out infinite; + + &:nth-child(1) { animation-delay: 0s; } + &:nth-child(2) { animation-delay: 0.2s; } + &:nth-child(3) { animation-delay: 0.4s; } + &:nth-child(4) { animation-delay: 0.6s; } + } + } + } +} + +.call-content { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; + position: relative; + z-index: 1; + flex: 1; + + .video-tiles-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + min-height: 240px; + } + + .video-tile { + position: relative; + background: rgba($color-dark-surface-variant, 0.4); + border-radius: 12px; + overflow: hidden; + aspect-ratio: 4 / 3; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba($color-dark-outline, 0.3); + + .video-element { + width: 100%; + height: 100%; object-fit: cover; - box-shadow: 0 0 20px rgba(33, 150, 243, 0.3); - transition: box-shadow 0.3s ease; - position: relative; - z-index: 1; + } - // Colored shadow based on call state - .gradient-calling & { - box-shadow: 0 0 20px rgba(255, 193, 7, 0.4); + .video-placeholder { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 12px; + width: 100%; + height: 100%; + background: rgba($color-dark-surface-variant, 0.6); + + .placeholder-avatar { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } - .gradient-connecting & { - box-shadow: 0 0 20px rgba(33, 150, 243, 0.4); - } - - .gradient-active & { - box-shadow: 0 0 20px rgba(76, 175, 80, 0.4); + .placeholder-username { + font-size: 16px; + font-weight: 500; + color: $color-dark-on-surface; } } - .user-details { - .username { - margin: 0; - font-size: 18px; - font-weight: 600; - color: $color-dark-on-surface; - } + .tile-label { + position: absolute; + bottom: 8px; + left: 8px; + padding: 4px 8px; + background: rgba(0, 0, 0, 0.7); + color: white; + font-size: 12px; + font-weight: 500; + border-radius: 4px; + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + } - .status { - margin: 4px 0 0 0; - font-size: 14px; - color: $color-dark-on-surface-variant; - font-weight: 500; + &.local-video { + .video-element { + transform: scaleX(-1); // Mirror local video } + } + } - .encryption-emojis { - display: flex; - justify-content: center; - gap: 8px; - margin-top: 8px; + .screen-share-tile { + aspect-ratio: 16 / 9; + min-height: 400px; + grid-column: 1 / -1; + border: 2px solid rgba($color-dark-primary, 0.5); - .encryption-emoji { - font-size: 20px; - display: inline-block; - animation: emoji-pulse 2s ease-in-out infinite; - - &:nth-child(1) { animation-delay: 0s; } - &:nth-child(2) { animation-delay: 0.2s; } - &:nth-child(3) { animation-delay: 0.4s; } - &:nth-child(4) { animation-delay: 0.6s; } - } - } + .video-element { + object-fit: contain; + background: rgba(0, 0, 0, 0.8); + } + + .tile-label { + font-size: 14px; + padding: 6px 12px; + background: rgba($color-dark-primary, 0.8); + color: $color-dark-on-primary; } } } @@ -189,6 +268,29 @@ display: flex; justify-content: center; gap: 12px; + border-top: 1px solid $color-dark-outline-variant; + position: relative; + z-index: 1; + + mdui-button-icon { + &[icon="call_end"] { + background: rgba(244, 67, 54, 0.2); + color: rgb(244, 67, 54); + + &:hover { + background: rgba(244, 67, 54, 0.3); + } + } + + &[icon="videocam"], + &[icon="videocam_off"], + &[icon="screen_share"], + &[icon="stop_screen_share"] { + &:hover { + background: rgba($color-dark-primary, 0.1); + } + } + } } // Minimized call bar diff --git a/frontend/src/pages/chat/hooks/useAudioCall.ts b/frontend/src/pages/chat/hooks/useAudioCall.ts index 8a83532..f1c0052 100644 --- a/frontend/src/pages/chat/hooks/useAudioCall.ts +++ b/frontend/src/pages/chat/hooks/useAudioCall.ts @@ -2,7 +2,7 @@ import { useAppState } from "@/pages/chat/state"; import * as WebRTC from "@/core/calls/webrtc"; import { CallSignalingHandler } from "@/core/calls/signaling"; import { setCallSignalingHandler } from "@/core/websocket"; -import { generateCallSessionKey, generateCallEmojis, createCallSessionKeyFromHash } from "@/core/calls/encryption"; +import { generateCallSessionKey, generateCallEmojis } from "@/core/calls/encryption"; import { createRef, useEffect } from "react"; // Global audio ref shared across all instances @@ -25,7 +25,15 @@ export default function useAudioCall() { state.receiveCall(userId, username); }, endCall, - setCallSessionKeyHash + setCallSessionKeyHash, + setRemoteVideoEnabled: (enabled: boolean) => { + const state = useAppState.getState(); + state.setRemoteVideoEnabled(enabled); + }, + setRemoteScreenSharing: (enabled: boolean) => { + const state = useAppState.getState(); + state.setRemoteScreenSharing(enabled); + } })); setCallSignalingHandler(signalingHandler); @@ -207,12 +215,12 @@ export default function useAudioCall() { async function handleCallSessionKey(sessionKeyHash: string) { try { - // Create session key from the hash provided by the caller - const sessionKey = await createCallSessionKeyFromHash(sessionKeyHash); - const emojis = generateCallEmojis(sessionKey.hash); - setCallEncryption(sessionKey.hash, emojis); + // Just generate and display the emojis from the hash + // The actual session key will arrive via the wrapped key mechanism + const emojis = generateCallEmojis(sessionKeyHash); + setCallEncryption(sessionKeyHash, emojis); } catch (error) { - console.error("Failed to create call session key from hash:", error); + console.error("Failed to generate call emojis from hash:", error); } }; diff --git a/frontend/src/pages/chat/hooks/useCall.ts b/frontend/src/pages/chat/hooks/useCall.ts new file mode 100644 index 0000000..f725f80 --- /dev/null +++ b/frontend/src/pages/chat/hooks/useCall.ts @@ -0,0 +1,389 @@ +import { useAppState } from "@/pages/chat/state"; +import * as WebRTC from "@/core/calls/webrtc"; +import { CallSignalingHandler } from "@/core/calls/signaling"; +import { setCallSignalingHandler } from "@/core/websocket"; +import { generateCallSessionKey, generateCallEmojis } from "@/core/calls/encryption"; +import { createRef, useEffect } from "react"; + +// Global refs shared across all instances +let globalRemoteAudioRef = createRef(); +let globalLocalVideoRef = createRef(); +let globalRemoteVideoRef = createRef(); +let globalLocalScreenShareRef = createRef(); +let globalRemoteScreenShareRef = createRef(); + +export default function useCall() { + const { + chat, + startCall, + endCall, + setCallStatus, + toggleMute, + toggleVideo, + toggleScreenShare, + setCallEncryption, + setCallSessionKeyHash, + setRemoteVideoEnabled, + setRemoteScreenSharing, + user + } = useAppState(); + + const remoteAudioRef = globalRemoteAudioRef; + const localVideoRef = globalLocalVideoRef; + const remoteVideoRef = globalRemoteVideoRef; + const localScreenShareRef = globalLocalScreenShareRef; + const remoteScreenShareRef = globalRemoteScreenShareRef; + + useEffect(() => { + if (user.authToken) { + WebRTC.setAuthToken(user.authToken); + } + + // Initialize call signaling handler + const signalingHandler = new CallSignalingHandler(() => ({ + receiveCall: (userId: number, username: string) => { + // Use the receiveCall function from state + const state = useAppState.getState(); + state.receiveCall(userId, username); + }, + endCall, + setCallSessionKeyHash, + setRemoteVideoEnabled, + setRemoteScreenSharing + })); + setCallSignalingHandler(signalingHandler); + + // Set up call state change handler + WebRTC.setCallStateChangeHandler((userId: number, state: string) => { + const call = chat.call; + if (call.remoteUserId === userId) { + switch (state) { + case "connecting": + setCallStatus("connecting"); + break; + case "connected": + setCallStatus("active"); + break; + case "disconnected": + case "failed": + case "closed": + endCall(); + break; + } + } + }); + + // Set up remote audio stream handler + WebRTC.setRemoteStreamHandler((_userId: number, stream: MediaStream) => { + if (!remoteAudioRef.current) { + return; + } + const el = remoteAudioRef.current; + try { + el.srcObject = stream; + el.muted = false; + el.volume = 1.0; + el.autoplay = true; + + // Handle audio events + el.addEventListener("error", () => { + console.warn("[AUDIO] element error", (el.error?.message) || el.error); + }); + + el.play().catch(() => { + // Try to play after user interaction if autoplay is blocked + const playAfterInteraction = () => { + el.play().catch(() => {}); + document.removeEventListener("click", playAfterInteraction); + document.removeEventListener("touchstart", playAfterInteraction); + }; + document.addEventListener("click", playAfterInteraction); + document.addEventListener("touchstart", playAfterInteraction); + }); + } catch (e) { + console.warn("failed to attach remote stream:", e); + } + }); + + // Set up local video stream handler + WebRTC.setLocalVideoStreamHandler((_userId: number, stream: MediaStream | null) => { + console.log("Local video stream handler called, stream:", stream, "ref exists:", !!localVideoRef.current); + if (!localVideoRef.current) { + console.warn("Local video ref not available yet"); + return; + } + const el = localVideoRef.current; + try { + el.srcObject = stream; + el.muted = true; // Always mute local video to avoid feedback + el.autoplay = true; + if (stream) { + console.log("Playing local video stream"); + el.play().catch((err) => { + console.error("Failed to play local video:", err); + }); + } + } catch (e) { + console.warn("failed to attach local video stream:", e); + } + }); + + // Set up remote video stream handler + WebRTC.setRemoteVideoStreamHandler((_userId: number, stream: MediaStream | null) => { + console.log("Remote video stream handler called, stream:", stream, "ref exists:", !!remoteVideoRef.current); + if (!remoteVideoRef.current) { + console.warn("Remote video ref not available yet"); + return; + } + const el = remoteVideoRef.current; + try { + el.srcObject = stream; + el.muted = false; + el.autoplay = true; + if (stream) { + console.log("Playing remote video stream"); + el.play().catch((err) => { + console.error("Failed to play remote video:", err); + const playAfterInteraction = () => { + el.play().catch(() => {}); + document.removeEventListener("click", playAfterInteraction); + document.removeEventListener("touchstart", playAfterInteraction); + }; + document.addEventListener("click", playAfterInteraction); + document.addEventListener("touchstart", playAfterInteraction); + }); + } + } catch (e) { + console.warn("failed to attach remote video stream:", e); + } + }); + + // Set up local screen share handler + WebRTC.setLocalScreenShareHandler((_userId: number, stream: MediaStream | null) => { + console.log("Local screen share handler called, stream:", stream, "ref exists:", !!localScreenShareRef.current); + if (!localScreenShareRef.current) { + console.warn("Local screen share ref not available yet"); + return; + } + const el = localScreenShareRef.current; + try { + el.srcObject = stream; + el.muted = true; + el.autoplay = true; + if (stream) { + console.log("Playing local screen share"); + el.play().catch((err) => { + console.error("Failed to play local screen share:", err); + }); + } + } catch (e) { + console.warn("failed to attach local screen share stream:", e); + } + }); + + // Set up remote screen share handler + WebRTC.setRemoteScreenShareHandler((_userId: number, stream: MediaStream | null) => { + console.log("Remote screen share handler called, stream:", stream, "ref exists:", !!remoteScreenShareRef.current); + if (!remoteScreenShareRef.current) { + console.warn("Remote screen share ref not available yet"); + return; + } + const el = remoteScreenShareRef.current; + try { + el.srcObject = stream; + el.muted = false; + el.autoplay = true; + if (stream) { + console.log("Playing remote screen share"); + el.play().catch((err) => { + console.error("Failed to play remote screen share:", err); + const playAfterInteraction = () => { + el.play().catch(() => {}); + document.removeEventListener("click", playAfterInteraction); + document.removeEventListener("touchstart", playAfterInteraction); + }; + document.addEventListener("click", playAfterInteraction); + document.addEventListener("touchstart", playAfterInteraction); + }); + } + } catch (e) { + console.warn("failed to attach remote screen share stream:", e); + } + }); + + return () => { + WebRTC.cleanup(); + setCallSignalingHandler(null); + }; + }, [user.authToken, chat.call.remoteUserId, setCallStatus, endCall, startCall, setRemoteVideoEnabled, setRemoteScreenSharing]); + + // Watch for session key hash changes and generate emojis + useEffect(() => { + if (chat.call.sessionKeyHash && chat.call.encryptionEmojis.length === 0) { + const emojis = generateCallEmojis(chat.call.sessionKeyHash); + setCallEncryption(chat.call.sessionKeyHash, emojis); + } + }, [chat.call.sessionKeyHash, chat.call.encryptionEmojis.length, setCallEncryption]); + + async function requestAudioPermissions(): Promise { + try { + const stream = await navigator.mediaDevices.getUserMedia({ + audio: true, + video: false + }); + + // Stop the stream immediately as we just needed permission + stream.getTracks().forEach(track => track.stop()); + return true; + } catch (error) { + console.error("Failed to get audio permissions:", error); + return false; + } + } + + async function initiateCall(userId: number, username: string) { + const hasPermission = await requestAudioPermissions(); + + if (!hasPermission) { + console.log("Audio permission denied"); + return; + } + + let sessionKey; + try { + // Generate call session key and emojis + sessionKey = await generateCallSessionKey(); + const emojis = generateCallEmojis(sessionKey.hash); + + // Start the call in state + startCall(userId, username); + setCallStatus("calling"); + setCallEncryption(sessionKey.hash, emojis); + } catch (error) { + console.error("Failed to generate call encryption:", error); + endCall(); + return; + } + + // Initiate WebRTC call + const success = await WebRTC.initiateCall(userId, username); + + if (success && sessionKey) { + // Send session key hash to the receiver for visual verification + await WebRTC.sendCallSessionKey(userId, sessionKey.hash); + // Also wrap and send the actual session key for E2EE media + await WebRTC.sendWrappedCallSessionKey(userId, sessionKey.key, sessionKey.hash); + } else { + endCall(); + } + } + + async function acceptCall() { + if (!chat.call.remoteUserId) { + return; + } + + setCallStatus("connecting"); + const success = await WebRTC.acceptCall(chat.call.remoteUserId); + + if (!success) { + endCall(); + } + } + + async function rejectCall() { + if (!chat.call.remoteUserId) { + return; + } + + await WebRTC.rejectCall(chat.call.remoteUserId); + endCall(); + } + + async function handleEndCall() { + if (chat.call.remoteUserId) { + await WebRTC.endCall(chat.call.remoteUserId); + } + endCall(); + } + + function handleToggleMute() { + if (chat.call.remoteUserId) { + const isMuted = WebRTC.toggleMute(chat.call.remoteUserId); + // Update mute state in store + if (isMuted !== chat.call.isMuted) { + toggleMute(); + } + } + } + + async function handleToggleVideo() { + if (chat.call.remoteUserId) { + const isEnabled = await WebRTC.toggleVideo(chat.call.remoteUserId); + // Update video state in store + if (isEnabled !== chat.call.isVideoEnabled) { + toggleVideo(); + } + } + } + + async function handleToggleScreenShare() { + if (chat.call.remoteUserId) { + const isEnabled = await WebRTC.toggleScreenShare(chat.call.remoteUserId); + // Update screen share state in store + if (isEnabled !== chat.call.isSharingScreen) { + toggleScreenShare(); + } + } + } + + async function handleIncomingCall(userId: number, username: string) { + // Don't generate session key here - wait for it from the caller + await WebRTC.handleIncomingCall(userId, username); + } + + async function handleCallOffer(userId: number, offer: RTCSessionDescriptionInit) { + await WebRTC.handleCallOffer(userId, offer); + } + + async function handleCallAnswer(userId: number, answer: RTCSessionDescriptionInit) { + await WebRTC.handleCallAnswer(userId, answer); + } + + async function handleIceCandidate(userId: number, candidate: RTCIceCandidateInit) { + await WebRTC.handleIceCandidate(userId, candidate); + } + + async function handleCallSessionKey(sessionKeyHash: string) { + try { + // Just generate and display the emojis from the hash + // The actual session key will arrive via the wrapped key mechanism + const emojis = generateCallEmojis(sessionKeyHash); + setCallEncryption(sessionKeyHash, emojis); + } catch (error) { + console.error("Failed to generate call emojis from hash:", error); + } + } + + return { + call: chat.call, + initiateCall, + acceptCall, + rejectCall, + endCall: handleEndCall, + toggleMute: handleToggleMute, + toggleVideo: handleToggleVideo, + toggleScreenShare: handleToggleScreenShare, + handleIncomingCall, + handleCallOffer, + handleCallAnswer, + handleIceCandidate, + handleCallSessionKey, + remoteAudioRef, + localVideoRef, + remoteVideoRef, + localScreenShareRef, + remoteScreenShareRef + }; +} + diff --git a/frontend/src/pages/chat/state.ts b/frontend/src/pages/chat/state.ts index 1c947ac..76150e8 100644 --- a/frontend/src/pages/chat/state.ts +++ b/frontend/src/pages/chat/state.ts @@ -31,6 +31,10 @@ interface CallState { isMinimized: boolean; sessionKeyHash: string | null; encryptionEmojis: string[]; + isVideoEnabled: boolean; + isRemoteVideoEnabled: boolean; + isSharingScreen: boolean; + isRemoteScreenSharing: boolean; } interface ChatState { @@ -79,6 +83,10 @@ interface AppState { receiveCall: (userId: number, username: string) => void; setCallEncryption: (sessionKeyHash: string, encryptionEmojis: string[]) => void; setCallSessionKeyHash: (sessionKeyHash: string) => void; + toggleVideo: () => void; + toggleScreenShare: () => void; + setRemoteVideoEnabled: (enabled: boolean) => void; + setRemoteScreenSharing: (enabled: boolean) => void; // User state user: UserState; @@ -116,7 +124,11 @@ export const useAppState = create((set, get) => ({ isInitiator: false, isMinimized: false, sessionKeyHash: null, - encryptionEmojis: [] + encryptionEmojis: [], + isVideoEnabled: false, + isRemoteVideoEnabled: false, + isSharingScreen: false, + isRemoteScreenSharing: false } }, addMessage: (message: Message) => set((state) => { @@ -412,7 +424,11 @@ export const useAppState = create((set, get) => ({ isInitiator: true, isMinimized: false, sessionKeyHash: null, - encryptionEmojis: [] + encryptionEmojis: [], + isVideoEnabled: false, + isRemoteVideoEnabled: false, + isSharingScreen: false, + isRemoteScreenSharing: false } } })), @@ -430,7 +446,11 @@ export const useAppState = create((set, get) => ({ isInitiator: false, isMinimized: false, sessionKeyHash: null, - encryptionEmojis: [] + encryptionEmojis: [], + isVideoEnabled: false, + isRemoteVideoEnabled: false, + isSharingScreen: false, + isRemoteScreenSharing: false } } })), @@ -479,7 +499,11 @@ export const useAppState = create((set, get) => ({ isInitiator: false, isMinimized: false, sessionKeyHash: null, - encryptionEmojis: [] + encryptionEmojis: [], + isVideoEnabled: false, + isRemoteVideoEnabled: false, + isSharingScreen: false, + isRemoteScreenSharing: false } } })), @@ -503,5 +527,45 @@ export const useAppState = create((set, get) => ({ sessionKeyHash } } + })), + + toggleVideo: () => set((state) => ({ + chat: { + ...state.chat, + call: { + ...state.chat.call, + isVideoEnabled: !state.chat.call.isVideoEnabled + } + } + })), + + toggleScreenShare: () => set((state) => ({ + chat: { + ...state.chat, + call: { + ...state.chat.call, + isSharingScreen: !state.chat.call.isSharingScreen + } + } + })), + + setRemoteVideoEnabled: (enabled: boolean) => set((state) => ({ + chat: { + ...state.chat, + call: { + ...state.chat.call, + isRemoteVideoEnabled: enabled + } + } + })), + + setRemoteScreenSharing: (enabled: boolean) => set((state) => ({ + chat: { + ...state.chat, + call: { + ...state.chat.call, + isRemoteScreenSharing: enabled + } + } })) })); \ No newline at end of file diff --git a/frontend/src/pages/chat/ui/right/calls/MinimizedCallBar.tsx b/frontend/src/pages/chat/ui/right/calls/MinimizedCallBar.tsx index e687372..5adf915 100644 --- a/frontend/src/pages/chat/ui/right/calls/MinimizedCallBar.tsx +++ b/frontend/src/pages/chat/ui/right/calls/MinimizedCallBar.tsx @@ -1,11 +1,11 @@ import { useAppState } from "@/pages/chat/state"; -import useAudioCall from "@/pages/chat/hooks/useAudioCall"; +import useCall from "@/pages/chat/hooks/useCall"; import defaultAvatar from "@/images/default-avatar.png"; export function MinimizedCallBar() { const { chat, toggleCallMinimize } = useAppState(); const { call } = chat; - const { endCall, toggleMute } = useAudioCall(); + const { endCall, toggleMute } = useCall(); function getGradientClass() { switch (call.status) {