feat: add Pagination component for video list navigation
- Implemented a reusable Pagination component with first/last, previous/next, and numbered page buttons. - Added PageInfo component to display current page and total items. - Integrated pagination into VideoList component, allowing users to navigate through video pages. - Updated useVideoList hook to manage current page and total pages state. - Modified videoApi service to support pagination with offset-based API. - Enhanced VideoCard styling for better UI consistency. - Updated Tailwind CSS configuration to include custom colors and shadows for branding. - Refactored video file settings to use 'h264' codec for better compatibility.
This commit is contained in:
Alireza Vaezi
@@ -1,20 +1,24 @@
|
||||
# 🎥 MP4 Video Format Update - Frontend Integration Guide
|
||||
|
||||
## Overview
|
||||
|
||||
The USDA Vision Camera System has been updated to record videos in **MP4 format** instead of AVI format for better streaming compatibility and smaller file sizes.
|
||||
|
||||
## 🔄 What Changed
|
||||
|
||||
### Video Format
|
||||
|
||||
- **Before**: AVI files with XVID codec (`.avi` extension)
|
||||
- **After**: MP4 files with MPEG-4 codec (`.mp4` extension)
|
||||
- **After**: MP4 files with H.264 codec (`.mp4` extension)
|
||||
|
||||
### File Extensions
|
||||
|
||||
- All new video recordings now use `.mp4` extension
|
||||
- Existing `.avi` files remain accessible and functional
|
||||
- File size reduction: ~40% smaller than equivalent AVI files
|
||||
|
||||
### API Response Updates
|
||||
|
||||
New fields added to camera configuration responses:
|
||||
|
||||
```json
|
||||
@@ -28,13 +32,17 @@ New fields added to camera configuration responses:
|
||||
## 🌐 Frontend Impact
|
||||
|
||||
### 1. Video Player Compatibility
|
||||
|
||||
**✅ Better Browser Support**
|
||||
|
||||
- MP4 format has native support in all modern browsers
|
||||
- No need for additional codecs or plugins
|
||||
- Better mobile device compatibility (iOS/Android)
|
||||
|
||||
### 2. File Handling Updates
|
||||
|
||||
**File Extension Handling**
|
||||
|
||||
```javascript
|
||||
// Update file extension checks
|
||||
const isVideoFile = (filename) => {
|
||||
@@ -50,7 +58,9 @@ const getVideoMimeType = (filename) => {
|
||||
```
|
||||
|
||||
### 3. Video Streaming
|
||||
|
||||
**Improved Streaming Performance**
|
||||
|
||||
```javascript
|
||||
// MP4 files can be streamed directly without conversion
|
||||
const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
@@ -63,7 +73,9 @@ const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
```
|
||||
|
||||
### 4. File Size Display
|
||||
|
||||
**Updated Size Expectations**
|
||||
|
||||
- MP4 files are ~40% smaller than equivalent AVI files
|
||||
- Update any file size warnings or storage calculations
|
||||
- Better compression means faster downloads and uploads
|
||||
@@ -71,9 +83,11 @@ const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
## 📡 API Changes
|
||||
|
||||
### Camera Configuration Endpoint
|
||||
|
||||
**GET** `/cameras/{camera_name}/config`
|
||||
|
||||
**New Response Fields:**
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "camera1",
|
||||
@@ -95,7 +109,9 @@ const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
```
|
||||
|
||||
### Video Listing Endpoints
|
||||
|
||||
**File Extension Updates**
|
||||
|
||||
- Video files in responses will now have `.mp4` extensions
|
||||
- Existing `.avi` files will still appear in listings
|
||||
- Filter by both extensions when needed
|
||||
@@ -103,42 +119,49 @@ const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
## 🔧 Configuration Options
|
||||
|
||||
### Video Format Settings
|
||||
|
||||
```json
|
||||
{
|
||||
"video_format": "mp4", // Options: "mp4", "avi"
|
||||
"video_codec": "mp4v", // Options: "mp4v", "XVID", "MJPG"
|
||||
"video_codec": "h264", // Options: "h264", "mp4v", "XVID", "MJPG"
|
||||
"video_quality": 95 // Range: 0-100 (higher = better quality)
|
||||
}
|
||||
```
|
||||
|
||||
### Recommended Settings
|
||||
- **Production**: `"mp4"` format, `"mp4v"` codec, `95` quality
|
||||
- **Storage Optimized**: `"mp4"` format, `"mp4v"` codec, `85` quality
|
||||
|
||||
- **Production**: `"mp4"` format, `"h264"` codec, `95` quality
|
||||
- **Storage Optimized**: `"mp4"` format, `"h264"` codec, `85` quality
|
||||
- **Legacy Mode**: `"avi"` format, `"XVID"` codec, `95` quality
|
||||
|
||||
## 🎯 Frontend Implementation Checklist
|
||||
|
||||
### ✅ Video Player Updates
|
||||
|
||||
- [ ] Verify HTML5 video player works with MP4 files
|
||||
- [ ] Update video MIME type handling
|
||||
- [ ] Test streaming performance with new format
|
||||
|
||||
### ✅ File Management
|
||||
|
||||
- [ ] Update file extension filters to include `.mp4`
|
||||
- [ ] Modify file type detection logic
|
||||
- [ ] Update download/upload handling for MP4 files
|
||||
|
||||
### ✅ UI/UX Updates
|
||||
|
||||
- [ ] Update file size expectations in UI
|
||||
- [ ] Modify any format-specific icons or indicators
|
||||
- [ ] Update help text or tooltips mentioning video formats
|
||||
|
||||
### ✅ Configuration Interface
|
||||
|
||||
- [ ] Add video format settings to camera config UI
|
||||
- [ ] Include video quality slider/selector
|
||||
- [ ] Add restart warning for video format changes
|
||||
|
||||
### ✅ Testing
|
||||
|
||||
- [ ] Test video playback with new MP4 files
|
||||
- [ ] Verify backward compatibility with existing AVI files
|
||||
- [ ] Test streaming performance and loading times
|
||||
@@ -146,11 +169,13 @@ const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
## 🔄 Backward Compatibility
|
||||
|
||||
### Existing AVI Files
|
||||
|
||||
- All existing `.avi` files remain fully functional
|
||||
- No conversion or migration required
|
||||
- Video player should handle both formats
|
||||
|
||||
### API Compatibility
|
||||
|
||||
- All existing API endpoints continue to work
|
||||
- New fields are additive (won't break existing code)
|
||||
- Default values provided for new configuration fields
|
||||
@@ -158,6 +183,7 @@ const videoUrl = `/api/videos/${videoId}/stream`;
|
||||
## 📊 Performance Benefits
|
||||
|
||||
### File Size Reduction
|
||||
|
||||
```
|
||||
Example 5-minute recording at 1280x1024:
|
||||
- AVI/XVID: ~180 MB
|
||||
@@ -165,12 +191,14 @@ Example 5-minute recording at 1280x1024:
|
||||
```
|
||||
|
||||
### Streaming Improvements
|
||||
|
||||
- Faster initial load times
|
||||
- Better progressive download support
|
||||
- Reduced bandwidth usage
|
||||
- Native browser optimization
|
||||
|
||||
### Storage Efficiency
|
||||
|
||||
- More recordings fit in same storage space
|
||||
- Faster backup and transfer operations
|
||||
- Reduced storage costs over time
|
||||
@@ -178,16 +206,19 @@ Example 5-minute recording at 1280x1024:
|
||||
## 🚨 Important Notes
|
||||
|
||||
### Restart Required
|
||||
|
||||
- Video format changes require camera service restart
|
||||
- Mark video format settings as "restart required" in UI
|
||||
- Provide clear user feedback about restart necessity
|
||||
|
||||
### Browser Compatibility
|
||||
|
||||
- MP4 format supported in all modern browsers
|
||||
- Better mobile device support than AVI
|
||||
- No additional plugins or codecs needed
|
||||
|
||||
### Quality Assurance
|
||||
|
||||
- Video quality maintained at 95/100 setting
|
||||
- No visual degradation compared to AVI
|
||||
- High bitrate ensures professional quality
|
||||
|
||||
Reference in New Issue
Block a user