mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-07 07:30:54 +08:00
Compare commits
11 Commits
feature/ff
...
codex/remo
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6497cb92af | ||
|
|
37bef0b2d7 | ||
|
|
3519a41a2e | ||
|
|
ab04a8b6b1 | ||
|
|
ea079e8b8a | ||
|
|
519656359f | ||
|
|
dc64785279 | ||
|
|
9421d004d4 | ||
|
|
90bd41e740 | ||
|
|
7d5c864f64 | ||
|
|
3f35add587 |
@@ -10,8 +10,3 @@ NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liOlrZnPKRF7s7NN
|
||||
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 # 20MB (字节)
|
||||
NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520 # 5MB (字节)
|
||||
@@ -17,8 +17,3 @@ 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 # 20MB (字节)
|
||||
NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520 # 5MB (字节)
|
||||
@@ -15,8 +15,3 @@ 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 # 20MB (字节)
|
||||
NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520 # 5MB (字节)
|
||||
@@ -5,7 +5,10 @@
|
||||
</div>
|
||||
<div class="message-bottom-container">
|
||||
<div class="message-submit" :class="{ disabled: isDisabled }" @click="submit">
|
||||
<template v-if="!loading"> 发送 </template>
|
||||
<template v-if="!loading">
|
||||
发送
|
||||
<span class="shortcut-icon" v-if="!isMobile"> {{ isMac ? '⌘' : 'Ctrl' }} ⏎ </span>
|
||||
</template>
|
||||
<template v-else> <loading-four /> 发送中... </template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -21,6 +24,8 @@ import {
|
||||
getEditorTheme as getEditorThemeUtil,
|
||||
getPreviewTheme as getPreviewThemeUtil,
|
||||
} from '~/utils/vditor'
|
||||
import { useIsMobile } from '~/utils/screen'
|
||||
import { isMac } from '~/utils/device'
|
||||
import '~/assets/global.css'
|
||||
|
||||
export default {
|
||||
@@ -44,6 +49,7 @@ export default {
|
||||
const vditorInstance = ref(null)
|
||||
const text = ref('')
|
||||
const editorId = ref(props.editorId)
|
||||
const isMobile = useIsMobile()
|
||||
if (!editorId.value) {
|
||||
editorId.value = 'editor-' + useId()
|
||||
}
|
||||
@@ -84,6 +90,28 @@ export default {
|
||||
applyTheme()
|
||||
},
|
||||
})
|
||||
|
||||
// 不是手机的情况下不添加快捷键
|
||||
if (!isMobile.value) {
|
||||
// 添加快捷键监听 (Ctrl+Enter 或 Cmd+Enter)
|
||||
const handleKeydown = (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
submit()
|
||||
}
|
||||
}
|
||||
|
||||
const el = document.getElementById(editorId.value)
|
||||
if (el) {
|
||||
el.addEventListener('keydown', handleKeydown)
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
if (el) {
|
||||
el.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
@@ -121,7 +149,7 @@ export default {
|
||||
},
|
||||
)
|
||||
|
||||
return { submit, isDisabled, editorId }
|
||||
return { submit, isDisabled, editorId, isMac, isMobile }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -168,4 +196,17 @@ export default {
|
||||
.message-submit:not(.disabled):hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
/** 评论按钮快捷键样式 */
|
||||
.shortcut-icon {
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.comment-submit.disabled .shortcut-icon {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,62 +1,15 @@
|
||||
/**
|
||||
* 文件上传配置 - 简化版
|
||||
* 专注于 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
|
||||
MAX_SIZE: 20 * 1024 * 1024,
|
||||
|
||||
// 支持的输入格式 (FFmpeg.wasm 支持更多格式)
|
||||
// 支持的输入格式
|
||||
SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
|
||||
|
||||
// 输出格式 - MP4 (兼容性最好)
|
||||
OUTPUT_FORMAT: 'mp4',
|
||||
OUTPUT_CODEC: 'h264',
|
||||
},
|
||||
|
||||
// 图片文件配置
|
||||
|
||||
@@ -1,11 +1,4 @@
|
||||
import { defineNuxtConfig } from 'nuxt/config'
|
||||
import { createRequire } from 'node:module'
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
const appPkg = require('./package.json') as {
|
||||
dependencies?: Record<string, string>
|
||||
devDependencies?: Record<string, string>
|
||||
}
|
||||
|
||||
export default defineNuxtConfig({
|
||||
devServer: {
|
||||
@@ -104,26 +97,7 @@ export default defineNuxtConfig({
|
||||
},
|
||||
},
|
||||
vite: {
|
||||
build: {
|
||||
// increase warning limit and split large libraries into separate chunks
|
||||
// chunkSizeWarningLimit: 1024,
|
||||
// rollupOptions: {
|
||||
// output: {
|
||||
// manualChunks(id) {
|
||||
// if (id.includes('node_modules')) {
|
||||
// if (id.includes('vditor')) {
|
||||
// return 'vditor'
|
||||
// }
|
||||
// if (id.includes('echarts')) {
|
||||
// return 'echarts'
|
||||
// }
|
||||
// if (id.includes('highlight.js')) {
|
||||
// return 'highlight'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
optimizeDeps: {},
|
||||
build: {},
|
||||
},
|
||||
})
|
||||
|
||||
2436
frontend_nuxt/package-lock.json
generated
2436
frontend_nuxt/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,8 +13,6 @@
|
||||
},
|
||||
"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",
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import { FFmpeg } from '@ffmpeg/ffmpeg'
|
||||
import { toBlobURL } from '@ffmpeg/util'
|
||||
import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app'
|
||||
|
||||
let ffmpeg: FFmpeg | null = null
|
||||
|
||||
export default defineNuxtPlugin(() => {
|
||||
return {
|
||||
provide: {
|
||||
ffmpeg: async () => {
|
||||
if (ffmpeg) return ffmpeg
|
||||
ffmpeg = new FFmpeg()
|
||||
const base = '~/assets/js/ffmpeg/core-mt/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
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
28
frontend_nuxt/utils/device.js
Normal file
28
frontend_nuxt/utils/device.js
Normal file
@@ -0,0 +1,28 @@
|
||||
export const isClient = typeof window !== 'undefined' && typeof document !== 'undefined'
|
||||
|
||||
export const isMac = getIsMac()
|
||||
|
||||
function getIsMac() {
|
||||
if (!isClient) {
|
||||
return false
|
||||
}
|
||||
|
||||
try {
|
||||
// 优先使用现代浏览器的 navigator.userAgentData API
|
||||
if (navigator.userAgentData && navigator.userAgentData.platform) {
|
||||
return navigator.userAgentData.platform === 'macOS'
|
||||
}
|
||||
|
||||
// 降级到传统的 User-Agent 检测
|
||||
if (navigator.userAgent) {
|
||||
return /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent)
|
||||
}
|
||||
|
||||
// 默认返回false
|
||||
return false
|
||||
} catch (error) {
|
||||
// 异常处理,记录错误并返回默认值
|
||||
console.warn('检测Mac设备时发生错误:', error)
|
||||
return false
|
||||
}
|
||||
}
|
||||
@@ -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 { 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('视频压缩中...', 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('上传失败')
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user