feat(video): Implement MP4 format support across frontend and backend

- Updated VideoModal to display web compatibility status for video formats.
- Enhanced VideoPlayer to dynamically fetch video MIME types and handle MP4 streaming.
- Introduced video file utilities for better handling of video formats and MIME types.
- Modified CameraConfig interface to include new video recording settings (format, codec, quality).
- Created comprehensive documentation for MP4 format integration and frontend implementation.
- Ensured backward compatibility with existing AVI files while promoting MP4 as the preferred format.
- Added validation and error handling for video format configurations.

src/features/video-streaming/components/VideoModal.tsx

@@ -15,6 +15,7 @@ import {
   getStatusBadgeClass,
   getResolutionString,
   formatDuration,
+  isWebCompatible,
 } from '../utils/videoUtils';
 
 interface VideoModalProps {
@@ -103,13 +104,21 @@ export const VideoModal: React.FC<VideoModalProps> = ({
             <div className="w-full lg:w-80 bg-gray-50 overflow-y-auto">
               <div className="p-4 space-y-4">
                 {/* Status and Format */}
-                <div className="flex items-center space-x-2">
+                <div className="flex items-center space-x-2 flex-wrap">
                   <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusBadgeClass(video.status)}`}>
                     {video.status}
                   </span>
-                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                  <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${isWebCompatible(video.format)
+                      ? 'bg-green-100 text-green-800'
+                      : 'bg-orange-100 text-orange-800'
+                    }`}>
                     {getFormatDisplayName(video.format)}
                   </span>
+                  {isWebCompatible(video.format) && (
+                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                      Web Compatible
+                    </span>
+                  )}
                 </div>
 
                 {/* Basic Info */}