248 lines
5.0 KiB
Markdown
248 lines
5.0 KiB
Markdown
# 🎬 Sena Background Controller
|
|
|
|
Video Background Controller - Hệ thống quản lý video backgrounds với tính năng upload, metadata management và tích hợp Meilisearch.
|
|
|
|
## 📋 Tính năng
|
|
|
|
- ✅ Upload video files lên server
|
|
- ✅ Lưu trữ video trong folder `public/`
|
|
- ✅ Quản lý metadata chi tiết cho mỗi video
|
|
- ✅ Tự động tạo file JSON metadata cho Meilisearch
|
|
- ✅ Tìm kiếm theo topic, category, theme, colors, tags
|
|
- ✅ RESTful API để quản lý videos
|
|
- ✅ Giao diện web đẹp và dễ sử dụng
|
|
|
|
## 🚀 Cài đặt
|
|
|
|
### 1. Clone repository
|
|
|
|
```bash
|
|
git clone <repository-url>
|
|
cd sena_background_controller
|
|
```
|
|
|
|
### 2. Cài đặt dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 3. Khởi động server
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
Hoặc dùng nodemon để tự động reload:
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Server sẽ chạy tại: `http://localhost:3000`
|
|
|
|
## 📁 Cấu trúc thư mục
|
|
|
|
```
|
|
sena_background_controller/
|
|
├── data/ # Data directory (original)
|
|
├── public/ # Uploaded video files
|
|
├── metadata/ # JSON metadata files
|
|
├── src/
|
|
│ ├── index.html # Web interface
|
|
│ └── server.js # Express server
|
|
├── package.json
|
|
└── README.md
|
|
```
|
|
|
|
## 🎯 Sử dụng
|
|
|
|
### 1. Upload Video qua Web Interface
|
|
|
|
1. Mở trình duyệt và truy cập: `http://localhost:3000`
|
|
2. Chọn video file
|
|
3. Điền thông tin metadata:
|
|
- **Topic**: Chủ đề của video (VD: Nature, Technology, Abstract)
|
|
- **Category**: Danh mục (Abstract, Nature, Technology, Urban, etc.)
|
|
- **Theme**: Dark hoặc Light
|
|
- **Colors**: Chọn các màu nền có trong video (Blue, Green, Yellow, Red, Purple, Orange, Pink, Black, White)
|
|
- **Tags**: Các tag bổ sung (phân cách bằng dấu phẩy)
|
|
4. Click "Upload Video & Generate Metadata"
|
|
|
|
### 2. API Endpoints
|
|
|
|
#### Upload Video
|
|
```bash
|
|
POST http://localhost:3000/upload
|
|
Content-Type: multipart/form-data
|
|
|
|
Form Data:
|
|
- video: [video file]
|
|
- topic: "Nature Landscape"
|
|
- category: "nature"
|
|
- theme: "light"
|
|
- colors: ["blue", "green"]
|
|
- tags: ["4k", "loop", "smooth"]
|
|
```
|
|
|
|
#### Lấy danh sách tất cả videos
|
|
```bash
|
|
GET http://localhost:3000/videos
|
|
```
|
|
|
|
#### Lấy thông tin 1 video
|
|
```bash
|
|
GET http://localhost:3000/video/:id
|
|
```
|
|
|
|
#### Xóa video
|
|
```bash
|
|
DELETE http://localhost:3000/video/:id
|
|
```
|
|
|
|
#### Lấy tất cả metadata cho Meilisearch
|
|
```bash
|
|
GET http://localhost:3000/meilisearch/update
|
|
```
|
|
|
|
## 🔍 Tích hợp Meilisearch
|
|
|
|
### 1. Cài đặt Meilisearch
|
|
|
|
**Trên Windows:**
|
|
```bash
|
|
# Download từ GitHub releases
|
|
# hoặc dùng curl
|
|
curl -L https://install.meilisearch.com | sh
|
|
```
|
|
|
|
**Trên macOS:**
|
|
```bash
|
|
brew install meilisearch
|
|
```
|
|
|
|
**Trên Linux:**
|
|
```bash
|
|
curl -L https://install.meilisearch.com | sh
|
|
```
|
|
|
|
### 2. Khởi động Meilisearch
|
|
|
|
```bash
|
|
meilisearch --master-key="YOUR_MASTER_KEY"
|
|
```
|
|
|
|
Meilisearch sẽ chạy tại: `http://localhost:7700`
|
|
|
|
### 3. Tạo Index và Upload Documents
|
|
|
|
Sử dụng Meilisearch API hoặc SDK để tạo index và upload metadata:
|
|
|
|
```javascript
|
|
const { MeiliSearch } = require('meilisearch');
|
|
|
|
const client = new MeiliSearch({
|
|
host: 'http://localhost:7700',
|
|
apiKey: 'YOUR_MASTER_KEY',
|
|
});
|
|
|
|
// Tạo index
|
|
const index = client.index('videos');
|
|
|
|
// Lấy tất cả metadata từ server
|
|
fetch('http://localhost:3000/meilisearch/update')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
// Upload documents lên Meilisearch
|
|
index.addDocuments(data.documents);
|
|
});
|
|
```
|
|
|
|
### 4. Cấu hình Searchable Attributes
|
|
|
|
```javascript
|
|
index.updateSearchableAttributes([
|
|
'topic',
|
|
'category',
|
|
'theme',
|
|
'colors',
|
|
'tags',
|
|
'searchableText'
|
|
]);
|
|
|
|
index.updateFilterableAttributes([
|
|
'category',
|
|
'theme',
|
|
'colors'
|
|
]);
|
|
```
|
|
|
|
### 5. Tìm kiếm Videos
|
|
|
|
```javascript
|
|
// Tìm kiếm theo text
|
|
const results = await index.search('nature blue');
|
|
|
|
// Tìm kiếm với filters
|
|
const results = await index.search('landscape', {
|
|
filter: ['theme = dark', 'colors = blue']
|
|
});
|
|
```
|
|
|
|
## 📝 Format Metadata JSON
|
|
|
|
Mỗi video sẽ có 1 file JSON metadata với format sau:
|
|
|
|
```json
|
|
{
|
|
"id": "video_1703925601234",
|
|
"filename": "nature_landscape_1703925601234.mp4",
|
|
"originalName": "nature_landscape.mp4",
|
|
"path": "/public/nature_landscape_1703925601234.mp4",
|
|
"size": 52428800,
|
|
"mimetype": "video/mp4",
|
|
"topic": "Nature Landscape",
|
|
"category": "nature",
|
|
"theme": "light",
|
|
"colors": ["blue", "green"],
|
|
"tags": ["4k", "loop", "smooth"],
|
|
"uploadedAt": "2023-12-30T10:00:01.234Z",
|
|
"searchableText": "Nature Landscape nature light blue green 4k loop smooth"
|
|
}
|
|
```
|
|
|
|
## 🎨 Danh sách Categories
|
|
|
|
- Abstract
|
|
- Nature
|
|
- Technology
|
|
- Urban
|
|
- Particles
|
|
- Gradient
|
|
- Geometric
|
|
- Animation
|
|
- Other
|
|
|
|
## 🎨 Danh sách Colors
|
|
|
|
- Blue (🔵)
|
|
- Green (🟢)
|
|
- Yellow (🟡)
|
|
- Red (🔴)
|
|
- Purple (🟣)
|
|
- Orange (🟠)
|
|
- Pink (🌸)
|
|
- Black (⚫)
|
|
- White (⚪)
|
|
|
|
## 🛠️ Technologies
|
|
|
|
- **Backend**: Node.js + Express
|
|
- **File Upload**: Multer
|
|
- **Search**: Meilisearch
|
|
- **Frontend**: HTML5 + CSS3 + Vanilla JavaScript
|
|
|
|
## 📄 License
|
|
|
|
ISC
|