Start the implementation

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"}})
 

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
+    // Use a synchronized counter for IV generation
-    const ivBase = crypto.getRandomValues(new Uint8Array(8)); // 8 random bytes
+    // 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<EncodedFrame>) {
         try {
-            const currentTime = Date.now();
+            // Create a unique IV for each frame using the counter
-            
+            // Format: 12 bytes total = 8 bytes of zeros + 4 bytes counter
-            // 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
             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);
+                // Decrypt: just decrypt the raw frame data
-                
+                result = await crypto.subtle.decrypt(params, key, data);
-                // 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;
-                }
             }
             
+            // Update frame data with encrypted/decrypted result
             encodedFrame.data = new Uint8Array(result);
             controller.enqueue(encodedFrame);
+            
         } catch (e) {
-            console.error(`E2EE ${mode} failed:`, e);
+            // Log error but don't stop the stream - allows graceful degradation
-            controller.error(new Error(`E2EE ${mode} failed`));
+            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);
         }
     }
 

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
+        // First, create the peer connection in WebRTC service
-        state.receiveCall(fromUserId, fromUsername);
-        
-        // Handle incoming call 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);
+        }
+    }
 }

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<number, WebRTCCall> = 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<RTCPeerConnection>
         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<RTCPeerConnection>
     });
 
     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) {
+        if (call && remoteStream) {
-            call.remoteStream = remoteStream;
+            const track = event.track;
-            if (onRemoteStream) {
+            
-                onRemoteStream(userId, remoteStream);
+            // 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<RTCPeerConnection>
                 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 === "closed") {
-                peerConnection.connectionState === "disconnected") {
                 // 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<void> {
     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) {
+        // Apply to audio receivers only (video E2EE requires synchronized counters)
-            // @ts-ignore
+        const receivers = call.peerConnection.getReceivers();
-            receiver.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'decrypt' });
+        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) {
+        // Apply to audio senders only (video E2EE requires synchronized counters)
-            // @ts-ignore
+        const senders = call.peerConnection.getSenders();
-            sender.transform = new RTCRtpScriptTransform(new E2EEWorker(), { key, mode: 'encrypt' });
+        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<void> {
@@ -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)
+        // Unwrap the session key from the encrypted payload
-        await unwrapCallSessionKeyFromSender(senderPublicKey, {
+        const unwrappedSessionKey = await unwrapCallSessionKeyFromSender(senderPublicKey, {
             salt: wrappedPayload.salt,
             iv2: wrappedPayload.iv2,
             wrapped: wrappedPayload.wrapped
         });
         
-        // Then derive the actual session key from the shared secret
+        // Use the unwrapped session key directly (both sides should have the same key)
-        const call = calls.get(fromUserId);
+        await setSessionKey(fromUserId, unwrappedSessionKey);
-        const isInitiator = call?.isInitiator ?? false;
-        const derivedSessionKey = await createSharedSecretAndDeriveSessionKey(senderPublicKey, sessionKeyHash, isInitiator);
-        
-        await setSessionKey(fromUserId, derivedSessionKey.key);
     } catch (e) {
         console.error("Failed to unwrap session key:", e);
     }
@@ -369,10 +496,12 @@ export async function acceptCall(userId: number): Promise<boolean> {
             if (!call) return false;
         }
 
-        // Get user media and attach
+        // Get user media and attach (only if not already attached)
-        const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
+        if (!call.localStream) {
-        call.localStream = localStream;
+            const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
-        localStream.getTracks().forEach(track => call!.peerConnection.addTrack(track, localStream));
+            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<void> {
     }
 
     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<void> {
 
 async function createE2EETransform(sessionKey: NonNullable<WebRTCCall['sessionKey']>, peerConnection: RTCPeerConnection, sessionId?: string): Promise<void> {
     try {
-        if (sessionKey && window.RTCRtpScriptTransform) {
+        // @ts-ignore
-            const key = await importAesGcmKey(sessionKey);
+        if (!sessionKey || !window.RTCRtpScriptTransform) {
-            const receiver = peerConnection.getReceivers().find(r => r.track && r.track.kind === 'audio');
+            console.log("Skipping E2EE transform in createE2EETransform - not supported or no session key");
-            if (receiver) {
+            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<void> {
-    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
+        console.log("Answer created with", answer.sdp?.split('\n').filter(l => l.includes('m=')).join(', '));
-        await createE2EETransform(call.sessionKey!, call.peerConnection, call.sessionId);
+
+        // 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<void> {
-    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<boolean> {
+    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<boolean> {
+    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);
     }
 }

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;
@@ -451,3 +451,17 @@ export interface CallSignalingMessage extends WebSocketMessage {
     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;
+    };
+}

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;
+        display: flex;
-        top: 8px;
+        gap: 8px;
-        right: 8px;
-        z-index: 2;
 
         .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 {
+        .username {
-            width: 64px;
+            margin: 0;
-            height: 64px;
+            font-size: 18px;
-            border-radius: 50%;
+            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
+        .video-placeholder {
-            .gradient-calling & {
+            display: flex;
-                box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
+            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 & {
+            .placeholder-username {
-                box-shadow: 0 0 20px rgba(33, 150, 243, 0.4);
+                font-size: 16px;
-            }
+                font-weight: 500;
-
+                color: $color-dark-on-surface;
-            .gradient-active & {
-                box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
             }
         }
 
-        .user-details {
+        .tile-label {
-            .username {
+            position: absolute;
-                margin: 0;
+            bottom: 8px;
-                font-size: 18px;
+            left: 8px;
-                font-weight: 600;
+            padding: 4px 8px;
-                color: $color-dark-on-surface;
+            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);
+        }
+
+        &.local-video {
+            .video-element {
+                transform: scaleX(-1); // Mirror local video
             }
+        }
+    }
 
-            .status {
+    .screen-share-tile {
-                margin: 4px 0 0 0;
+        aspect-ratio: 16 / 9;
-                font-size: 14px;
+        min-height: 400px;
-                color: $color-dark-on-surface-variant;
+        grid-column: 1 / -1;
-                font-weight: 500;
+        border: 2px solid rgba($color-dark-primary, 0.5);
-            }
 
-            .encryption-emojis {
+        .video-element {
-                display: flex;
+            object-fit: contain;
-                justify-content: center;
+            background: rgba(0, 0, 0, 0.8);
-                gap: 8px;
+        }
-                margin-top: 8px;
 
-                .encryption-emoji {
+        .tile-label {
-                    font-size: 20px;
+            font-size: 14px;
-                    display: inline-block;
+            padding: 6px 12px;
-                    animation: emoji-pulse 2s ease-in-out infinite;
+            background: rgba($color-dark-primary, 0.8);
-                    
+            color: $color-dark-on-primary;
-                    &: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; }
-                }
-            }
         }
     }
 }
@@ -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

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
+            // Just generate and display the emojis from the hash
-            const sessionKey = await createCallSessionKeyFromHash(sessionKeyHash);
+            // The actual session key will arrive via the wrapped key mechanism
-            const emojis = generateCallEmojis(sessionKey.hash);
+            const emojis = generateCallEmojis(sessionKeyHash);
-            setCallEncryption(sessionKey.hash, emojis);
+            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);
         }
     };
 

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<HTMLAudioElement>();
+let globalLocalVideoRef = createRef<HTMLVideoElement>();
+let globalRemoteVideoRef = createRef<HTMLVideoElement>();
+let globalLocalScreenShareRef = createRef<HTMLVideoElement>();
+let globalRemoteScreenShareRef = createRef<HTMLVideoElement>();
+
+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<boolean> {
+        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
+    };
+}
+

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<AppState>((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<AppState>((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<AppState>((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<AppState>((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<AppState>((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
+            }
+        }
     }))
 }));

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) {