Merge pull request #975 from nagisa77/feature/ffmpeg_load

Feature/ffmpeg load

frontend_nuxt/.env.example

@@ -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  # 50MB (字节)
-NUXT_PUBLIC_VIDEO_TARGET_SIZE=20971520  # 20MB (字节)

frontend_nuxt/config/uploadConfig.js

@@ -3,53 +3,12 @@
  * 专注于 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,
+    TARGET_SIZE: 5 * 1024 * 1024, // 5MB
 
     // 支持的输入格式 (FFmpeg.wasm 支持更多格式)
     SUPPORTED_FORMATS: ['mp4', 'webm', 'avi', 'mov', 'wmv', 'flv', 'mkv', 'm4v', 'ogv'],

frontend_nuxt/nuxt.config.ts

@@ -1,17 +1,5 @@
 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 +17,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: [
@@ -110,26 +97,9 @@ 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: {
+      exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
     },
+    build: {},
   },
 })

frontend_nuxt/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@icon-park/vue-next": "^1.4.2",
-    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/ffmpeg": "^0.12.2",
     "@ffmpeg/util": "^0.12.2",
     "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",

frontend_nuxt/plugins/ffmpeg.client.ts

@@ -1,33 +1,21 @@
 import { FFmpeg } from '@ffmpeg/ffmpeg'
 import { toBlobURL } from '@ffmpeg/util'
-import { defineNuxtPlugin, useRuntimeConfig } from 'nuxt/app'
+import { defineNuxtPlugin } 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`
-
+        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(`${base}/ffmpeg-core.worker.js`, 'text/javascript'),
+          workerURL: await toBlobURL(`${libBase}/worker.js`, 'text/javascript'),
         })
 
         return ffmpeg

frontend_nuxt/utils/vditor.js

@@ -118,7 +118,7 @@ export function createVditor(editorId, options = {}) {
         // 如果是视频文件且需要压缩
         if (isVideo && sizeCheck.needsCompression) {
           try {
-            vditor.tip('视频压缩中...', 0)
+            vditor.tip('开始部署ffmpeg环境... 请稍等', 0)
             vditor.disabled()
 
             // 使用 FFmpeg 压缩视频