Add Network Quality Indicator component and integrate into Assistant and Mobile Call pages

- Introduce a new `NetworkQualityIndicator` component to visually represent network quality status during calls.
- Integrate the `NetworkQualityIndicator` into `AssistantPage` and `MobileCallPage`, enhancing user awareness of connection quality.
- Update `use-voice-preview` hook to manage network quality metrics, improving overall call experience and performance monitoring.

frontend/src/hooks/use-camera-preview.ts

@@ -9,6 +9,12 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 
+const CAMERA_VIDEO_CONSTRAINTS: MediaTrackConstraints = {
+  width: { ideal: 640, max: 640 },
+  height: { ideal: 360, max: 480 },
+  frameRate: { ideal: 12, max: 15 },
+};
+
 function cameraErrorMessage(error: unknown): string {
   if (error instanceof DOMException) {
     if (error.name === "NotAllowedError")
@@ -59,8 +65,12 @@ export function useCameraPreview() {
     setStarting(true);
     try {
       const id = deviceIdRef.current;
+      const videoConstraints: MediaTrackConstraints = {
+        ...CAMERA_VIDEO_CONSTRAINTS,
+        ...(id ? { deviceId: { exact: id } } : {}),
+      };
       const media = await navigator.mediaDevices.getUserMedia({
-        video: id ? { deviceId: { exact: id } } : true,
+        video: videoConstraints,
       });
       streamRef.current = media;
       setStream(media);