fix: remove config

frontend_nuxt/.env.example

@@ -16,9 +16,4 @@ NUXT_PUBLIC_GOOGLE_CLIENT_ID=777830451304-nt8afkkap18gui4f9entcha99unal744.apps.
 NUXT_PUBLIC_GITHUB_CLIENT_ID=Ov23liVkO1NPAX5JyWxJ
 NUXT_PUBLIC_DISCORD_CLIENT_ID=1394985417044000779
 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 (字节)

frontend_nuxt/config/uploadConfig.js

@@ -1,57 +1,17 @@
 /**
  * 文件上传配置 - 简化版
- * 专注于 FFmpeg.wasm 视频压缩，支持 Chrome/Safari
+ * 专注于 WebCodecs + MP4Box.js 视频压缩，支持 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: 20 * 1024 * 1024, // 20mb
-    MAX_SIZE: getEnvNumber('NUXT_PUBLIC_VIDEO_MAX_SIZE', 20 * 1024 * 1024), // 5MB
+    TARGET_SIZE: 5 * 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 (兼容性最好)

frontend_nuxt/nuxt.config.ts

@@ -1,17 +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>
-}
-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',
@@ -29,7 +16,6 @@ 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: [

frontend_nuxt/package-lock.json

@@ -6,8 +6,6 @@
     "": {
       "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",
@@ -21,6 +19,7 @@
         "ldrs": "^1.0.0",
         "markdown-it": "^14.1.0",
         "mermaid": "^10.9.4",
+        "mp4box": "^2.1.1",
         "nanoid": "^5.1.5",
         "nprogress": "^0.2.0",
         "nuxt": "latest",
@@ -999,36 +998,6 @@
       "integrity": "sha512-m9FVDXU3GT2ITSe0UaMA5rU3QkfC/UXtCU8y0gSN/GugTqtVldOBWIB5V6V3sbmenVZUIpU6f+mPEO2+m5iTaA==",
       "license": "MIT"
     },
-    "node_modules/@ffmpeg/ffmpeg": {
-      "version": "0.12.15",
-      "resolved": "https://registry.npmmirror.com/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz",
-      "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==",
-      "license": "MIT",
-      "dependencies": {
-        "@ffmpeg/types": "^0.12.4"
-      },
-      "engines": {
-        "node": ">=18.x"
-      }
-    },
-    "node_modules/@ffmpeg/types": {
-      "version": "0.12.4",
-      "resolved": "https://registry.npmmirror.com/@ffmpeg/types/-/types-0.12.4.tgz",
-      "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16.x"
-      }
-    },
-    "node_modules/@ffmpeg/util": {
-      "version": "0.12.2",
-      "resolved": "https://registry.npmmirror.com/@ffmpeg/util/-/util-0.12.2.tgz",
-      "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18.x"
-      }
-    },
     "node_modules/@icon-park/vue-next": {
       "version": "1.4.2",
       "resolved": "https://registry.npmmirror.com/@icon-park/vue-next/-/vue-next-1.4.2.tgz",
@@ -10172,6 +10141,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/mp4box": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/mp4box/-/mp4box-2.1.1.tgz",
+      "integrity": "sha512-gttYFNmlCjredsdnxqNC6ho0bx6zEwOqAwSKZNQXtsBqvSN1CjtzlTLY9Kfhvt14Co8Iu+qMuOOpnPIRjvvFtw==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=20.8.1"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

frontend_nuxt/package.json

@@ -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",
@@ -27,6 +25,7 @@
     "ldrs": "^1.0.0",
     "markdown-it": "^14.1.0",
     "mermaid": "^10.9.4",
+    "mp4box": "^2.1.1",
     "nanoid": "^5.1.5",
     "nprogress": "^0.2.0",
     "nuxt": "latest",

frontend_nuxt/plugins/ffmpeg.client.ts

@@ -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
-      },
-    },
-  }
-})

frontend_nuxt/utils/ffmpegVideoCompressor.js

@@ -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)
-  }
-}

frontend_nuxt/utils/vditor.js

@@ -121,10 +121,10 @@ export function createVditor(editorId, options = {}) {
             vditor.tip('视频压缩中...', 0)
             vditor.disabled()
 
-            // 使用 FFmpeg 压缩视频
+            // 使用 WebCodecs 压缩视频
             processedFile = await compressVideo(file, (progress) => {
               const messages = {
-                initializing: '初始化 FFmpeg',
+                initializing: '初始化编码器',
                 preparing: '准备压缩',
                 analyzing: '分析视频',
                 compressing: '压缩中',

frontend_nuxt/utils/videoCompressor.js

@@ -1,11 +1,10 @@
 /**
- * 基于 FFmpeg.wasm 的视频压缩工具
+ * 基于 WebCodecs + MP4Box.js 的视频压缩工具
  * 专为现代浏览器 (Chrome/Safari) 优化
  */
 
 import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
-import { compressVideoWithFFmpeg, isFFmpegSupported } from './ffmpegVideoCompressor.js'
+import { compressVideoWithWebCodecs, isWebCodecSupported } from './webcodecVideoCompressor.js'
-import { useNuxtApp } from '#app'
 
 // 导出配置供外部使用
 export const VIDEO_CONFIG = UPLOAD_CONFIG.VIDEO
