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

修改了前端界面，增加了编码方式和硬件编码器的选择，并添加了播放按钮和转码进度显示。同时在后端引入了fluent-ffmpeg库来处理视频转码，并使用WebSocket实时传输转码进度信息到前端。

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-02 17:57:53 +08:00
parent 41b985e1d1
commit 4b0b5a75bc
3 changed files with 48 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -9,8 +9,6 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css">
<!-- hls.js for HLS streaming support -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
</head>
<body>
<div class="background-effects">
@@ -21,7 +19,7 @@
<div class="container">
<header>
<h1>S3 Media <span>Transcoder</span></h1>
<p>Seamlessly stream videos from AWS S3 dynamically via FFmpeg HLS Transcoding</p>
<p>Seamlessly transcode videos from AWS S3 to MP4 for browser playback</p>
</header>
<main class="dashboard">

37
public/js/main.js
View File

@@ -246,7 +246,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (data.error) throw new Error(data.error);
if (!wsConnected) {
pollForHlsReady(key, data.hlsUrl);
pollForHlsReady(key, data.mp4Url);
}
} catch (err) {
console.error(err);
@@ -254,7 +254,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
// Poll the backend to check if the generated m3u8 file is accessible
// Poll the backend to check if the generated MP4 file is accessible
const pollForHlsReady = (key, hlsUrl) => {
let attempts = 0;
const maxAttempts = 120; // 60 seconds max wait for first segment
@@ -291,35 +291,22 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
// Initialize HLS Player
// Initialize MP4 Player
const playHlsStream = (url) => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
playBtn.classList.add('hidden');
resetProgress();
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(url);
hls.attachMedia(videoPlayer);
hls.on(Hls.Events.MANIFEST_PARSED, () => {
if (playBtn) {
playBtn.disabled = false;
playBtn.textContent = 'Play';
playBtn.classList.remove('hidden');
}
});
} else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
// Safari uses native HLS
videoPlayer.src = url;
videoPlayer.addEventListener('loadedmetadata', () => {
if (playBtn) {
playBtn.disabled = false;
playBtn.textContent = 'Play';
playBtn.classList.remove('hidden');
}
}, { once: true });
}
videoPlayer.src = url;
videoPlayer.load();
videoPlayer.addEventListener('loadedmetadata', () => {
if (playBtn) {
playBtn.disabled = false;
playBtn.textContent = 'Play';
playBtn.classList.remove('hidden');
}
}, { once: true });
};
// Bind events