CN-JS-HuiBai/Media-Coding-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增转码进度显示功能，优化视频标题显示，添加编码器选择面板。

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-02 17:41:50 +08:00
parent eb6068cbb8
commit edf39d0ae4
4 changed files with 84 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/css/style.css
View File

@@ -401,6 +401,35 @@ header p {
font-weight: 600;
}
.progress-info {
width: 100%;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}
.progress-text {
color: var(--text-secondary);
font-size: 0.95rem;
}
.progress-bar {
width: 100%;
height: 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
overflow: hidden;
}
.progress-fill {
width: 0%;
height: 100%;
background: linear-gradient(90deg, var(--accent), var(--accent-hover));
transition: width 0.25s ease;
}
.play-btn {
margin-top: 1rem;
padding: 0.85rem 1.25rem;

6
public/index.html
View File

@@ -65,6 +65,12 @@
<div class="spinner"></div>
<h3>Transcoding via FFmpeg...</h3>
<p>Generating HLS segments, please wait.</p>
<div id="progress-info" class="progress-info hidden">
<div id="progress-text" class="progress-text">Initializing...</div>
<div class="progress-bar">
<div id="progress-fill" class="progress-fill"></div>
</div>
</div>
</div>
<video id="video-player" controls preload="auto" class="hidden"></video>
</div>

28
public/js/main.js
View File

@@ -10,9 +10,27 @@ document.addEventListener('DOMContentLoaded', () => {
const nowPlaying = document.getElementById('now-playing');
const currentVideoTitle = document.getElementById('current-video-title');
const playBtn = document.getElementById('play-btn');
const progressInfo = document.getElementById('progress-info');
const progressText = document.getElementById('progress-text');
const progressFill = document.getElementById('progress-fill');
let currentPollInterval = null;
const setProgress = (progress) => {
if (!progressInfo || !progressText || !progressFill) return;
const percent = Math.min(Math.max(Math.round(progress?.percent || 0), 0), 100);
progressInfo.classList.remove('hidden');
progressText.textContent = `${progress?.details || progress?.status || 'Transcoding...'} ${percent ? `${percent}%` : ''}`.trim();
progressFill.style.width = `${percent}%`;
};
const resetProgress = () => {
if (!progressInfo || !progressText || !progressFill) return;
progressInfo.classList.add('hidden');
progressText.textContent = '';
progressFill.style.width = '0%';
};
if (playBtn) {
playBtn.addEventListener('click', () => {
videoPlayer.play().catch(e => console.log('Play blocked:', e));
@@ -144,11 +162,13 @@ document.addEventListener('DOMContentLoaded', () => {
videoPlayer.classList.add('hidden');
videoPlayer.pause();
if (playBtn) playBtn.classList.add('hidden');
resetProgress();
nowPlaying.classList.remove('hidden');
currentVideoTitle.textContent = key.split('/').pop();
transcodingOverlay.classList.remove('hidden');
setProgress({ status: 'Starting transcoding...', percent: 0, details: 'Starting transcoding...' });
try {
const codec = codecSelect?.value || 'h264';
@@ -181,8 +201,13 @@ document.addEventListener('DOMContentLoaded', () => {
const res = await fetch(`/api/status?key=${encodeURIComponent(key)}`);
const data = await res.json();
if (data.ready) {
if (data.progress) {
setProgress(data.progress);
}
if (data.ready) {
stopPolling();
setProgress({ status: 'Ready to play', percent: 100, details: 'Ready to play' });
playHlsStream(data.hlsUrl);
} else if (attempts >= maxAttempts) {
stopPolling();
@@ -206,6 +231,7 @@ document.addEventListener('DOMContentLoaded', () => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
playBtn.classList.add('hidden');
resetProgress();
if (Hls.isSupported()) {
const hls = new Hls();

25
server.js
View File

@@ -28,6 +28,7 @@ const s3Client = new S3Client({
});
const BUCKET_NAME = process.env.S3_BUCKET_NAME;
const progressMap = {};
// Endpoint to list videos in the bucket
app.get('/api/videos', async (req, res) => {
@@ -82,9 +83,12 @@ app.post('/api/transcode', async (req, res) => {
try {
const safeKeySegments = key.split('/').map(segment => segment.replace(/[^a-zA-Z0-9_\-]/g, '_'));
const progressKey = safeKeySegments.join('/');
const outputDir = path.join(__dirname, 'public', 'hls', ...safeKeySegments);
const m3u8Path = path.join(outputDir, 'index.m3u8');
const hlsUrl = `/hls/${safeKeySegments.join('/')}/index.m3u8`;
const hlsUrl = `/hls/${progressKey}/index.m3u8`;
progressMap[progressKey] = { status: 'pending', percent: 0, details: 'Waiting for ffmpeg to start' };
// If it already exists, just return the URL
if (fs.existsSync(m3u8Path)) {
@@ -119,11 +123,24 @@ app.post('/api/transcode', async (req, res) => {
'-f hls'
])
.output(m3u8Path)
.on('progress', (progress) => {
progressMap[progressKey] = {
status: 'transcoding',
percent: Math.min(Math.max(Math.round(progress.percent || 0), 0), 100),
frame: progress.frames || null,
fps: progress.currentFps || null,
bitrate: progress.currentKbps || null,
timemark: progress.timemark || null,
details: `Transcoding... ${Math.min(Math.max(Math.round(progress.percent || 0), 0), 100)}%`
};
})
.on('end', () => {
console.log(`Finished transcoding ${key} to HLS`);
progressMap[progressKey] = { status: 'finished', percent: 100, details: 'Transcoding complete' };
})
.on('error', (err) => {
console.error(`Error transcoding ${key}:`, err);
progressMap[progressKey] = { status: 'failed', percent: progressMap[progressKey]?.percent || 0, details: err.message || 'Transcoding failed' };
})
.run();
@@ -142,13 +159,15 @@ app.get('/api/status', (req, res) => {
if (!key) return res.status(400).json({ error: 'Key is required' });
const safeKeySegments = key.split('/').map(segment => segment.replace(/[^a-zA-Z0-9_\-]/g, '_'));
const progressKey = safeKeySegments.join('/');
const m3u8Path = path.join(__dirname, 'public', 'hls', ...safeKeySegments, 'index.m3u8');
const progress = progressMap[progressKey] || null;
// Check if the playlist file exists
if (fs.existsSync(m3u8Path)) {
res.json({ ready: true, hlsUrl: `/hls/${safeKeySegments.join('/')}/index.m3u8` });
res.json({ ready: true, hlsUrl: `/hls/${safeKeySegments.join('/')}/index.m3u8`, progress });
} else {
res.json({ ready: false });
res.json({ ready: false, progress });
}
});