@@ -34,7 +33,7 @@ export function formatFileSize(bytes) {
 }
 
 /**
- * 压缩视频文件 - 使用 FFmpeg.wasm
+ * 压缩视频文件 - 使用 WebCodecs
  */
 export async function compressVideo(file, onProgress = () => {}) {
   // 检查是否需要压缩
@@ -44,36 +43,30 @@ export async function compressVideo(file, onProgress = () => {}) {
     return file
   }
 
-  // 检查 FFmpeg 支持
+  // 检查 WebCodecs 支持
-  if (!isFFmpegSupported()) {
+  if (!isWebCodecSupported()) {
-    throw new Error('当前浏览器不支持视频压缩功能，请使用 Chrome 或 Safari 浏览器')
+    throw new Error('当前浏览器不支持视频压缩功能，请使用支持 WebCodecs 的浏览器')
   }
 
   try {
-    const { $ffmpeg } = useNuxtApp()
+    return await compressVideoWithWebCodecs(file, { onProgress })
-    const ff = await $ffmpeg()
-    return await compressVideoWithFFmpeg(ff, file, { onProgress })
   } catch (error) {
-    console.error('FFmpeg 压缩失败:', error)
+    console.error('WebCodecs 压缩失败:', error)
     throw new Error(`视频压缩失败: ${error.message}`)
   }
 }
 
 /**
- * 预加载 FFmpeg（可选的性能优化）
+ * 预加载 WebCodecs（可选的性能优化）
  */
 export async function preloadVideoCompressor() {
   try {
-    // FFmpeg 初始化现在通过 Nuxt 插件处理
+    if (!isWebCodecSupported()) {
-    // 这里只需要检查支持性
+      throw new Error('当前浏览器不支持 WebCodecs')
-    if (!isFFmpegSupported()) {
-      throw new Error('当前浏览器不支持 FFmpeg')
     }
-    const { $ffmpeg } = useNuxtApp()
+    return { success: true, message: 'WebCodecs 已就绪' }
-    await $ffmpeg()
-    return { success: true, message: 'FFmpeg 预加载成功' }
   } catch (error) {
-    console.warn('FFmpeg 预加载失败:', error)
+    console.warn('WebCodecs 检测失败:', error)
     return { success: false, error: error.message }
   }
 }

frontend_nuxt/utils/webcodecVideoCompressor.js

@@ -0,0 +1,98 @@
+import MP4Box from 'mp4box'
+
+// 检查 WebCodecs 支持
+export function isWebCodecSupported() {
+  return typeof window !== 'undefined' && typeof window.VideoEncoder !== 'undefined'
+}
+
+// 使用 WebCodecs + MP4Box.js 压缩视频
+export async function compressVideoWithWebCodecs(file, opts = {}) {
+  const { onProgress = () => {}, width = 720, bitrate = 1_000_000 } = opts
+
+  if (!isWebCodecSupported()) {
+    throw new Error('当前浏览器不支持 WebCodecs')
+  }
+
+  onProgress({ stage: 'initializing', progress: 0 })
+
+  // 加载原始视频
+  const url = URL.createObjectURL(file)
+  const video = document.createElement('video')
+  video.src = url
+  video.muted = true
+  await video.play().catch(() => {})
+  video.pause()
+  await new Promise((resolve) => {
+    if (video.readyState >= 2) resolve()
+    else video.onloadedmetadata = () => resolve()
+  })
+
+  const targetWidth = width
+  const targetHeight = Math.round((video.videoHeight / video.videoWidth) * width)
+  const canvas = document.createElement('canvas')
+  canvas.width = targetWidth
+  canvas.height = targetHeight
+  const ctx = canvas.getContext('2d')
+
+  const chunks = []
+  const encoder = new VideoEncoder({
+    output: (chunk) => {
+      chunks.push(chunk)
+    },
+    error: (e) => {
+      throw e
+    },
+  })
+  encoder.configure({
+    codec: 'avc1.42001E',
+    width: targetWidth,
+    height: targetHeight,
+    bitrate,
+    framerate: 30,
+  })
+
+  const duration = video.duration
+  const frameCount = Math.floor(duration * 30)
+  for (let i = 0; i < frameCount; i++) {
+    video.currentTime = i / 30
+    await new Promise((res) => (video.onseeked = res))
+    ctx.drawImage(video, 0, 0, targetWidth, targetHeight)
+    const bitmap = await createImageBitmap(canvas)
+    const frame = new VideoFrame(bitmap, { timestamp: (i / 30) * 1000000 })
+    encoder.encode(frame)
+    frame.close()
+    bitmap.close()
+    onProgress({ stage: 'compressing', progress: Math.round(((i + 1) / frameCount) * 80) })
+  }
+
+  await encoder.flush()
+  onProgress({ stage: 'finalizing', progress: 90 })
+
+  const mp4box = MP4Box.createFile()
+  const track = mp4box.addTrack({
+    timescale: 1000,
+    width: targetWidth,
+    height: targetHeight,
+  })
+
+  let dts = 0
+  chunks.forEach((chunk) => {
+    const data = new Uint8Array(chunk.byteLength)
+    chunk.copyTo(data)
+    mp4box.addSample(track, data.buffer, {
+      duration: chunk.duration ? chunk.duration / 1000 : 33,
+      dts,
+      cts: dts,
+      is_sync: chunk.type === 'key',
+    })
+    dts += chunk.duration ? chunk.duration / 1000 : 33
+  })
+
+  const arrayBuffer = mp4box.flush()
+  const outputFile = new File([arrayBuffer], file.name.replace(/\.[^.]+$/, '.mp4'), {
+    type: 'video/mp4',
+  })
+  onProgress({ stage: 'completed', progress: 100 })
+  URL.revokeObjectURL(url)
+  return outputFile
+}