mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-06 23:21:16 +08:00
chore: remove ffmpeg video compression
This commit is contained in:
@@ -1,21 +1,15 @@
|
|||||||
/**
|
/**
|
||||||
* 文件上传配置 - 简化版
|
* 文件上传配置
|
||||||
* 专注于 FFmpeg.wasm 视频压缩,支持 Chrome/Safari
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const UPLOAD_CONFIG = {
|
export const UPLOAD_CONFIG = {
|
||||||
// 视频文件配置 - 专为 FFmpeg.wasm 优化
|
// 视频文件配置
|
||||||
VIDEO: {
|
VIDEO: {
|
||||||
// 文件大小限制 (字节)
|
// 文件大小限制 (字节)
|
||||||
MAX_SIZE: 20 * 1024 * 1024,
|
MAX_SIZE: 20 * 1024 * 1024,
|
||||||
TARGET_SIZE: 5 * 1024 * 1024, // 5MB
|
|
||||||
|
|
||||||
// 支持的输入格式 (FFmpeg.wasm 支持更多格式)
|
// 支持的输入格式
|
||||||
SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
|
SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
|
||||||
|
|
||||||
// 输出格式 - MP4 (兼容性最好)
|
|
||||||
OUTPUT_FORMAT: 'mp4',
|
|
||||||
OUTPUT_CODEC: 'h264',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 图片文件配置
|
// 图片文件配置
|
||||||
|
|||||||
@@ -97,9 +97,7 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
vite: {
|
vite: {
|
||||||
optimizeDeps: {
|
optimizeDeps: {},
|
||||||
exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
|
|
||||||
},
|
|
||||||
build: {},
|
build: {},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
32
frontend_nuxt/package-lock.json
generated
32
frontend_nuxt/package-lock.json
generated
@@ -6,8 +6,6 @@
|
|||||||
"": {
|
"": {
|
||||||
"name": "frontend_nuxt",
|
"name": "frontend_nuxt",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ffmpeg/ffmpeg": "^0.12.2",
|
|
||||||
"@ffmpeg/util": "^0.12.2",
|
|
||||||
"@icon-park/vue-next": "^1.4.2",
|
"@icon-park/vue-next": "^1.4.2",
|
||||||
"@nuxt/image": "^1.11.0",
|
"@nuxt/image": "^1.11.0",
|
||||||
"@stomp/stompjs": "^7.0.0",
|
"@stomp/stompjs": "^7.0.0",
|
||||||
@@ -547,36 +545,6 @@
|
|||||||
"integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
|
"integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@icon-park/vue-next": {
|
||||||
"version": "1.4.2",
|
"version": "1.4.2",
|
||||||
"resolved": "https://registry.npmmirror.com/@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",
|
||||||
|
|||||||
@@ -13,8 +13,6 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@icon-park/vue-next": "^1.4.2",
|
"@icon-park/vue-next": "^1.4.2",
|
||||||
"@ffmpeg/ffmpeg": "^0.12.2",
|
|
||||||
"@ffmpeg/util": "^0.12.2",
|
|
||||||
"@nuxt/image": "^1.11.0",
|
"@nuxt/image": "^1.11.0",
|
||||||
"@stomp/stompjs": "^7.0.0",
|
"@stomp/stompjs": "^7.0.0",
|
||||||
"cropperjs": "^1.6.2",
|
"cropperjs": "^1.6.2",
|
||||||
|
|||||||
@@ -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
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -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'
|
|
||||||
|
|
||||||
/*************************
|
|
||||||
* 每实例一个串行队列 *
|
|
||||||
*************************/
|
|
||||||
// WeakMap<FFmpeg, { q: (()=>Promise<any>)[], 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)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -3,8 +3,7 @@ import { getToken, authState } from './auth'
|
|||||||
import { searchUsers, fetchFollowings, fetchAdmins } from './user'
|
import { searchUsers, fetchFollowings, fetchAdmins } from './user'
|
||||||
import { tiebaEmoji } from './tiebaEmoji'
|
import { tiebaEmoji } from './tiebaEmoji'
|
||||||
import vditorPostCitation from './vditorPostCitation.js'
|
import vditorPostCitation from './vditorPostCitation.js'
|
||||||
import { checkFileSize, formatFileSize, compressVideo, VIDEO_CONFIG } from './videoCompressor.js'
|
import { checkFileSize, formatFileSize } from './videoCompressor.js'
|
||||||
import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
|
|
||||||
|
|
||||||
export function getEditorTheme() {
|
export function getEditorTheme() {
|
||||||
return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
|
return document.documentElement.dataset.theme === 'dark' ? 'dark' : 'classic'
|
||||||
@@ -95,7 +94,6 @@ export function createVditor(editorId, options = {}) {
|
|||||||
const file = files[0]
|
const file = files[0]
|
||||||
const ext = file.name.split('.').pop().toLowerCase()
|
const ext = file.name.split('.').pop().toLowerCase()
|
||||||
const videoExts = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv']
|
const videoExts = ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv']
|
||||||
const isVideo = videoExts.includes(ext)
|
|
||||||
|
|
||||||
// 检查文件大小
|
// 检查文件大小
|
||||||
const sizeCheck = checkFileSize(file)
|
const sizeCheck = checkFileSize(file)
|
||||||
@@ -113,61 +111,10 @@ export function createVditor(editorId, options = {}) {
|
|||||||
return '文件过大'
|
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.tip('文件上传中', 0)
|
||||||
vditor.disabled()
|
vditor.disabled()
|
||||||
const res = await fetch(
|
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()}` } },
|
{ headers: { Authorization: `Bearer ${getToken()}` } },
|
||||||
)
|
)
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
@@ -176,7 +123,7 @@ export function createVditor(editorId, options = {}) {
|
|||||||
return '获取上传地址失败'
|
return '获取上传地址失败'
|
||||||
}
|
}
|
||||||
const info = await res.json()
|
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) {
|
if (!put.ok) {
|
||||||
vditor.enable()
|
vditor.enable()
|
||||||
vditor.tip('上传失败')
|
vditor.tip('上传失败')
|
||||||
|
|||||||
@@ -1,11 +1,8 @@
|
|||||||
/**
|
/**
|
||||||
* 基于 FFmpeg.wasm 的视频压缩工具
|
* 视频上传工具
|
||||||
* 专为现代浏览器 (Chrome/Safari) 优化
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
|
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 const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO
|
||||||
@@ -18,7 +15,6 @@ export function checkFileSize(file) {
|
|||||||
isValid: file.size <= VIDEO_CONFIG.MAX_SIZE,
|
isValid: file.size <= VIDEO_CONFIG.MAX_SIZE,
|
||||||
actualSize: file.size,
|
actualSize: file.size,
|
||||||
maxSize: VIDEO_CONFIG.MAX_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))
|
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
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 }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user