diff --git a/frontend_nuxt/config/uploadConfig.js b/frontend_nuxt/config/uploadConfig.js index 0172682b0..3c252ecc0 100644 --- a/frontend_nuxt/config/uploadConfig.js +++ b/frontend_nuxt/config/uploadConfig.js @@ -1,21 +1,15 @@ /** - * 文件上传配置 - 简化版 - * 专注于 FFmpeg.wasm 视频压缩，支持 Chrome/Safari + * 文件上传配置 */ export const UPLOAD_CONFIG = { - // 视频文件配置 - 专为 FFmpeg.wasm 优化 + // 视频文件配置 VIDEO: { // 文件大小限制 (字节) MAX_SIZE: 20 * 1024 * 1024, - TARGET_SIZE: 5 * 1024 * 1024, // 5MB - // 支持的输入格式 (FFmpeg.wasm 支持更多格式) + // 支持的输入格式 SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'], - - // 输出格式 - MP4 (兼容性最好) - OUTPUT_FORMAT: 'mp4', - OUTPUT_CODEC: 'h264', }, // 图片文件配置 diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts index 257566037..0c5bea8ac 100644 --- a/frontend_nuxt/nuxt.config.ts +++ b/frontend_nuxt/nuxt.config.ts @@ -97,9 +97,7 @@ export default defineNuxtConfig({ }, }, vite: { - optimizeDeps: { - exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'], - }, + optimizeDeps: {}, build: {}, }, }) diff --git a/frontend_nuxt/package-lock.json b/frontend_nuxt/package-lock.json index f6f32e430..e1d3a692d 100644 --- a/frontend_nuxt/package-lock.json +++ b/frontend_nuxt/package-lock.json @@ -6,8 +6,6 @@ "": { "name": "frontend_nuxt", "dependencies": { - "@ffmpeg/ffmpeg": "^0.12.2", - "@ffmpeg/util": "^0.12.2", "@icon-park/vue-next": "^1.4.2", "@nuxt/image": "^1.11.0", "@stomp/stompjs": "^7.0.0", @@ -547,36 +545,6 @@ "integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==", "license": "MIT" }, - "node_modules/@ffmpeg/ffmpeg": { - "version": "0.12.15", - "resolved": "https://registry.npmmirror.com/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz", - "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==", - "license": "MIT", - "dependencies": { - "@ffmpeg/types": "^0.12.4" - }, - "engines": { - "node": ">=18.x" - } - }, - "node_modules/@ffmpeg/types": { - "version": "0.12.4", - "resolved": "https://registry.npmmirror.com/@ffmpeg/types/-/types-0.12.4.tgz", - "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==", - "license": "MIT", - "engines": { - "node": ">=16.x" - } - }, - "node_modules/@ffmpeg/util": { - "version": "0.12.2", - "resolved": "https://registry.npmmirror.com/@ffmpeg/util/-/util-0.12.2.tgz", - "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==", - "license": "MIT", - "engines": { - "node": ">=18.x" - } - }, "node_modules/@icon-park/vue-next": { "version": "1.4.2", "resolved": "https://registry.npmmirror.com/@icon-park/vue-next/-/vue-next-1.4.2.tgz", diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json index 2756684f9..540a4f579 100644 --- a/frontend_nuxt/package.json +++ b/frontend_nuxt/package.json @@ -13,8 +13,6 @@ }, "dependencies": { "@icon-park/vue-next": "^1.4.2", - "@ffmpeg/ffmpeg": "^0.12.2", - "@ffmpeg/util": "^0.12.2", "@nuxt/image": "^1.11.0", "@stomp/stompjs": "^7.0.0", "cropperjs": "^1.6.2", diff --git a/frontend_nuxt/plugins/ffmpeg.client.ts b/frontend_nuxt/plugins/ffmpeg.client.ts deleted file mode 100644 index 9ea62e4e4..000000000 --- a/frontend_nuxt/plugins/ffmpeg.client.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { FFmpeg } from '@ffmpeg/ffmpeg' -import { toBlobURL } from '@ffmpeg/util' -import { defineNuxtPlugin } from 'nuxt/app' - -let ffmpeg: FFmpeg | null = null - -export default defineNuxtPlugin(() => { - return { - provide: { - ffmpeg: async () => { - if (ffmpeg) return ffmpeg - ffmpeg = new FFmpeg() - const base = `https://unpkg.com/@ffmpeg/core@0.12.2/dist/esm` - const libBase = `https://unpkg.com/@ffmpeg/ffmpeg@0.12.2/dist/esm` - await ffmpeg.load({ - coreURL: await toBlobURL(`${base}/ffmpeg-core.js`, 'text/javascript'), - wasmURL: await toBlobURL(`${base}/ffmpeg-core.wasm`, 'application/wasm'), - workerURL: await toBlobURL(`${libBase}/worker.js`, 'text/javascript'), - }) - - return ffmpeg - }, - }, - } -}) diff --git a/frontend_nuxt/utils/ffmpegVideoCompressor.js b/frontend_nuxt/utils/ffmpegVideoCompressor.js deleted file mode 100644 index 2aa155049..000000000 --- a/frontend_nuxt/utils/ffmpegVideoCompressor.js +++ /dev/null @@ -1,327 +0,0 @@ -/** - * FFmpeg.wasm 视频压缩器 - * - * 用法： - * const { $ffmpeg } = useNuxtApp() - * const ff = await $ffmpeg() // 插件里已完成 ffmpeg.load() - * const out = await compressVideoWithFFmpeg(ff, file, { onProgress, strictSize: false }) - * - * 设计要点： - * - 本文件不再负责加载/初始化，只负责转码逻辑；和 Nuxt 插件解耦。 - * - 针对【同一个 ffmpeg 实例】做串行队列，避免并发 exec 踩内存文件系统。 - * - 使用 nanoid 生成唯一文件名；日志环形缓冲；默认 CRF+VBV，可选 strictSize（two-pass）。 - * - 体积明显小于目标时直通返回，减少无谓重编码。 - */ - -import { fetchFile } from '@ffmpeg/util' -import { nanoid } from 'nanoid' -import { UPLOAD_CONFIG } from '../config/uploadConfig.js' - -/************************* - * 每实例一个串行队列 * - *************************/ -// WeakMapPromise)[], running: boolean, resolvers: {res,rej}[] }> -const queues = new WeakMap() - -function enqueueOn(instance, taskFn) { - return new Promise((res, rej) => { - let st = queues.get(instance) - if (!st) { - st = { q: [], running: false, resolvers: [] } - queues.set(instance, st) - } - st.q.push(taskFn) - st.resolvers.push({ res, rej }) - drain(instance) - }) -} - -async function drain(instance) { - const st = queues.get(instance) - if (!st || st.running) return - st.running = true - try { - while (st.q.length) { - const task = st.q.shift() - const rr = st.resolvers.shift() - try { - rr.res(await task()) - } catch (e) { - rr.rej(e) - } - } - } finally { - st.running = false - } -} - -/***************** - * 工具函数 * - *****************/ -function decideScale(widthHint) { - if (!widthHint) return { filter: null, width: null } - const evenW = widthHint % 2 === 0 ? widthHint : widthHint - 1 - return { filter: `scale=${evenW}:-2:flags=bicubic,setsar=1`, width: evenW } -} - -function calculateParamsByRatio(originalSize, targetSize) { - const ratio = Math.min(targetSize / originalSize, 1) - const crf = ratio < 0.35 ? 29 : ratio < 0.5 ? 27 : ratio < 0.7 ? 25 : 23 - const preset = ratio < 0.35 ? 'slow' : ratio < 0.5 ? 'medium' : 'veryfast' - const s = - ratio < 0.35 - ? decideScale(720) - : ratio < 0.6 - ? decideScale(960) - : ratio < 0.8 - ? decideScale(1280) - : { filter: null, width: null } - const audioBitrateK = ratio < 0.5 ? 96 : ratio < 0.7 ? 128 : 160 - const profile = s.width && s.width <= 1280 ? 'main' : 'high' - return { crf, preset, scaleFilter: s.filter, scaleWidth: s.width, audioBitrateK, profile } -} - -function makeRingLogger(capBytes = 4000) { - const buf = [] - let total = 0 - function push(s) { - if (!s) return - buf.push(s) - total += s.length - while (total > capBytes) total -= buf.shift().length - } - return { push, dump: () => buf.slice() } -} - -function parseDurationFromLogs(logs) { - // 避免正则：查找 Duration: 后的 00:00:00.xx - const text = logs.join(' ') - const idx = text.indexOf('Duration:') - if (idx === -1) return null - let i = idx + 'Duration:'.length - while (i < text.length && text[i] === ' ') i++ - function read2(start) { - const a = text.charCodeAt(start) - 48 - const b = text.charCodeAt(start + 1) - 48 - if (a < 0 || a > 9 || b < 0 || b > 9) return null - return a * 10 + b - } - const hh = read2(i) - if (hh === null) return null - i += 2 - if (text[i++] !== ':') return null - const mm = read2(i) - if (mm === null) return null - i += 2 - if (text[i++] !== ':') return null - const s1 = read2(i) - if (s1 === null) return null - i += 2 - if (text[i++] !== '.') return null - let j = i - while (j < text.length && text.charCodeAt(j) >= 48 && text.charCodeAt(j) <= 57) j++ - const frac = parseFloat('0.' + text.slice(i, j) || '0') - return hh * 3600 + mm * 60 + s1 + frac -} - -export function isFFmpegSupported() { - return typeof WebAssembly !== 'undefined' && typeof Worker !== 'undefined' -} - -/** - * 读取 ffmpeg 核心版本（通过 -version），会进入队列避免并发冲突 - */ -export async function getFFmpegInfo(ffmpegInstance) { - return enqueueOn(ffmpegInstance, async () => { - const logs = [] - const onLog = ({ type, message }) => { - if (type === 'info' || type === 'fferr') logs.push(message) - } - ffmpegInstance.on('log', onLog) - try { - await ffmpegInstance.exec(['-version']) - } finally { - ffmpegInstance.off('log', onLog) - } - const line = logs.find((l) => l.toLowerCase().includes('ffmpeg version')) || '' - const parts = line.trim().split(' ').filter(Boolean) - const version = parts.length > 2 ? parts[2] : parts[1] || null - return { version } - }) -} - -/** - * 压缩：接受一个已经 load() 完成的 ffmpeg 实例 - * @param {*} ffmpegInstance 已初始化的 FFmpeg 实例（来自 Nuxt 插件） - * @param {File|Blob} file 输入文件 - * @param {{ onProgress?:(p:{stage:string,progress:number})=>void, signal?:AbortSignal, strictSize?:boolean, targetSize?:number }} opts - */ -export async function compressVideoWithFFmpeg(ffmpegInstance, file, opts = {}) { - return enqueueOn(ffmpegInstance, () => doCompress(ffmpegInstance, file, opts)) -} - -async function doCompress(ffmpegInstance, file, opts) { - const onProgress = opts.onProgress || (() => {}) - const { signal, strictSize = false } = opts - - onProgress({ stage: 'preparing', progress: 10 }) - - const targetSize = opts.targetSize ?? UPLOAD_CONFIG?.VIDEO?.TARGET_SIZE ?? 12 * 1024 * 1024 - - // 小体积直通 - const sizeKnown = 'size' in file && typeof file.size === 'number' - if (sizeKnown && file.size <= targetSize * 0.9) { - onProgress({ stage: 'skipped', progress: 100 }) - return file - } - - const params = calculateParamsByRatio(sizeKnown ? file.size : targetSize * 2, targetSize) - const { crf, preset, scaleFilter, audioBitrateK, profile } = params - - const name = 'name' in file && typeof file.name === 'string' ? file.name : 'input.mp4' - const dot = name.lastIndexOf('.') - const outName = (dot > -1 ? name.slice(0, dot) : name) + '.mp4' - - const ext = dot > -1 ? name.slice(dot + 1).toLowerCase() : 'mp4' - const id = nanoid() - const inputName = `input-${id}.${ext}` - const outputName = `output-${id}.mp4` - const passlog = `ffpass-${id}` - - // 监听 - const ring = makeRingLogger() - const onFfmpegProgress = ({ progress: p }) => { - const adjusted = 20 + p * 70 - onProgress({ stage: 'compressing', progress: Math.min(90, adjusted) }) - } - const onFfmpegLog = ({ type, message }) => { - if (type === 'fferr' || type === 'info') ring.push(message) - } - ffmpegInstance.on('progress', onFfmpegProgress) - ffmpegInstance.on('log', onFfmpegLog) - - let aborted = false - const abortHandler = () => { - aborted = true - } - if (signal) signal.addEventListener('abort', abortHandler, { once: true }) - - try { - await ffmpegInstance.writeFile(inputName, await fetchFile(file)) - onProgress({ stage: 'analyzing', progress: 20 }) - - let durationSec = null - try { - await ffmpegInstance.exec(['-hide_banner', '-i', inputName, '-f', 'null', '-']) - durationSec = parseDurationFromLogs(ring.dump()) - } catch { - durationSec = durationSec ?? parseDurationFromLogs(ring.dump()) - } - - let videoBitrate = null - if (durationSec && sizeKnown && targetSize < file.size) { - const totalTargetBits = targetSize * 8 - const audioBits = audioBitrateK * 1000 * durationSec - const maxVideoBits = Math.max(totalTargetBits - audioBits, totalTargetBits * 0.7) - const bps = Math.max(180000, Math.floor(maxVideoBits / durationSec)) - videoBitrate = String(Math.min(bps, 5000000)) - } - - const baseArgs = [ - '-hide_banner', - '-i', - inputName, - '-c:v', - 'libx264', - '-pix_fmt', - 'yuv420p', - '-profile:v', - profile, - '-movflags', - '+faststart', - '-preset', - preset, - '-c:a', - 'aac', - '-b:a', - `${audioBitrateK}k`, - '-ac', - '2', - ] - if (scaleFilter) baseArgs.push('-vf', scaleFilter) - - const onePassArgs = [...baseArgs, '-crf', String(crf)] - if (videoBitrate) - onePassArgs.push('-maxrate', videoBitrate, '-bufsize', String(parseInt(videoBitrate, 10) * 2)) - - const twoPassFirst = [ - '-y', - '-hide_banner', - '-i', - inputName, - '-c:v', - 'libx264', - '-b:v', - `${videoBitrate || '1000000'}`, - '-pass', - '1', - '-passlogfile', - passlog, - '-an', - '-f', - 'mp4', - '/dev/null', - ] - const twoPassSecond = [ - ...baseArgs, - '-b:v', - `${videoBitrate || '1000000'}`, - '-pass', - '2', - '-passlogfile', - passlog, - outputName, - ] - - if (aborted) throw new DOMException('Aborted', 'AbortError') - - if (!strictSize) { - await ffmpegInstance.exec([...onePassArgs, outputName]) - } else { - if (!videoBitrate) videoBitrate = '1000000' - await ffmpegInstance.exec(twoPassFirst) - onProgress({ stage: 'second-pass', progress: 85 }) - await ffmpegInstance.exec(twoPassSecond) - } - - if (aborted) throw new DOMException('Aborted', 'AbortError') - - onProgress({ stage: 'finalizing', progress: 95 }) - const out = await ffmpegInstance.readFile(outputName) - - const mime = 'video/mp4' - const blob = new Blob([out], { type: mime }) - const hasFileCtor = typeof File === 'function' - const result = hasFileCtor ? new File([blob], outName, { type: mime }) : blob - - onProgress({ stage: 'completed', progress: 100 }) - return result - } finally { - try { - await ffmpegInstance.deleteFile(inputName) - } catch {} - try { - await ffmpegInstance.deleteFile(outputName) - } catch {} - try { - await ffmpegInstance.deleteFile(`${passlog}-0.log`) - } catch {} - try { - await ffmpegInstance.deleteFile(`${passlog}-0.log.mbtree`) - } catch {} - - ffmpegInstance.off('progress', onFfmpegProgress) - ffmpegInstance.off('log', onFfmpegLog) - if (signal) signal.removeEventListener('abort', abortHandler) - } -} diff --git a/frontend_nuxt/utils/vditor.js b/frontend_nuxt/utils/vditor.js index 3603fe542..bef1fdeee 100644 --- a/frontend_nuxt/utils/vditor.js +++ b/frontend_nuxt/utils/vditor.js @@ -3,8 +3,7 @@ import { getToken, authState } from './auth' import { searchUsers, fetchFollowings, fetchAdmins } from './user' import { tiebaEmoji } from './tiebaEmoji' import vditorPostCitation from './vditorPostCitation.js' -import { checkFileSize, formatFileSize, compressVideo, VIDEO_CONFIG } from './videoCompressor.js' -import { UPLOAD_CONFIG } from '../config/uploadConfig.js' +import { checkFileSize, formatFileSize } from './videoCompressor.js' export function getEditorTheme() { return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic' @@ -95,7 +94,6 @@ export function createVditor(editorId, options = {}) { const file = files[0] const ext = file.name.split('.').pop().toLowerCase() const videoExts = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'] - const isVideo = videoExts.includes(ext) // 检查文件大小 const sizeCheck = checkFileSize(file) @@ -113,61 +111,10 @@ export function createVditor(editorId, options = {}) { return '文件过大' } - let processedFile = file - - // 如果是视频文件且需要压缩 - if (isVideo && sizeCheck.needsCompression) { - try { - vditor.tip('开始部署ffmpeg环境... 请稍等', 0) - vditor.disabled() - - // 使用 FFmpeg 压缩视频 - processedFile = await compressVideo(file, (progress) => { - const messages = { - initializing: '初始化 FFmpeg', - preparing: '准备压缩', - analyzing: '分析视频', - compressing: '压缩中', - finalizing: '完成压缩', - completed: '压缩完成', - } - const message = messages[progress.stage] || progress.stage - vditor.tip(`${message} ${progress.progress}%`, 0) - }) - - const originalSize = formatFileSize(file.size) - const compressedSize = formatFileSize(processedFile.size) - const savings = Math.round((1 - processedFile.size / file.size) * 100) - - vditor.tip(`压缩完成！${originalSize} → ${compressedSize} (节省 ${savings}%)`, 2000) - // 压缩成功但仍然超过最大限制，则阻止上传 - if (processedFile.size > VIDEO_CONFIG.MAX_SIZE) { - vditor.tip( - `压缩后仍超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请降低分辨率或码率后再上传。`, - 4000, - ) - vditor.enable() - return '压缩后仍超过大小限制' - } - } catch (error) { - // 压缩失败时，如果原文件超过最大限制，则阻止上传 - if (file.size > VIDEO_CONFIG.MAX_SIZE) { - vditor.tip( - `视频压缩失败，且文件超过限制 (${formatFileSize(VIDEO_CONFIG.MAX_SIZE)}). 请先压缩后再上传。`, - 4000, - ) - vditor.enable() - return '视频压缩失败且文件过大' - } - vditor.tip('视频压缩失败，将尝试上传原文件', 3000) - processedFile = file - } - } - vditor.tip('文件上传中', 0) vditor.disabled() const res = await fetch( - `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(processedFile.name)}`, + `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(file.name)}`, { headers: { Authorization: `Bearer ${getToken()}` } }, ) if (!res.ok) { @@ -176,7 +123,7 @@ export function createVditor(editorId, options = {}) { return '获取上传地址失败' } const info = await res.json() - const put = await fetch(info.uploadUrl, { method: 'PUT', body: processedFile }) + const put = await fetch(info.uploadUrl, { method: 'PUT', body: file }) if (!put.ok) { vditor.enable() vditor.tip('上传失败') diff --git a/frontend_nuxt/utils/videoCompressor.js b/frontend_nuxt/utils/videoCompressor.js index 584d8a487..bffa6c453 100644 --- a/frontend_nuxt/utils/videoCompressor.js +++ b/frontend_nuxt/utils/videoCompressor.js @@ -1,11 +1,8 @@ /** - * 基于 FFmpeg.wasm 的视频压缩工具 - * 专为现代浏览器 (Chrome/Safari) 优化 + * 视频上传工具 */ import { UPLOAD_CONFIG } from '../config/uploadConfig.js' -import { compressVideoWithFFmpeg, isFFmpegSupported } from './ffmpegVideoCompressor.js' -import { useNuxtApp } from '#app' // 导出配置供外部使用 export const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO @@ -18,7 +15,6 @@ export function checkFileSize(file) { isValid: file.size <= VIDEO_CONFIG.MAX_SIZE, actualSize: file.size, maxSize: VIDEO_CONFIG.MAX_SIZE, - needsCompression: file.size > VIDEO_CONFIG.TARGET_SIZE, } } @@ -32,48 +28,3 @@ export function formatFileSize(bytes) { const i = Math.floor(Math.log(bytes) / Math.log(k)) return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i] } - -/** - * 压缩视频文件 - 使用 FFmpeg.wasm - */ -export async function compressVideo(file, onProgress = () => {}) { - // 检查是否需要压缩 - const sizeCheck = checkFileSize(file) - if (!sizeCheck.needsCompression) { - onProgress({ stage: 'completed', progress: 100 }) - return file - } - - // 检查 FFmpeg 支持 - if (!isFFmpegSupported()) { - throw new Error('当前浏览器不支持视频压缩功能，请使用 Chrome 或 Safari 浏览器') - } - - try { - const { $ffmpeg } = useNuxtApp() - const ff = await $ffmpeg() - return await compressVideoWithFFmpeg(ff, file, { onProgress }) - } catch (error) { - console.error('FFmpeg 压缩失败:', error) - throw new Error(`视频压缩失败: ${error.message}`) - } -} - -/** - * 预加载 FFmpeg（可选的性能优化） - */ -export async function preloadVideoCompressor() { - try { - // FFmpeg 初始化现在通过 Nuxt 插件处理 - // 这里只需要检查支持性 - if (!isFFmpegSupported()) { - throw new Error('当前浏览器不支持 FFmpeg') - } - const { $ffmpeg } = useNuxtApp() - await $ffmpeg() - return { success: true, message: 'FFmpeg 预加载成功' } - } catch (error) { - console.warn('FFmpeg 预加载失败:', error) - return { success: false, error: error.message } - } -}