fix: 评论后--需要刷新帖子内容 #939

Feature/ffmpeg load

frontend_nuxt/.env.example

@@ -16,4 +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

frontend_nuxt/assets/global.css

@@ -356,7 +356,7 @@ body {
   }
 
   .d2h-file-name {
-    font-size: 12px !important;
+    font-size: 14px !important;
   }
 
   .d2h-file-header {
@@ -371,14 +371,14 @@ body {
     padding-left: 10px !important;
   }
 
-  .d2h-diff-table {
+  /* .d2h-diff-table {
     font-size: 6px !important;
   }
 
   .d2h-code-line ins {
     height: 100%;
     font-size: 13px !important;
-  }
+  } */
 
   /* .d2h-code-line {
     height: 12px;

frontend_nuxt/components/MessageEditor.vue

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

frontend_nuxt/config/uploadConfig.js

@@ -1,17 +1,16 @@
 /**
  * 文件上传配置 - 简化版
- * 专注于 WebCodecs + MP4Box.js 视频压缩，支持 Chrome/Safari
+ * 专注于 FFmpeg.wasm 视频压缩，支持 Chrome/Safari
  */
 
-// 声明全局变量以避免 TypeScript 错误
-/* global useRuntimeConfig */
-
 export const UPLOAD_CONFIG = {
+  // 视频文件配置 - 专为 FFmpeg.wasm 优化
   VIDEO: {
-    MAX_SIZE: 20 * 1024 * 1024, // 20mb
+    // 文件大小限制 (字节)
-    TARGET_SIZE: 5 * 1024 * 1024, // 5mb
+    MAX_SIZE: 20 * 1024 * 1024,
+    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,4 +1,5 @@
 import { defineNuxtConfig } from 'nuxt/config'
+
 export default defineNuxtConfig({
   devServer: {
     host: '0.0.0.0',
@@ -96,26 +97,9 @@ export default defineNuxtConfig({
     },
   },
   vite: {
-    build: {
+    optimizeDeps: {
-      // increase warning limit and split large libraries into separate chunks
+      exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
-      // 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'
-      //         }
-      //       }
-      //     },
-      //   },
-      // },
     },
+    build: {},
   },
 })

frontend_nuxt/package.json

@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
+    "@ffmpeg/ffmpeg": "^0.12.2",
+    "@ffmpeg/util": "^0.12.2",
     "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",
     "cropperjs": "^1.6.2",
@@ -25,7 +27,6 @@
     "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/pages/posts/[id]/index.vue

@@ -445,7 +445,7 @@ const handleContentClick = (e) => {
 
 const onCommentDeleted = (id) => {
   removeCommentFromList(Number(id), comments.value)
-  fetchComments()
+  fetchTimeline()
 }
 
 const {
@@ -557,7 +557,7 @@ const postComment = async (parentUserName, text, clear) => {
     if (res.ok) {
       const data = await res.json()
       console.debug('Post comment response data', data)
-      await fetchComments()
+      await fetchTimeline()
       clear()
       if (data.reward && data.reward > 0) {
         toast.success(`评论成功，获得 ${data.reward} 经验值`)
@@ -612,7 +612,7 @@ const approvePost = async () => {
     status.value = 'PUBLISHED'
     toast.success('已通过审核')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -628,7 +628,7 @@ const pinPost = async () => {
   if (res.ok) {
     toast.success('已置顶')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -644,7 +644,7 @@ const unpinPost = async () => {
   if (res.ok) {
     toast.success('已取消置顶')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -660,7 +660,7 @@ const excludeRss = async () => {
   if (res.ok) {
     rssExcluded.value = true
     toast.success('已标记为rss不推荐')
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -676,7 +676,8 @@ const includeRss = async () => {
   if (res.ok) {
     rssExcluded.value = false
     toast.success('已标记为rss推荐')
-    await fetchChangeLogs()
+    await refreshPost()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -693,7 +694,7 @@ const closePost = async () => {
     closed.value = true
     toast.success('已关闭')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -710,7 +711,7 @@ const reopenPost = async () => {
     closed.value = false
     toast.success('已重新打开')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }
@@ -755,7 +756,7 @@ const rejectPost = async () => {
     status.value = 'REJECTED'
     toast.success('已驳回')
     await refreshPost()
-    await fetchChangeLogs()
+    await fetchTimeline()
   } else {
     toast.error('操作失败')
   }

frontend_nuxt/plugins/ffmpeg.client.ts

@@ -0,0 +1,25 @@
+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
+      },
+    },
+  }
+})

frontend_nuxt/utils/device.js

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

frontend_nuxt/utils/ffmpegVideoCompressor.js

@@ -0,0 +1,327 @@
+/**
+ * FFmpeg.wasm 视频压缩器
+ *
+ * 用法：
+ *   const { $ffmpeg } = useNuxtApp()
+ *   const ff = await $ffmpeg() // 插件里已完成 ffmpeg.load()
+ *   const out = await compressVideoWithFFmpeg(ff, file, { onProgress, strictSize: false })
+ *
+ * 设计要点：
+ *  - 本文件不再负责加载/初始化，只负责转码逻辑；和 Nuxt 插件解耦。
+ *  - 针对【同一个 ffmpeg 实例】做串行队列，避免并发 exec 踩内存文件系统。
+ *  - 使用 nanoid 生成唯一文件名；日志环形缓冲；默认 CRF+VBV，可选 strictSize（two-pass）。
+ *  - 体积明显小于目标时直通返回，减少无谓重编码。
+ */
+
+import { fetchFile } from '@ffmpeg/util'
+import { nanoid } from 'nanoid'
+import { UPLOAD_CONFIG } from '../config/uploadConfig.js'
+
+/*************************
+ * 每实例一个串行队列     *
+ *************************/
+// 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

@@ -118,13 +118,13 @@ export function createVditor(editorId, options = {}) {
         // 如果是视频文件且需要压缩
         if (isVideo && sizeCheck.needsCompression) {
           try {
-            vditor.tip('视频压缩中...', 0)
+            vditor.tip('开始部署ffmpeg环境... 请稍等', 0)
             vditor.disabled()
 
-            // 使用 WebCodecs 压缩视频
+            // 使用 FFmpeg 压缩视频
             processedFile = await compressVideo(file, (progress) => {
               const messages = {
-                initializing: '初始化编码器',
+                initializing: '初始化 FFmpeg',
                 preparing: '准备压缩',
                 analyzing: '分析视频',
                 compressing: '压缩中',

frontend_nuxt/utils/videoCompressor.js

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

frontend_nuxt/utils/webcodecVideoCompressor.js

@@ -1,98 +0,0 @@
-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
-}