diff --git a/frontend_nuxt/.env.example b/frontend_nuxt/.env.example index dadb36387..2990fd052 100644 --- a/frontend_nuxt/.env.example +++ b/frontend_nuxt/.env.example @@ -17,3 +17,8 @@ NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779 NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ NUXT_PUBLIC_TELEGRAM_BOT_ID=8450237135 + +# 视频压缩配置 - FFmpeg.wasm 专用 +# 支持 Chrome 60+ 和 Safari 11.1+ +NUXT_PUBLIC_VIDEO_MAX_SIZE=52428800 # 50MB (字节) +NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520 # 20MB (字节) \ No newline at end of file diff --git a/frontend_nuxt/config/uploadConfig.js b/frontend_nuxt/config/uploadConfig.js new file mode 100644 index 000000000..e98f13d70 --- /dev/null +++ b/frontend_nuxt/config/uploadConfig.js @@ -0,0 +1,137 @@ +/** + * 文件上传配置 - 简化版 + * 专注于 FFmpeg.wasm 视频压缩，支持 Chrome/Safari + */ + +// 声明全局变量以避免 TypeScript 错误 +/* global useRuntimeConfig */ + +// 简化的环境变量读取功能 +function getEnvNumber(key, defaultValue) { + if (typeof window !== 'undefined') { + // 客户端：尝试从 Nuxt 环境获取 + try { + // 使用 globalThis 避免直接引用未定义的变量 + const nuxtApp = globalThis.$nuxt || globalThis.nuxtApp + if (nuxtApp && nuxtApp.$config) { + const value = nuxtApp.$config.public?.[key.replace('NUXT_PUBLIC_', '').toLowerCase()] + return value ? Number(value) : defaultValue + } + return defaultValue + } catch { + return defaultValue + } + } + // 服务端：从 process.env 获取 + return process.env[key] ? Number(process.env[key]) : defaultValue +} + +function getEnvBoolean(key, defaultValue) { + if (typeof window !== 'undefined') { + try { + // 使用 globalThis 避免直接引用未定义的变量 + const nuxtApp = globalThis.$nuxt || globalThis.nuxtApp + if (nuxtApp && nuxtApp.$config) { + const value = nuxtApp.$config.public?.[key.replace('NUXT_PUBLIC_', '').toLowerCase()] + return value === 'true' || value === true + } + return defaultValue + } catch { + return defaultValue + } + } + const envValue = process.env[key] + return envValue ? envValue === 'true' : defaultValue +} + +export const UPLOAD_CONFIG = { + // 视频文件配置 - 专为 FFmpeg.wasm 优化 + VIDEO: { + // 文件大小限制 (字节) + MAX_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_MAX_SIZE', 20 * 1024 * 1024), // 5MB + TARGET_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_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', + }, + + // 图片文件配置 + IMAGE: { + MAX_SIZE: 5 * 1024 * 1024, // 5MB + TARGET_SIZE: 5 * 1024 * 1024, // 5MB + SUPPORTED_FORMATS: ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp'], + }, + + // 音频文件配置 + AUDIO: { + MAX_SIZE: 5 * 1024 * 1024, // 5MB + TARGET_SIZE: 5 * 1024 * 1024, // 5MB + SUPPORTED_FORMATS: ['mp3', 'wav', 'ogg', 'aac', 'm4a'], + }, + + // 通用文件配置 + GENERAL: { + MAX_SIZE: 100 * 1024 * 1024, // 100MB + CHUNK_SIZE: 5 * 1024 * 1024, // 5MB 分片大小 + }, + + // 用户体验配置 + UI: { + SUCCESS_DURATION: 2000, + ERROR_DURATION: 3000, + WARNING_DURATION: 3000, + }, +} + +/** + * 获取文件类型配置 + */ +export function getFileTypeConfig(filename) { + const ext = filename.split('.').pop().toLowerCase() + + if (UPLOAD_CONFIG.VIDEO.SUPPORTED_FORMATS.includes(ext)) { + return { type: 'video', config: UPLOAD_CONFIG.VIDEO } + } + + if (UPLOAD_CONFIG.IMAGE.SUPPORTED_FORMATS.includes(ext)) { + return { type: 'image', config: UPLOAD_CONFIG.IMAGE } + } + + if (UPLOAD_CONFIG.AUDIO.SUPPORTED_FORMATS.includes(ext)) { + return { type: 'audio', config: UPLOAD_CONFIG.AUDIO } + } + + return { type: 'general', config: UPLOAD_CONFIG.GENERAL } +} + +/** + * 格式化文件大小 + */ +export function formatFileSize(bytes) { + if (bytes === 0) return '0 B' + const k = 1024 + const sizes = ['B', 'KB', 'MB', 'GB'] + const i = Math.floor(Math.log(bytes) / Math.log(k)) + return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i] +} + +/** + * 计算压缩节省的费用 (示例函数) + */ +export function calculateSavings(originalSize, compressedSize, costPerMB = 0.01) { + const originalMB = originalSize / (1024 * 1024) + const compressedMB = compressedSize / (1024 * 1024) + const savedMB = originalMB - compressedMB + const savedCost = savedMB * costPerMB + + return { + savedMB: savedMB.toFixed(2), + savedCost: savedCost.toFixed(4), + originalCost: (originalMB * costPerMB).toFixed(4), + compressedCost: (compressedMB * costPerMB).toFixed(4), + } +} diff --git a/frontend_nuxt/nuxt.config.ts b/frontend_nuxt/nuxt.config.ts index bc33291b0..dad43963c 100644 --- a/frontend_nuxt/nuxt.config.ts +++ b/frontend_nuxt/nuxt.config.ts @@ -1,9 +1,21 @@ import { defineNuxtConfig } from 'nuxt/config' +import { createRequire } from 'node:module' +const require = createRequire(import.meta.url) +const appPkg = require('./package.json') as { + dependencies?: Record + devDependencies?: Record +} +const ffmpegVersion = ( + process.env.NUXT_PUBLIC_FFMPEG_VERSION || + appPkg.dependencies?.['@ffmpeg/ffmpeg'] || + appPkg.devDependencies?.['@ffmpeg/ffmpeg'] || + '0.12.15' +).replace(/^[^\d]*/, '') export default defineNuxtConfig({ devServer: { host: '0.0.0.0', - port: 3000 + port: 3000, }, ssr: true, modules: ['@nuxt/image'], @@ -17,6 +29,7 @@ export default defineNuxtConfig({ discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '', twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '', telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '', + ffmpegVersion, }, }, css: [ diff --git a/frontend_nuxt/package-lock.json b/frontend_nuxt/package-lock.json index 4c8d81069..39770a80c 100644 --- a/frontend_nuxt/package-lock.json +++ b/frontend_nuxt/package-lock.json @@ -6,6 +6,8 @@ "": { "name": "frontend_nuxt", "dependencies": { + "@ffmpeg/ffmpeg": "^0.12.15", + "@ffmpeg/util": "^0.12.2", "@icon-park/vue-next": "^1.4.2", "@nuxt/image": "^1.11.0", "@stomp/stompjs": "^7.0.0", @@ -19,6 +21,7 @@ "ldrs": "^1.0.0", "markdown-it": "^14.1.0", "mermaid": "^10.9.4", + "nanoid": "^5.1.5", "nprogress": "^0.2.0", "nuxt": "latest", "sanitize-html": "^2.17.0", @@ -996,9 +999,39 @@ "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.npmjs.org/@icon-park/vue-next/-/vue-next-1.4.2.tgz", + "resolved": "https://registry.npmmirror.com/@icon-park/vue-next/-/vue-next-1.4.2.tgz", "integrity": "sha512-+QklF255wkfBOabY+xw6FAI0Bwln/RhdwCunNy/9sKdKuChtaU67QZqU67KGAvZUTeeBgsL+yaHHxqfQeGZXEQ==", "license": "Apache-2.0", "engines": { @@ -7222,7 +7255,7 @@ }, "node_modules/diff2html": { "version": "3.4.52", - "resolved": "https://registry.npmjs.org/diff2html/-/diff2html-3.4.52.tgz", + "resolved": "https://registry.npmmirror.com/diff2html/-/diff2html-3.4.52.tgz", "integrity": "sha512-qhMg8/I3sZ4zm/6R/Kh0xd6qG6Vm86w6M+C9W+DuH1V8ACz+1cgEC8/k0ucjv6AGqZWzHm/8G1gh7IlrUqCMhg==", "license": "MIT", "dependencies": { @@ -7238,7 +7271,7 @@ }, "node_modules/diff2html/node_modules/diff": { "version": "7.0.0", - "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz", + "resolved": "https://registry.npmmirror.com/diff/-/diff-7.0.0.tgz", "integrity": "sha512-PJWHUb1RFevKCwaFA9RlG5tCd+FO5iRh9A8HEtkmBH2Li03iJriB6m6JIN4rGz3K3JLawI7/veA1xzRKP6ISBw==", "license": "BSD-3-Clause", "engines": { @@ -7247,7 +7280,7 @@ }, "node_modules/diff2html/node_modules/highlight.js": { "version": "11.9.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz", + "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.9.0.tgz", "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", "license": "BSD-3-Clause", "optional": true, @@ -8330,7 +8363,7 @@ }, "node_modules/hogan.js": { "version": "3.0.2", - "resolved": "https://registry.npmjs.org/hogan.js/-/hogan.js-3.0.2.tgz", + "resolved": "https://registry.npmmirror.com/hogan.js/-/hogan.js-3.0.2.tgz", "integrity": "sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg==", "dependencies": { "mkdirp": "0.3.0", @@ -8342,13 +8375,13 @@ }, "node_modules/hogan.js/node_modules/abbrev": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "resolved": "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz", "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==", "license": "ISC" }, "node_modules/hogan.js/node_modules/mkdirp": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz", + "resolved": "https://registry.npmmirror.com/mkdirp/-/mkdirp-0.3.0.tgz", "integrity": "sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew==", "deprecated": "Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)", "license": "MIT/X11", @@ -8358,7 +8391,7 @@ }, "node_modules/hogan.js/node_modules/nopt": { "version": "1.0.10", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "resolved": "https://registry.npmmirror.com/nopt/-/nopt-1.0.10.tgz", "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", "license": "MIT", "dependencies": { @@ -8614,7 +8647,7 @@ }, "node_modules/ipx": { "version": "3.1.1", - "resolved": "https://registry.npmjs.org/ipx/-/ipx-3.1.1.tgz", + "resolved": "https://registry.npmmirror.com/ipx/-/ipx-3.1.1.tgz", "integrity": "sha512-7Xnt54Dco7uYkfdAw0r2vCly3z0rSaVhEXMzPvl3FndsTVm5p26j+PO+gyinkYmcsEUvX2Rh7OGK7KzYWRu6BA==", "license": "MIT", "dependencies": { @@ -10171,7 +10204,7 @@ }, "node_modules/nanoid": { "version": "5.1.5", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz", + "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-5.1.5.tgz", "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==", "funding": [ { diff --git a/frontend_nuxt/package.json b/frontend_nuxt/package.json index 65385285c..31f873a29 100644 --- a/frontend_nuxt/package.json +++ b/frontend_nuxt/package.json @@ -13,6 +13,8 @@ }, "dependencies": { "@icon-park/vue-next": "^1.4.2", + "@ffmpeg/ffmpeg": "^0.12.15", + "@ffmpeg/util": "^0.12.2", "@nuxt/image": "^1.11.0", "@stomp/stompjs": "^7.0.0", "cropperjs": "^1.6.2", @@ -25,6 +27,7 @@ "ldrs": "^1.0.0", "markdown-it": "^14.1.0", "mermaid": "^10.9.4", + "nanoid": "^5.1.5", "nprogress": "^0.2.0", "nuxt": "latest", "sanitize-html": "^2.17.0", diff --git a/frontend_nuxt/plugins/ffmpeg.client.ts b/frontend_nuxt/plugins/ffmpeg.client.ts new file mode 100644 index 000000000..562a93aa2 --- /dev/null +++ b/frontend_nuxt/plugins/ffmpeg.client.ts @@ -0,0 +1,37 @@ +import { FFmpeg } from '@ffmpeg/ffmpeg' +import { toBlobURL } from '@ffmpeg/util' +import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app' + +let ffmpeg: FFmpeg | null = null + +export default defineNuxtPlugin(() => { + const { + public: { ffmpegVersion }, + } = useRuntimeConfig() + + return { + provide: { + ffmpeg: async () => { + if (ffmpeg) return ffmpeg + + ffmpeg = new FFmpeg() + + const mtOk = + typeof crossOriginIsolated !== 'undefined' && + crossOriginIsolated && + typeof SharedArrayBuffer !== 'undefined' + + const pkg = mtOk ? '@ffmpeg/core-mt' : '@ffmpeg/core-st' + const base = `https://unpkg.com/${pkg}@${ffmpegVersion}/dist/umd` + + await ffmpeg.load({ + coreURL: await toBlobURL(`${base}/ffmpeg-core.js`, 'text/javascript'), + wasmURL: await toBlobURL(`${base}/ffmpeg-core.wasm`, 'application/wasm'), + workerURL: await toBlobURL(`${base}/ffmpeg-core.worker.js`, 'text/javascript'), + }) + + return ffmpeg + }, + }, + } +}) diff --git a/frontend_nuxt/utils/ffmpegVideoCompressor.js b/frontend_nuxt/utils/ffmpegVideoCompressor.js new file mode 100644 index 000000000..2aa155049 --- /dev/null +++ b/frontend_nuxt/utils/ffmpegVideoCompressor.js @@ -0,0 +1,327 @@ +/** + * 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 3016fbc69..c2c6d7d9a 100644 --- a/frontend_nuxt/utils/vditor.js +++ b/frontend_nuxt/utils/vditor.js @@ -3,6 +3,8 @@ 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' export function getEditorTheme() { return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic' @@ -91,10 +93,81 @@ export function createVditor(editorId, options = {}) { multiple: false, handler: async (files) => { const file = files[0] - vditor.tip('图片上传中', 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) + if (!sizeCheck.isValid) { + console.log( + '文件大小不能超过', + formatFileSize(sizeCheck.maxSize), + '，当前文件', + formatFileSize(sizeCheck.actualSize), + ) + vditor.tip( + `文件大小不能超过 ${formatFileSize(sizeCheck.maxSize)}，当前文件 ${formatFileSize(sizeCheck.actualSize)}`, + 3000, + ) + return '文件过大' + } + + let processedFile = file + + // 如果是视频文件且需要压缩 + if (isVideo && sizeCheck.needsCompression) { + try { + vditor.tip('视频压缩中...', 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(file.name)}`, + `${API_BASE_URL}/api/upload/presign?filename=${encodeURIComponent(processedFile.name)}`, { headers: { Authorization: `Bearer ${getToken()}` } }, ) if (!res.ok) { @@ -103,14 +176,13 @@ export function createVditor(editorId, options = {}) { return '获取上传地址失败' } const info = await res.json() - const put = await fetch(info.uploadUrl, { method: 'PUT', body: file }) + const put = await fetch(info.uploadUrl, { method: 'PUT', body: processedFile }) if (!put.ok) { vditor.enable() vditor.tip('上传失败') return '上传失败' } - const ext = file.name.split('.').pop().toLowerCase() const imageExts = [ 'apng', 'bmp', @@ -132,6 +204,8 @@ export function createVditor(editorId, options = {}) { md = `![${file.name}](${info.fileUrl})` } else if (audioExts.includes(ext)) { md = `` + } else if (videoExts.includes(ext)) { + md = `` } else { md = `[${file.name}](${info.fileUrl})` } diff --git a/frontend_nuxt/utils/videoCompressor.js b/frontend_nuxt/utils/videoCompressor.js new file mode 100644 index 000000000..584d8a487 --- /dev/null +++ b/frontend_nuxt/utils/videoCompressor.js @@ -0,0 +1,79 @@ +/** + * 基于 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 + +/** + * 检查文件大小是否超出限制 + */ +export function checkFileSize(file) { + return { + isValid: file.size <= VIDEO_CONFIG.MAX_SIZE, + actualSize: file.size, + maxSize: VIDEO_CONFIG.MAX_SIZE, + needsCompression: file.size > VIDEO_CONFIG.TARGET_SIZE, + } +} + +/** + * 格式化文件大小显示 + */ +export function formatFileSize(bytes) { + if (bytes === 0) return '0 B' + const k = 1024 + const sizes = ['B', 'KB', 'MB', 'GB'] + 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 } + } +}