mirror of
https://github.com/nagisa77/OpenIsle.git
synced 2026-02-18 13:01:02 +08:00
Compare commits
11 Commits
codex/swit
...
codex/remo
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6497cb92af | ||
|
|
37bef0b2d7 | ||
|
|
3519a41a2e | ||
|
|
ab04a8b6b1 | ||
|
|
ea079e8b8a | ||
|
|
519656359f | ||
|
|
dc64785279 | ||
|
|
9421d004d4 | ||
|
|
90bd41e740 | ||
|
|
7d5c864f64 | ||
|
|
3f35add587 |
@@ -17,8 +17,3 @@ NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
|
|||||||
NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
|
NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
|
||||||
NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
|
NUXT_PUBLIC_TWITTER_CLIENT_ID=ZTRTU05KSk9KTTJrTTdrVC1tc1E6MTpjaQ
|
||||||
NUXT_PUBLIC_TELEGRAM_BOT_ID=8450237135
|
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 (字节)
|
|
||||||
@@ -5,7 +5,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="message-bottom-container">
|
<div class="message-bottom-container">
|
||||||
<div class="message-submit" :class="{ disabled: isDisabled }" @click="submit">
|
<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>
|
<template v-else> <loading-four /> 发送中... </template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -21,6 +24,8 @@ import {
|
|||||||
getEditorTheme as getEditorThemeUtil,
|
getEditorTheme as getEditorThemeUtil,
|
||||||
getPreviewTheme as getPreviewThemeUtil,
|
getPreviewTheme as getPreviewThemeUtil,
|
||||||
} from '~/utils/vditor'
|
} from '~/utils/vditor'
|
||||||
|
import { useIsMobile } from '~/utils/screen'
|
||||||
|
import { isMac } from '~/utils/device'
|
||||||
import '~/assets/global.css'
|
import '~/assets/global.css'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -44,6 +49,7 @@ export default {
|
|||||||
const vditorInstance = ref(null)
|
const vditorInstance = ref(null)
|
||||||
const text = ref('')
|
const text = ref('')
|
||||||
const editorId = ref(props.editorId)
|
const editorId = ref(props.editorId)
|
||||||
|
const isMobile = useIsMobile()
|
||||||
if (!editorId.value) {
|
if (!editorId.value) {
|
||||||
editorId.value = 'editor-' + useId()
|
editorId.value = 'editor-' + useId()
|
||||||
}
|
}
|
||||||
@@ -84,6 +90,28 @@ export default {
|
|||||||
applyTheme()
|
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(() => {
|
onUnmounted(() => {
|
||||||
@@ -121,7 +149,7 @@ export default {
|
|||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
||||||
return { submit, isDisabled, editorId }
|
return { submit, isDisabled, editorId, isMac, isMobile }
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -168,4 +196,17 @@ export default {
|
|||||||
.message-submit:not(.disabled):hover {
|
.message-submit:not(.disabled):hover {
|
||||||
background-color: var(--primary-color-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>
|
</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 = {
|
export const UPLOAD_CONFIG = {
|
||||||
// 视频文件配置 - 专为 FFmpeg.wasm 优化
|
// 视频文件配置
|
||||||
VIDEO: {
|
VIDEO: {
|
||||||
// 文件大小限制 (字节)
|
// 文件大小限制 (字节)
|
||||||
MAX_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_MAX_SIZE', 20 * 1024 * 1024), // 5MB
|
MAX_SIZE: 20 * 1024 * 1024,
|
||||||
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'],
|
SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],
|
||||||
|
|
||||||
// 输出格式 - MP4 (兼容性最好)
|
|
||||||
OUTPUT_FORMAT: 'mp4',
|
|
||||||
OUTPUT_CODEC: 'h264',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 图片文件配置
|
// 图片文件配置
|
||||||
|
|||||||
@@ -1,17 +1,5 @@
|
|||||||
import { defineNuxtConfig } from 'nuxt/config'
|
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>
|
|
||||||
}
|
|
||||||
const ffmpegVersion = (
|
|
||||||
process.env.NUXT_PUBLIC_FFMPEG_VERSION ||
|
|
||||||
appPkg.dependencies?.['@ffmpeg/ffmpeg'] ||
|
|
||||||
appPkg.devDependencies?.['@ffmpeg/ffmpeg'] ||
|
|
||||||
'0.12.15'
|
|
||||||
).replace(/^[^\d]*/, '')
|
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
devServer: {
|
devServer: {
|
||||||
host: '0.0.0.0',
|
host: '0.0.0.0',
|
||||||
@@ -29,7 +17,6 @@ export default defineNuxtConfig({
|
|||||||
discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
|
discordClientId: process.env.NUXT_PUBLIC_DISCORD_CLIENT_ID || '',
|
||||||
twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
|
twitterClientId: process.env.NUXT_PUBLIC_TWITTER_CLIENT_ID || '',
|
||||||
telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '',
|
telegramBotId: process.env.NUXT_PUBLIC_TELEGRAM_BOT_ID || '',
|
||||||
ffmpegVersion,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
css: [
|
css: [
|
||||||
@@ -110,26 +97,7 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
vite: {
|
vite: {
|
||||||
build: {
|
optimizeDeps: {},
|
||||||
// increase warning limit and split large libraries into separate chunks
|
build: {},
|
||||||
// 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'
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
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": {
|
"dependencies": {
|
||||||
"@icon-park/vue-next": "^1.4.2",
|
"@icon-park/vue-next": "^1.4.2",
|
||||||
"@ffmpeg/ffmpeg": "^0.12.15",
|
|
||||||
"@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,37 +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(() => {
|
|
||||||
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
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
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 { 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('视频压缩中...', 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