Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
2ca8958a1e |
66
README.md
66
README.md
@@ -1,57 +1,27 @@
|
||||
# Media Coding Web - Configuration & Run Guide
|
||||
|
||||
Media Coding Web is a high-performance video transcoding and streaming web application. It retrieves source media files from AWS S3 or MinIO, transcodes them on the fly utilizing hardware-accelerated video encoders, and streams them efficiently to the browser using HLS (m3u8).
|
||||
To properly test and run this project, you will need to prepare your environment:
|
||||
|
||||
## Features
|
||||
1. **Install Node.js & FFmpeg**:
|
||||
- Ensure Node.js (v18+) is installed.
|
||||
- Install **FFmpeg** on your system and make sure it is available in your PATH environment variable. The Node.js library `fluent-ffmpeg` requires it.
|
||||
- Note: The platform supports Intel QSV, Nvidia NVENC, and VAAPI hardware encoders. Ensure your FFmpeg build includes support for `h264_qsv` / `hevc_qsv` / `h264_nvenc` / `hevc_nvenc` / `h264_vaapi` / `hevc_vaapi` if you wish to use them.
|
||||
- The service always uses Jellyfin FFmpeg by default: `/usr/lib/jellyfin-ffmpeg/ffmpeg` and `/usr/lib/jellyfin-ffmpeg/ffprobe`. You can override them with `JELLYFIN_FFMPEG_PATH` and `JELLYFIN_FFPROBE_PATH`.
|
||||
|
||||
- **High-Performance HLS Streaming:** Streams video using HLS for fast startup, localized buffering, native browser video controls, and frame-accurate seeking.
|
||||
- **Hardware-Accelerated Encoding:** Detects and seamlessly supports Intel QSV, NVIDIA NVENC, and VAAPI hardware encoders natively via FFmpeg.
|
||||
- **AWS S3 / MinIO Integration:** Securely downloads media from S3-compatible endpoints to a dedicated local cache directory before processing.
|
||||
- **Persistent Sessions:** Utilizes Valkey (Redis) for stateful session management, eliminating repetitive login actions.
|
||||
- **Real-Time Progress:** Displays live feedback for both background S3 downloading and FFmpeg transcoding, communicated to the web application via WebSockets.
|
||||
- **Modern User Interface:** Features a sleek and highly responsive user interface complete with built-in light and dark mode switching.
|
||||
- **Centralized Log Storage:** Persists application activity and debugging events safely within the project's `/logs/` directory utilizing Winston loggers.
|
||||
- **Unified Configuration:** A single `.env` file powers the entire web application settings.
|
||||
2. **AWS S3 / MinIO Configuration**:
|
||||
- Modify the `.env` file (copy from `.env.example`).
|
||||
- Add your `AWS_ACCESS_KEY_ID`, `AWS_SECRET_ACCESS_KEY`, `AWS_REGION`, and `S3_BUCKET_NAME`.
|
||||
- If using **MinIO**, ensure you set the `S3_ENDPOINT` (e.g., `http://127.0.0.1:9000`) and set `S3_FORCE_PATH_STYLE=true`.
|
||||
- Ensure your bucket has `.mp4` video files.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
To properly run and deploy this project, your environment should contain:
|
||||
|
||||
1. **Node.js**: Version 18.x or newer is required to natively support all APIs.
|
||||
2. **FFmpeg with Hardware Support**:
|
||||
- Ensure you configure an FFmpeg instance on your system.
|
||||
- For maximal performance, the application defaults to searching for `jellyfin-ffmpeg` located at `/usr/lib/jellyfin-ffmpeg/ffmpeg`. Feel free to point it at any other binary containing QSV or NVENC support by modifying the `JELLYFIN_FFMPEG_PATH` path inside `.env`.
|
||||
3. **Valkey (or Redis)**: An active Redis-compatible cache server string is required for user sessions.
|
||||
4. **AWS S3 / MinIO Account**: An object storage endpoint containing your encoded `.mp4` media catalog.
|
||||
|
||||
## Configuration & Installation
|
||||
|
||||
1. **Install Dependencies**:
|
||||
Navigate into the project root directory and execute:
|
||||
3. **Install Dependencies & Start**:
|
||||
```bash
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
2. **Establish Environment Variables**:
|
||||
Create a pristine copy of the `.env.example` structure:
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
Open `.env` using your preferred editor to tailor your environment:
|
||||
- **Valkey/Redis Settings**: Configure `VALKEY_URL`.
|
||||
- **S3 Connectivity**: Insert your `S3_BUCKET_ADDRESS` and `AWS_REGION`. For MinIO specifically, fill the `S3_ENDPOINT` key (e.g. `http://127.0.0.1:9000`) and verify `S3_FORCE_PATH_STYLE=true`.
|
||||
|
||||
## Running the Application
|
||||
|
||||
To launch the web interface and application server, simply run:
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
*(You may also run `npm run dev` to execute the local environment.)*
|
||||
|
||||
## Verifying Setup
|
||||
|
||||
1. Open a browser and load `http://localhost:3000` (or your defined `PORT`).
|
||||
2. Log into the system using your relevant S3 authorization if using local user mode.
|
||||
3. The server will communicate directly to your S3 bucket and load the application's root dashboard.
|
||||
4. Upon clicking any available video media, the server will rapidly download the required chunks to the local cache, start compiling HLS indexing data using native hardware encoding, and pipe an advanced native video stream back into your browser.
|
||||
4. **Test Delivery**:
|
||||
- Open your browser to `http://localhost:3000`.
|
||||
- The application should display available `.mp4` items from your S3 bucket.
|
||||
- Click one video, and the Node server will begin to read the S3 stream and pipe it to FFmpeg, transcoding it into HLS segments inside the `/public/hls/` directory.
|
||||
- The frontend polls via `/api/status`, and once the index playlist is available, HLS playback starts!
|
||||
|
||||
@@ -105,7 +105,6 @@ header h1 {
|
||||
header h1 span {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@@ -137,37 +136,35 @@ header p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
background: radial-gradient(circle at top left, rgba(249, 250, 252, 0.95), rgba(255, 255, 255, 0.98));
|
||||
z-index: 50;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: min(480px, 100%);
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--panel-border);
|
||||
background: #ffffff;
|
||||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 20px 40px rgba(148, 163, 184, 0.15);
|
||||
box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
|
||||
}
|
||||
|
||||
.login-card h2 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1.75rem;
|
||||
color: var(--text-primary);
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.login-card p {
|
||||
color: var(--text-secondary);
|
||||
color: #6b7280;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.login-card label {
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
color: #4b5563;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
@@ -178,17 +175,17 @@ header p {
|
||||
|
||||
.login-card input {
|
||||
width: 100%;
|
||||
border: 1px solid var(--panel-border);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid rgba(148, 163, 184, 0.5);
|
||||
background: #f8fafc;
|
||||
color: #111827;
|
||||
border-radius: 12px;
|
||||
padding: 0.85rem 1rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.login-card input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
border-color: #2563eb;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
|
||||
}
|
||||
|
||||
.login-card .primary-btn {
|
||||
@@ -303,6 +300,13 @@ header p {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.section-actions-row {
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--panel-border);
|
||||
}
|
||||
|
||||
.section-actions {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@@ -311,12 +315,6 @@ header p {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.banner-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border: none;
|
||||
background: #2563eb;
|
||||
@@ -647,50 +645,6 @@ header p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.now-playing-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.subtitle-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--panel-border);
|
||||
padding: 0.5rem 0.8rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.subtitle-panel label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
.subtitle-panel select {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.subtitle-panel select option {
|
||||
background: var(--bg-dark);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.now-playing p {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
@@ -1089,21 +1043,13 @@ header p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.now-playing-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-top: 1rem;
|
||||
padding: 0.85rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, background 0.2s ease;
|
||||
@@ -1209,67 +1155,4 @@ header p {
|
||||
.control-seek {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
/* Mobile specific top bar */
|
||||
.user-controls {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: var(--panel-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid var(--panel-border);
|
||||
padding: 0.75rem 1rem;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.user-controls label {
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#theme-selector {
|
||||
padding: 0.25rem 0.4rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.user-controls .banner-actions,
|
||||
.user-controls .user-info {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-controls .action-btn {
|
||||
padding: 0.4rem 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 5rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
margin-top: 1rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid var(--panel-border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -42,14 +42,12 @@
|
||||
<label>页面主题：
|
||||
<select id="theme-selector">
|
||||
<option value="light">白天模式</option>
|
||||
<option value="dark">黑夜模式</option>
|
||||
<option value="dark">深夜模式</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="banner-actions">
|
||||
<button id="refresh-btn" class="action-btn" title="刷新列表">刷新列表</button>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<button id="logout-btn" class="action-btn danger">退出登录</button>
|
||||
<span id="current-username"></span>
|
||||
<button id="logout-btn" class="action-btn">退出登录</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -57,7 +55,13 @@
|
||||
<main class="dashboard">
|
||||
<section class="video-list-section glass-panel">
|
||||
<div class="section-header">
|
||||
<h2 id="video-list-header">Available Videos</h2>
|
||||
<h2>Available Videos</h2>
|
||||
</div>
|
||||
<div class="section-actions-row">
|
||||
<div class="section-actions">
|
||||
<button id="refresh-btn" class="action-btn" title="刷新列表">刷新列表</button>
|
||||
<button id="clear-download-cache-btn" class="action-btn" title="清空下载缓存">清空下载缓存</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bucket-panel">
|
||||
<label for="bucket-select">Select Bucket</label>
|
||||
@@ -139,19 +143,8 @@
|
||||
<div id="now-playing" class="now-playing hidden">
|
||||
<h3>Now Playing</h3>
|
||||
<p id="current-video-title">video.mp4</p>
|
||||
<div class="now-playing-actions">
|
||||
<div id="subtitle-panel" class="subtitle-panel hidden">
|
||||
<label for="subtitle-selector">字幕：</label>
|
||||
<select id="subtitle-selector">
|
||||
<option value="-1">无字幕</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="transcode-btn" class="play-btn hidden">开始播放</button>
|
||||
<button id="stop-transcode-btn" class="play-btn stop-btn hidden">停止播放</button>
|
||||
<button id="pre-slice-btn" class="play-btn stop-btn hidden">预切片 (HLS)</button>
|
||||
<button id="clear-playing-download-cache-btn" class="play-btn stop-btn hidden">清空下载缓存</button>
|
||||
<button id="clear-playing-transcode-cache-btn" class="play-btn stop-btn hidden">清空转码缓存</button>
|
||||
</div>
|
||||
<button id="transcode-btn" class="play-btn hidden">Start Transcode</button>
|
||||
<button id="stop-transcode-btn" class="play-btn stop-btn hidden">Stop Transcode</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@@ -2,6 +2,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const videoListEl = document.getElementById('video-list');
|
||||
const loadingSpinner = document.getElementById('loading-spinner');
|
||||
const refreshBtn = document.getElementById('refresh-btn');
|
||||
const clearDownloadCacheBtn = document.getElementById('clear-download-cache-btn');
|
||||
const bucketSelect = document.getElementById('bucket-select');
|
||||
const loginScreen = document.getElementById('login-screen');
|
||||
const appContainer = document.getElementById('app-container');
|
||||
@@ -18,14 +19,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const currentVideoTitle = document.getElementById('current-video-title');
|
||||
const transcodeBtn = document.getElementById('transcode-btn');
|
||||
const stopTranscodeBtn = document.getElementById('stop-transcode-btn');
|
||||
const preSliceBtn = document.getElementById('pre-slice-btn');
|
||||
const clearPlayingDownloadBtn = document.getElementById('clear-playing-download-cache-btn');
|
||||
const clearPlayingTranscodeBtn = document.getElementById('clear-playing-transcode-cache-btn');
|
||||
const themeSelector = document.getElementById('theme-selector');
|
||||
const videoListHeader = document.getElementById('video-list-header');
|
||||
const currentUsername = document.getElementById('current-username');
|
||||
const logoutBtn = document.getElementById('logout-btn');
|
||||
const subtitlePanel = document.getElementById('subtitle-panel');
|
||||
const subtitleSelector = document.getElementById('subtitle-selector');
|
||||
const topBannerTitle = document.getElementById('top-banner-title');
|
||||
const playBtn = document.getElementById('play-btn');
|
||||
const topBanner = document.getElementById('top-banner');
|
||||
@@ -144,14 +140,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const buildHlsPlaylistUrl = () => {
|
||||
const decoder = 'auto';
|
||||
const encoder = encoderSelect?.value || 'h264_rkmpp';
|
||||
const encoder = encoderSelect?.value || 'h264_qsv';
|
||||
let streamUrl = `/api/hls/playlist.m3u8?bucket=${encodeURIComponent(selectedBucket)}&key=${encodeURIComponent(selectedKey)}&decoder=${encodeURIComponent(decoder)}&encoder=${encodeURIComponent(encoder)}`;
|
||||
|
||||
const subIndex = subtitleSelector?.value;
|
||||
if (subIndex && subIndex !== '-1') {
|
||||
streamUrl += `&subtitleIndex=${encodeURIComponent(subIndex)}`;
|
||||
}
|
||||
|
||||
const sessionId = localStorage.getItem('sessionId');
|
||||
if (sessionId) {
|
||||
streamUrl += `&sessionId=${encodeURIComponent(sessionId)}`;
|
||||
@@ -274,22 +264,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
};
|
||||
|
||||
const subscribeToKey = (key) => {
|
||||
let subscriptionKey = key;
|
||||
const subIndex = subtitleSelector?.value;
|
||||
if (subIndex && subIndex !== '-1') {
|
||||
subscriptionKey = `${key}-sub${subIndex}`;
|
||||
}
|
||||
|
||||
subscribedKey = subscriptionKey;
|
||||
subscribedKey = key;
|
||||
if (wsConnected) {
|
||||
sendWsMessage({ type: 'subscribe', key: subscriptionKey });
|
||||
sendWsMessage({ type: 'subscribe', key });
|
||||
}
|
||||
};
|
||||
|
||||
const handleWsMessage = (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
if (message.key !== subscribedKey) return;
|
||||
if (message.key !== currentVideoKey) return;
|
||||
|
||||
if (message.type === 'duration' && message.duration) {
|
||||
videoDuration = message.duration;
|
||||
@@ -396,7 +380,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (stopTranscodeBtn) {
|
||||
stopTranscodeBtn.classList.add('hidden');
|
||||
stopTranscodeBtn.disabled = false;
|
||||
stopTranscodeBtn.textContent = '停止播放';
|
||||
stopTranscodeBtn.textContent = 'Stop Transcode';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -478,34 +462,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
seekToTime(targetTime);
|
||||
};
|
||||
|
||||
const seekToTime = (targetTime) => {
|
||||
if (!isStreamActive || videoDuration <= 0) return;
|
||||
const clampedTime = Math.max(0, Math.min(targetTime, videoDuration));
|
||||
console.log(`[Seek] Seeking to ${clampedTime.toFixed(2)}s / ${videoDuration.toFixed(2)}s`);
|
||||
|
||||
if (hlsInstance) {
|
||||
// For HLS: seek within the current buffer if possible
|
||||
const relativeTime = clampedTime - seekOffset;
|
||||
if (relativeTime >= 0 && relativeTime <= (videoPlayer.duration || 0)) {
|
||||
videoPlayer.currentTime = relativeTime;
|
||||
} else {
|
||||
// Need server-side restart from new position
|
||||
seekOffset = clampedTime;
|
||||
const streamUrl = buildHlsPlaylistUrl();
|
||||
hlsInstance.destroy();
|
||||
hlsInstance = new Hls({ maxBufferLength: 30, maxMaxBufferLength: 60 });
|
||||
hlsInstance.loadSource(streamUrl);
|
||||
hlsInstance.attachMedia(videoPlayer);
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
videoPlayer.play().catch(() => {});
|
||||
});
|
||||
}
|
||||
} else {
|
||||
videoPlayer.currentTime = clampedTime;
|
||||
}
|
||||
updateSeekBarPosition(clampedTime);
|
||||
};
|
||||
|
||||
if (seekBar) {
|
||||
seekBar.addEventListener('mousedown', handleSeekStart);
|
||||
document.addEventListener('mousemove', handleSeekMove);
|
||||
@@ -587,7 +543,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (topBannerTitle) topBannerTitle.textContent = title;
|
||||
topBanner.classList.remove('hidden');
|
||||
document.title = title;
|
||||
populateSelect(encoderSelect, data.videoEncoders || [], data.defaultVideoEncoder || 'h264_rkmpp');
|
||||
populateSelect(encoderSelect, data.videoEncoders || [], data.defaultVideoEncoder || 'h264_qsv');
|
||||
} catch (err) {
|
||||
console.error('Config load failed:', err);
|
||||
}
|
||||
@@ -630,7 +586,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
localStorage.setItem('sessionId', sessionId);
|
||||
if (username) {
|
||||
localStorage.setItem('username', username);
|
||||
if (videoListHeader) videoListHeader.textContent = `${username} Available Videos`;
|
||||
if (currentUsername) currentUsername.textContent = username;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -686,8 +642,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
clearLoginError();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
const res = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
@@ -718,7 +674,26 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
};
|
||||
|
||||
const clearDownloadCache = async () => {
|
||||
if (!clearDownloadCacheBtn) return;
|
||||
clearDownloadCacheBtn.disabled = true;
|
||||
clearDownloadCacheBtn.textContent = '清空中...';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/clear-download-cache', { method: 'POST' });
|
||||
if (!res.ok) {
|
||||
const data = await res.json().catch(() => ({}));
|
||||
throw new Error(data.error || '清空下载缓存失败');
|
||||
}
|
||||
alert('下载缓存已清空');
|
||||
} catch (err) {
|
||||
console.error('Clear download cache failed:', err);
|
||||
alert(`清空下载缓存失败: ${err.message}`);
|
||||
} finally {
|
||||
clearDownloadCacheBtn.disabled = false;
|
||||
clearDownloadCacheBtn.textContent = '清空下载缓存';
|
||||
}
|
||||
};
|
||||
|
||||
if (transcodeBtn) {
|
||||
transcodeBtn.addEventListener('click', () => {
|
||||
@@ -758,8 +733,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Build a tree structure from S3 keys
|
||||
const tree = {};
|
||||
data.videos.forEach(vid => {
|
||||
const key = vid.key;
|
||||
data.videos.forEach(key => {
|
||||
const parts = key.split('/');
|
||||
let current = tree;
|
||||
parts.forEach((part, index) => {
|
||||
@@ -768,18 +742,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
if (index === parts.length - 1) {
|
||||
current[part].__file = key;
|
||||
current[part].__hasTranscodeCache = vid.hasTranscodeCache;
|
||||
current[part].__hasDownloadCache = vid.hasDownloadCache;
|
||||
}
|
||||
current = current[part];
|
||||
});
|
||||
});
|
||||
|
||||
const createFileItem = (name, key, hasTranscodeCache, hasDownloadCache) => {
|
||||
const createFileItem = (name, key) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'video-item file-item';
|
||||
const ext = name.split('.').pop().toUpperCase();
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="video-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/></svg>
|
||||
@@ -791,17 +762,16 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
`;
|
||||
li.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
selectVideo(key, li, hasTranscodeCache, hasDownloadCache);
|
||||
selectVideo(key, li);
|
||||
});
|
||||
|
||||
return li;
|
||||
};
|
||||
|
||||
const renderTree = (node, container) => {
|
||||
for (const [name, value] of Object.entries(node)) {
|
||||
if (name === '__file' || name === '__hasTranscodeCache' || name === '__hasDownloadCache') continue;
|
||||
if (name === '__file') continue;
|
||||
|
||||
const childKeys = Object.keys(value).filter(k => k !== '__file' && k !== '__hasTranscodeCache' && k !== '__hasDownloadCache');
|
||||
const childKeys = Object.keys(value).filter(key => key !== '__file');
|
||||
const hasChildren = childKeys.length > 0;
|
||||
const isFile = typeof value.__file === 'string';
|
||||
|
||||
@@ -832,13 +802,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
li.appendChild(folderHeader);
|
||||
if (isFile) {
|
||||
subListContainer.appendChild(createFileItem(name, value.__file, value.__hasTranscodeCache, value.__hasDownloadCache));
|
||||
subListContainer.appendChild(createFileItem(name, value.__file));
|
||||
}
|
||||
renderTree(value, subListContainer);
|
||||
li.appendChild(subListContainer);
|
||||
container.appendChild(li);
|
||||
} else if (isFile) {
|
||||
container.appendChild(createFileItem(name, value.__file, value.__hasTranscodeCache, value.__hasDownloadCache));
|
||||
container.appendChild(createFileItem(name, value.__file));
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -851,7 +821,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
};
|
||||
|
||||
// Handle video selection
|
||||
const selectVideo = (key, listItemNode, hasTranscodeCache = false, hasDownloadCache = false) => {
|
||||
const selectVideo = (key, listItemNode) => {
|
||||
document.querySelectorAll('.video-item').forEach(n => n.classList.remove('active'));
|
||||
listItemNode.classList.add('active');
|
||||
|
||||
@@ -877,111 +847,37 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
if (transcodeBtn) {
|
||||
transcodeBtn.disabled = false;
|
||||
transcodeBtn.textContent = '开始播放';
|
||||
transcodeBtn.textContent = 'Start Transcode';
|
||||
transcodeBtn.classList.remove('hidden');
|
||||
}
|
||||
if (stopTranscodeBtn) {
|
||||
stopTranscodeBtn.classList.add('hidden');
|
||||
stopTranscodeBtn.disabled = false;
|
||||
stopTranscodeBtn.textContent = '停止播放';
|
||||
stopTranscodeBtn.textContent = 'Stop Transcode';
|
||||
}
|
||||
|
||||
if (preSliceBtn) {
|
||||
preSliceBtn.classList.remove('hidden');
|
||||
preSliceBtn.disabled = false;
|
||||
}
|
||||
if (clearPlayingDownloadBtn) {
|
||||
if (hasDownloadCache) clearPlayingDownloadBtn.classList.remove('hidden');
|
||||
else clearPlayingDownloadBtn.classList.add('hidden');
|
||||
}
|
||||
if (clearPlayingTranscodeBtn) {
|
||||
if (hasTranscodeCache) clearPlayingTranscodeBtn.classList.remove('hidden');
|
||||
else clearPlayingTranscodeBtn.classList.add('hidden');
|
||||
}
|
||||
|
||||
if (playBtn) {
|
||||
playBtn.classList.add('hidden');
|
||||
}
|
||||
resetPhases();
|
||||
|
||||
// Reset subtitle selector before subscribing to ensure we use the base key for source download
|
||||
if (subtitleSelector) {
|
||||
subtitleSelector.innerHTML = '<option value="-1">无字幕</option>';
|
||||
subtitleSelector.value = "-1";
|
||||
}
|
||||
if (subtitlePanel) {
|
||||
subtitlePanel.classList.add('hidden');
|
||||
}
|
||||
|
||||
selectedKey = key;
|
||||
currentVideoKey = key;
|
||||
subscribeToKey(key);
|
||||
|
||||
nowPlaying.classList.remove('hidden');
|
||||
currentVideoTitle.textContent = key.split('/').pop();
|
||||
|
||||
// If download is needed, show the overlay so the user sees the progress
|
||||
if (!hasDownloadCache) {
|
||||
transcodingOverlay.classList.remove('hidden');
|
||||
showDownloadPhase();
|
||||
}
|
||||
|
||||
// Fetch subtitle metadata
|
||||
fetchVideoMetadata(selectedBucket, key);
|
||||
};
|
||||
|
||||
const handleSubtitleChange = () => {
|
||||
if (!selectedKey) return;
|
||||
subscribeToKey(selectedKey);
|
||||
};
|
||||
if (subtitleSelector) {
|
||||
subtitleSelector.addEventListener('change', handleSubtitleChange);
|
||||
}
|
||||
|
||||
const fetchVideoMetadata = async (bucket, key) => {
|
||||
if (!subtitlePanel || !subtitleSelector) return;
|
||||
|
||||
subtitlePanel.classList.add('hidden');
|
||||
subtitleSelector.innerHTML = '<option value="-1">正在加载字幕...</option>';
|
||||
subtitleSelector.disabled = true;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/video-metadata?bucket=${encodeURIComponent(bucket)}&key=${encodeURIComponent(key)}`, { headers: s3AuthHeaders });
|
||||
if (!res.ok) throw new Error('Failed to fetch metadata');
|
||||
const data = await res.json();
|
||||
|
||||
subtitleSelector.innerHTML = '<option value="-1">无字幕</option>';
|
||||
if (data.subtitleStreams && data.subtitleStreams.length > 0) {
|
||||
data.subtitleStreams.forEach(sub => {
|
||||
const option = document.createElement('option');
|
||||
option.value = sub.subIndex;
|
||||
option.textContent = `[${sub.language}] ${sub.title}`;
|
||||
subtitleSelector.appendChild(option);
|
||||
});
|
||||
subtitlePanel.classList.remove('hidden');
|
||||
} else {
|
||||
subtitleSelector.innerHTML = '<option value="-1">无嵌入字幕</option>';
|
||||
subtitlePanel.classList.remove('hidden');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Fetch metadata failed:', err);
|
||||
subtitleSelector.innerHTML = '<option value="-1">无法加载字幕</option>';
|
||||
subtitlePanel.classList.remove('hidden');
|
||||
} finally {
|
||||
subtitleSelector.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
const startTranscode = async () => {
|
||||
if (!selectedKey) return;
|
||||
if (transcodeBtn) {
|
||||
transcodeBtn.disabled = true;
|
||||
transcodeBtn.textContent = '播放中...';
|
||||
transcodeBtn.textContent = 'Starting...';
|
||||
}
|
||||
if (stopTranscodeBtn) {
|
||||
stopTranscodeBtn.classList.remove('hidden');
|
||||
stopTranscodeBtn.disabled = false;
|
||||
stopTranscodeBtn.textContent = '停止播放';
|
||||
stopTranscodeBtn.textContent = 'Stop Transcode';
|
||||
}
|
||||
stopPolling();
|
||||
resetPhases();
|
||||
@@ -1005,13 +901,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
hlsInstance.loadSource(streamUrl);
|
||||
hlsInstance.attachMedia(videoPlayer);
|
||||
hlsInstance.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
console.log('[HLS] MANIFEST_PARSED - starting playback');
|
||||
transcodingOverlay.classList.add('hidden');
|
||||
videoPlayer.classList.remove('hidden');
|
||||
isStreamActive = true;
|
||||
videoPlayer.play().catch((e) => {
|
||||
console.warn('[HLS] Autoplay blocked:', e.message);
|
||||
});
|
||||
videoPlayer.play().catch(() => { });
|
||||
showSeekBar();
|
||||
showCustomControls();
|
||||
updatePlayControls();
|
||||
@@ -1020,19 +913,15 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
schedulePlaybackChromeHide();
|
||||
});
|
||||
hlsInstance.on(Hls.Events.ERROR, function (event, data) {
|
||||
console.error('[HLS] Error:', data.type, data.details, data.fatal ? '(FATAL)' : '', data);
|
||||
if (data.fatal) {
|
||||
switch (data.type) {
|
||||
case Hls.ErrorTypes.NETWORK_ERROR:
|
||||
console.warn('[HLS] Fatal network error, attempting recovery...');
|
||||
hlsInstance.startLoad();
|
||||
break;
|
||||
case Hls.ErrorTypes.MEDIA_ERROR:
|
||||
console.warn('[HLS] Fatal media error, attempting recovery...');
|
||||
hlsInstance.recoverMediaError();
|
||||
break;
|
||||
default:
|
||||
console.error('[HLS] Fatal error, destroying instance');
|
||||
hlsInstance.destroy();
|
||||
break;
|
||||
}
|
||||
@@ -1062,7 +951,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const stopTranscode = async () => {
|
||||
if (!currentVideoKey || !stopTranscodeBtn) return;
|
||||
stopTranscodeBtn.disabled = true;
|
||||
stopTranscodeBtn.textContent = '停止中...';
|
||||
stopTranscodeBtn.textContent = 'Stopping...';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/stop-transcode', {
|
||||
@@ -1088,59 +977,21 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
updatePlayControls();
|
||||
if (transcodeBtn) {
|
||||
transcodeBtn.disabled = false;
|
||||
transcodeBtn.textContent = '开始播放';
|
||||
transcodeBtn.textContent = 'Start Transcode';
|
||||
transcodeBtn.classList.remove('hidden');
|
||||
}
|
||||
stopTranscodeBtn.classList.add('hidden');
|
||||
} catch (err) {
|
||||
console.error('Stop transcode failed:', err);
|
||||
alert(`停止播放失败: ${err.message}`);
|
||||
alert(`Stop transcode failed: ${err.message}`);
|
||||
} finally {
|
||||
if (stopTranscodeBtn) {
|
||||
stopTranscodeBtn.disabled = false;
|
||||
stopTranscodeBtn.textContent = '停止播放';
|
||||
stopTranscodeBtn.textContent = 'Stop Transcode';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const preSliceVideo = async () => {
|
||||
if (!selectedKey) return;
|
||||
preSliceBtn.disabled = true;
|
||||
preSliceBtn.textContent = '预切片中...';
|
||||
|
||||
try {
|
||||
const sessionId = localStorage.getItem('sessionId');
|
||||
const body = {
|
||||
bucket: selectedBucket,
|
||||
key: selectedKey,
|
||||
encoder: encoderSelect?.value || 'h264_rkmpp',
|
||||
decoder: 'auto',
|
||||
subtitleIndex: subtitleSelector?.value || '-1',
|
||||
sessionId
|
||||
};
|
||||
|
||||
const res = await fetch('/api/pre-slice', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body)
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error || 'Pre-slice failed');
|
||||
|
||||
alert('已在后台开始预切片，您可以在进度条中查看进度。');
|
||||
} catch (err) {
|
||||
console.error('Pre-slice failed:', err);
|
||||
alert(`预切片失败: ${err.message}`);
|
||||
preSliceBtn.disabled = false;
|
||||
preSliceBtn.textContent = '预切片 (HLS)';
|
||||
}
|
||||
};
|
||||
|
||||
if (preSliceBtn) {
|
||||
preSliceBtn.addEventListener('click', preSliceVideo);
|
||||
}
|
||||
|
||||
const stopPolling = () => {
|
||||
if (currentPollInterval) {
|
||||
clearInterval(currentPollInterval);
|
||||
@@ -1248,56 +1099,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Bind events
|
||||
refreshBtn.addEventListener('click', () => fetchVideos(selectedBucket));
|
||||
|
||||
if (clearDownloadCacheBtn) {
|
||||
clearDownloadCacheBtn.addEventListener('click', clearDownloadCache);
|
||||
}
|
||||
if (stopTranscodeBtn) {
|
||||
stopTranscodeBtn.addEventListener('click', stopTranscode);
|
||||
}
|
||||
|
||||
if (clearPlayingDownloadBtn) {
|
||||
clearPlayingDownloadBtn.addEventListener('click', async () => {
|
||||
if (!currentVideoKey) return;
|
||||
clearPlayingDownloadBtn.disabled = true;
|
||||
clearPlayingDownloadBtn.textContent = '清空中...';
|
||||
try {
|
||||
const res = await fetch('/api/clear-video-download-cache', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ bucket: selectedBucket, key: currentVideoKey })
|
||||
});
|
||||
if (!res.ok) throw new Error('清空失败');
|
||||
clearPlayingDownloadBtn.classList.add('hidden');
|
||||
fetchVideos(selectedBucket);
|
||||
} catch (err) {
|
||||
alert('清空下载缓存失败: ' + err.message);
|
||||
} finally {
|
||||
clearPlayingDownloadBtn.disabled = false;
|
||||
clearPlayingDownloadBtn.textContent = '清空下载缓存';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (clearPlayingTranscodeBtn) {
|
||||
clearPlayingTranscodeBtn.addEventListener('click', async () => {
|
||||
if (!currentVideoKey) return;
|
||||
clearPlayingTranscodeBtn.disabled = true;
|
||||
clearPlayingTranscodeBtn.textContent = '清空中...';
|
||||
try {
|
||||
const res = await fetch('/api/clear-video-transcode-cache', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ bucket: selectedBucket, key: currentVideoKey })
|
||||
});
|
||||
if (!res.ok) throw new Error('清空失败');
|
||||
clearPlayingTranscodeBtn.classList.add('hidden');
|
||||
fetchVideos(selectedBucket);
|
||||
} catch (err) {
|
||||
alert('清空转码缓存失败: ' + err.message);
|
||||
} finally {
|
||||
clearPlayingTranscodeBtn.disabled = false;
|
||||
clearPlayingTranscodeBtn.textContent = '清空转码缓存';
|
||||
}
|
||||
});
|
||||
}
|
||||
if (loginBtn) {
|
||||
loginBtn.addEventListener('click', login);
|
||||
}
|
||||
@@ -1313,11 +1120,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const sessionId = localStorage.getItem('sessionId');
|
||||
if (sessionId) {
|
||||
try {
|
||||
await fetch('/api/logout', {
|
||||
method: 'POST',
|
||||
headers: { 'X-Session-ID': sessionId }
|
||||
await fetch('/api/logout', {
|
||||
method: 'POST',
|
||||
headers: { 'X-Session-ID': sessionId }
|
||||
});
|
||||
} catch(e){}
|
||||
} catch (e) { }
|
||||
}
|
||||
clearSessionAuth();
|
||||
location.reload();
|
||||
@@ -1336,7 +1143,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const savedSession = localStorage.getItem('sessionId');
|
||||
const savedUsername = localStorage.getItem('username');
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
|
||||
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
if (themeSelector) themeSelector.value = savedTheme;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user