mes-engine 0.0.3 → 1.0.0

package/examples/full-demo/frontend/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "mes-engine-demo-frontend",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "lint": "eslint .",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "axios": "^1.6.2",
+        "lucide-react": "^0.294.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "socket.io-client": "^4.7.2"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.37",
+        "@types/react-dom": "^18.2.15",
+        "@vitejs/plugin-react": "^4.2.0",
+        "autoprefixer": "^10.4.16",
+        "eslint": "^8.53.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.4",
+        "postcss": "^8.4.31",
+        "tailwindcss": "^3.3.5",
+        "vite": "^5.0.0"
+    }
+}

package/examples/full-demo/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/examples/full-demo/frontend/src/App.jsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react';
+import { io } from 'socket.io-client';
+import { VideoUploader } from './components/VideoUploader';
+import { ProcessingStatus } from './components/ProcessingStatus';
+import { VideoPlayer } from './components/VideoPlayer';
+import { uploadVideo } from './services/api';
+
+const socket = io('http://localhost:3001');
+
+function App() {
+  const [status, setStatus] = useState('idle');
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [logs, setLogs] = useState([]);
+  const [manifest, setManifest] = useState(null);
+  const [selectedQuality, setSelectedQuality] = useState(720);
+
+  useEffect(() => {
+    socket.on('connect', () => {
+      console.log('Connected to server');
+    });
+
+    socket.on('processing:started', (data) => {
+      setStatus('processing');
+      addLog('Processing started');
+    });
+
+    socket.on('processing:progress', (progress) => {
+      addLog(`Processing: ${progress.stage} - ${progress.percent}%`);
+    });
+
+    socket.on('processing:complete', (data) => {
+      setStatus('complete');
+      setManifest(data.manifest);
+      addLog('Processing complete!');
+    });
+
+    socket.on('processing:error', (data) => {
+      setStatus('error');
+      addLog(`Error: ${data.error}`, 'error');
+    });
+
+    return () => {
+      socket.off('connect');
+      socket.off('processing:started');
+      socket.off('processing:progress');
+      socket.off('processing:complete');
+      socket.off('processing:error');
+    };
+  }, []);
+
+  const addLog = (message, type = 'info') => {
+    setLogs(prev => [...prev, { 
+      message, 
+      type, 
+      timestamp: Date.now() 
+    }]);
+  };
+
+  const handleVideoUpload = async (file) => {
+    try {
+      setStatus('uploading');
+      setUploadProgress(0);
+      setLogs([]);
+      
+      addLog(`Uploading ${file.name}...`);
+      
+      await uploadVideo(file, socket.id, setUploadProgress);
+      
+      addLog('Upload complete, processing started...');
+    } catch (error) {
+      setStatus('error');
+      addLog(`Upload failed: ${error.message}`, 'error');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-blue-50 py-12 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-bold text-gray-900 mb-4">
+            MES-Engine Demo
+          </h1>
+          <p className="text-xl text-gray-600">
+            Multi-Engine Video Processing Framework
+          </p>
+        </div>
+
+        {status === 'idle' && (
+          <VideoUploader 
+            onUpload={handleVideoUpload}
+            disabled={status !== 'idle'}
+          />
+        )}
+
+        <ProcessingStatus
+          status={status}
+          progress={uploadProgress}
+          logs={logs}
+        />
+
+        {manifest && status === 'complete' && (
+          <VideoPlayer
+            manifest={manifest}
+            quality={selectedQuality}
+            onQualityChange={setSelectedQuality}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default App;

package/examples/full-demo/frontend/src/components/ProcessingStatus.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Loader, CheckCircle, AlertCircle } from 'lucide-react';
+
+export const ProcessingStatus = ({ status, progress, logs }) => {
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'processing':
+        return <Loader className="w-8 h-8 animate-spin text-purple-500" />;
+      case 'complete':
+        return <CheckCircle className="w-8 h-8 text-green-500" />;
+      case 'error':
+        return <AlertCircle className="w-8 h-8 text-red-500" />;
+      default:
+        return null;
+    }
+  };
+
+  const getStatusText = () => {
+    switch (status) {
+      case 'uploading':
+        return 'Uploading video...';
+      case 'processing':
+        return 'Processing video...';
+      case 'complete':
+        return 'Processing complete!';
+      case 'error':
+        return 'Processing failed';
+      default:
+        return '';
+    }
+  };
+
+  if (!status || status === 'idle') return null;
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
+      <div className="flex items-center mb-4">
+        {getStatusIcon()}
+        <h3 className="text-xl font-semibold ml-3">{getStatusText()}</h3>
+      </div>
+
+      {progress !== null && status === 'uploading' && (
+        <div className="mb-4">
+          <div className="flex justify-between mb-1">
+            <span className="text-sm font-medium text-gray-700">Upload Progress</span>
+            <span className="text-sm font-medium text-gray-700">{progress}%</span>
+          </div>
+          <div className="w-full bg-gray-200 rounded-full h-2.5">
+            <div
+              className="bg-purple-600 h-2.5 rounded-full transition-all"
+              style={{ width: `${progress}%` }}
+            ></div>
+          </div>
+        </div>
+      )}
+
+      {logs && logs.length > 0 && (
+        <div className="mt-4">
+          <h4 className="text-sm font-semibold mb-2 text-gray-700">Processing Logs</h4>
+          <div className="bg-gray-900 rounded-lg p-4 max-h-48 overflow-y-auto font-mono text-xs">
+            {logs.map((log, index) => (
+              <div key={index} className="text-green-400 mb-1">
+                [{new Date(log.timestamp).toLocaleTimeString()}] {log.message}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/examples/full-demo/frontend/src/components/VideoPlayer.jsx

@@ -0,0 +1,87 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Play, Pause, Volume2, VolumeX } from 'lucide-react';
+
+export const VideoPlayer = ({ manifest, quality, onQualityChange }) => {
+  const videoRef = useRef(null);
+  const [playing, setPlaying] = useState(false);
+  const [muted, setMuted] = useState(false);
+  const [currentChunk, setCurrentChunk] = useState(0);
+
+  const togglePlay = () => {
+    if (videoRef.current) {
+      if (playing) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+      setPlaying(!playing);
+    }
+  };
+
+  const toggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !muted;
+      setMuted(!muted);
+    }
+  };
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg overflow-hidden">
+      <div className="relative bg-black">
+        <video
+          ref={videoRef}
+          className="w-full"
+          src={`http://localhost:3001/api/video/stream/${manifest.videoId}/${quality}/${currentChunk}`}
+          onEnded={() => {
+            if (currentChunk < manifest.chunks.length / manifest.qualities.length - 1) {
+              setCurrentChunk(currentChunk + 1);
+            }
+          }}
+        />
+        
+        <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+          <div className="flex items-center justify-between text-white">
+            <div className="flex items-center space-x-4">
+              <button onClick={togglePlay} className="hover:scale-110 transition-transform">
+                {playing ? <Pause className="w-6 h-6" /> : <Play className="w-6 h-6" />}
+              </button>
+              <button onClick={toggleMute} className="hover:scale-110 transition-transform">
+                {muted ? <VolumeX className="w-6 h-6" /> : <Volume2 className="w-6 h-6" />}
+              </button>
+              <span className="text-sm">
+                Chunk {currentChunk + 1}
+              </span>
+            </div>
+            
+            <div className="flex items-center space-x-2">
+              <span className="text-sm mr-2">Quality:</span>
+              {manifest.qualities.map((q) => (
+                <button
+                  key={q.height}
+                  onClick={() => onQualityChange(q.height)}
+                  className={`px-3 py-1 rounded text-sm font-semibold transition-all ${
+                    quality === q.height
+                      ? 'bg-purple-600'
+                      : 'bg-gray-700 hover:bg-gray-600'
+                  }`}
+                >
+                  {q.height}p
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="p-4 bg-gray-50">
+        <h4 className="font-semibold mb-2">Video Information</h4>
+        <div className="grid grid-cols-2 gap-2 text-sm text-gray-600">
+          <div>ID: {manifest.videoId}</div>
+          <div>Created: {new Date(manifest.metadata.createdAt).toLocaleString()}</div>
+          <div>Qualities: {manifest.qualities.length}</div>
+          <div>Chunks: {manifest.chunks.length}</div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/examples/full-demo/frontend/src/components/VideoUploader.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { Upload } from 'lucide-react';
+
+export const VideoUploader = ({ onUpload, disabled }) => {
+  const [dragActive, setDragActive] = useState(false);
+
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true);
+    } else if (e.type === "dragleave") {
+      setDragActive(false);
+    }
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      onUpload(e.dataTransfer.files[0]);
+    }
+  };
+
+  const handleChange = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      onUpload(e.target.files[0]);
+    }
+  };
+
+  return (
+    <div
+      className={`relative border-2 border-dashed rounded-xl p-12 text-center transition-all ${
+        dragActive ? 'border-purple-500 bg-purple-50' : 'border-gray-300 hover:border-purple-400'
+      } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+      onDragEnter={handleDrag}
+      onDragLeave={handleDrag}
+      onDragOver={handleDrag}
+      onDrop={handleDrop}
+    >
+      <input
+        type="file"
+        className="hidden"
+        id="video-upload"
+        accept="video/*"
+        onChange={handleChange}
+        disabled={disabled}
+      />
+      <label htmlFor="video-upload" className={disabled ? '' : 'cursor-pointer'}>
+        <Upload className="w-16 h-16 mx-auto mb-4 text-purple-500" />
+        <p className="text-lg font-semibold text-gray-700 mb-2">
+          Click to upload or drag and drop
+        </p>
+        <p className="text-sm text-gray-500">
+          MP4, MOV, AVI, MKV (MAX. 500MB)
+        </p>
+      </label>
+    </div>
+  );
+};

package/examples/full-demo/frontend/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/examples/full-demo/frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/examples/full-demo/frontend/src/services/api.js

@@ -0,0 +1,30 @@
+import axios from 'axios';
+
+const API_BASE_URL = 'http://localhost:3001/api';
+
+export const uploadVideo = async (file, socketId, onProgress) => {
+    const formData = new FormData();
+    formData.append('video', file);
+    formData.append('socketId', socketId);
+
+    return axios.post(`${API_BASE_URL}/video/upload`, formData, {
+        headers: {
+            'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (progressEvent) => {
+            const percentCompleted = Math.round(
+                (progressEvent.loaded * 100) / progressEvent.total
+            );
+            onProgress(percentCompleted);
+        },
+    });
+};
+
+export const getManifest = async (videoId) => {
+    const response = await axios.get(`${API_BASE_URL}/video/manifest/${videoId}`);
+    return response.data;
+};
+
+export const getStreamUrl = (videoId, quality, chunk) => {
+    return `${API_BASE_URL}/video/stream/${videoId}/${quality}/${chunk}`;
+};

package/examples/full-demo/frontend/tailwind.config.js

@@ -0,0 +1,10 @@
+export default {
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+}

package/examples/full-demo/frontend/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3001',
+                changeOrigin: true,
+            },
+        }
+    }
+})

package/examples/simple-usage/README.md

@@ -0,0 +1,31 @@
+# Simple Usage Example
+
+This example demonstrates the basic application of the `mes-engine` package to process a video into adaptive streaming chunks (HLS).
+
+## Prerequisites
+
+- [Node.js](https://nodejs.org/) (v16+)
+- [FFmpeg](https://ffmpeg.org/) installed and available in your PATH.
+
+## Setup
+
+1.  **Install dependencies:**
+    ```bash
+    npm install
+    ```
+
+2.  **Add an input video:**
+    Place a video file named `input.mp4` in this directory (`examples/simple-usage/`).
+
+3.  **Run the demo:**
+    ```bash
+    npm start
+    ```
+
+## What it does
+
+- Initializes a `FileSystemStorage` to save output files in the `output/` directory.
+- Uses `FFmpegEngine` for video transcoding.
+- Configures `VideoProcessor` to generate two quality levels (720p and 1080p).
+- Generates an HLS manifest (`.m3u8`) for adaptive streaming.
+- Logs processing progress and the final manifest JSON to the console.

package/examples/simple-usage/index.ts

@@ -0,0 +1,68 @@
+import {
+    VideoProcessor,
+    FFmpegEngine,
+    FileSystemStorage,
+    VideoManifest
+} from '../../src/index.js';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Setup basic paths
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function runSimpleDemo() {
+    console.log('--- MES Engine Simple Demo ---');
+
+    // 1. Initialize the storage provider
+    // This is where processed chunks and manifests will be saved.
+    // In this version, FileSystemStorage doesn't take constructor arguments.
+    const storage = new FileSystemStorage();
+
+    // 2. Initialize the video engine
+    const engine = new FFmpegEngine();
+
+    // 3. Initialize the VideoProcessor
+    // The VideoProcessor requires: engine, storage, and a VideoConfig object.
+    const processor = new VideoProcessor(
+        engine,
+        storage,
+        {
+            chunkSize: 10, // 10 second chunks
+            cacheDir: path.join(__dirname, 'output'),
+            maxCacheSize: 1024 * 1024 * 1024, // 1GB
+            defaultQualities: [
+                { height: 720, bitrate: '2500k' },
+                { height: 1080, bitrate: '5000k' }
+            ]
+        }
+    );
+
+    // 4. Set up event listeners for progress
+    // Note: The actual events are defined in src/core/events.ts
+    processor.on('chunk_processed', (event) => {
+        console.log(`Chunk ${event.chunkNumber} completed at quality ${event.quality.height}p`);
+    });
+
+    // 5. Start processing a video
+    const inputPath = path.join(__dirname, 'input.mp4');
+
+    console.log(`Starting processing for: ${inputPath}`);
+
+    try {
+        // The actual method is processVideo, not process
+        const manifest: VideoManifest = await processor.processVideo(inputPath, {
+            title: 'Demo Video',
+            overallDescription: 'A simple demonstration of mes-engine'
+        });
+
+        console.log('Processing completed successfully!');
+        console.log('Manifest:', JSON.stringify(manifest, null, 2));
+        // Note: VideoManifest from src/core/types.ts doesn't have an 'hls' property yet
+        // based on the current file content.
+    } catch (error) {
+        console.error('Processing failed:', error);
+    }
+}
+
+runSimpleDemo().catch(console.error);