ffmpeg安装 vue

### 在 Vue 项目中安装配置 FFmpeg

#### 使用 NPM 或 Yarn 安装依赖
为了在 Vue 项目中集成 `@ffmpeg/ffmpeg` 和其核心库，可以采用如下命令来安装所需的 npm 包：

对于最新版本的安装，推荐使用特定版本号以确保兼容性：

yarn add @ffmpeg/ffmpeg@0.10.0
yarn add @ffmpeg/core@0.10.0

如果遇到任何错误消息，则可能是因为网络连接问题或是所选版本不匹配当前项目的构建工具链。

#### 设置 Vite 开发环境下的导入方式
当利用 Vite 构建系统时，由于模块解析机制的不同，直接引入可能会导致找不到资源的问题。因此建议按照以下方法指定完整的路径来进行加载[^1]：

// main.js or setup file of your project
import { createFFmpeg } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({
    corePath: '/absolute/path/to/node_modules/@ffmpeg/core/dist/ffmpeg-core.js',
});

请注意，在实际部署之前应该调整此绝对路径至相对路径形式以便更好地适应不同的运行环境。

#### 对于基于 Webpack 的 Vue CLI 项目
如果是基于 Webpack 的 Vue CLI 创建的应用程序，可以直接通过 ES6 模块语法简单地引入而无需额外设置特殊路径[^2]：

import * as FFmpeg from "@ffmpeg/ffmpeg";
const ffmpegInstanceFactory = () => {
    return new FFmpeg({
        /* configuration options */
        log: true,
    });
};

另外需要注意的是，应当把 `@ffmpeg/core` 中的内容复制到公共目录（如 `/public/lib/ffmpeg/`），从而使得前端能够访问这些静态资源文件。

#### 处理视频的操作示例
一旦成功集成了上述组件之后就可以开始编写用于操作多媒体数据的功能逻辑了。下面给出了一段简单的代码片段用来展示怎样读取本地上传的一段 MP4 文件并将其转换为一系列 JPEG 图像[^4]:

<template>
  <div id="app">
    <!-- File input element -->
    <input type="file" accept="video/*" v-on:change="handleFileChange"/>
    
    <!-- Display processed images here... -->
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: "App",
  
  methods:{
      async handleFileChange(event:Event){
          let inputFile = (event.target as HTMLInputElement).files![0];
          
          await this.loadFfmpeg();
          await this.processVideo(inputFile);
      },
      
      loadFfmpeg(){
           // Initialize and configure the ffmpeg instance...
      },

      processVideo(videoBlob: Blob){
            const ffmpeg = getPreconfiguredFfmpegInstance();

            ffmpeg.FS('writeFile', 'input.mp4', await videoBlob.arrayBuffer());

            await ffmpeg.run('-i', 'input.mp4','-vf','fps=1', '-vsync', 'vfr', 'output_%03d.jpg');
            
            console.log(`Generated ${ffmpeg.FS('readdir', '/')}`);
       }
   }
})
</script>

这段代码展示了如何监听文件输入框的变化事件，并调用相应的函数去初始化 FFMPEG 实例以及执行具体的音视频编解码任务。