react实现ffmpeg压缩图片和视频

在React中，直接利用FFmpeg库进行图片和视频的压缩操作可能会有些复杂，因为FFmpeg主要是用于命令行处理，而React是一个前端JavaScript框架。不过，你可以通过Node.js作为中间层，将FFmpeg命令行集成到服务器端处理，然后返回压缩后的文件给前端。

以下是一种基本步骤：

1. 安装必要的包：
- 在项目目录下安装`child_process`模块（Node.js内置），用于执行系统命令。
- 如果需要处理视频，可以使用`fluent-ffmpeg`这个Node.js FFmpeg封装库，安装命令如下：

     npm install fluent-ffmpeg

2. 创建一个服务器端API（例如在Node.js express应用中）：

   const ffmpeg = require('fluent-ffmpeg');
   
   app.post('/compress', async (req, res) => {
     try {
       // 图片压缩
       if (req.body.type === 'image') {
         // 假设你接收到了Base64编码的图片数据
         const imageData = req.body.data;
         // 使用第三方库如sharp进行压缩
         const compressedImage = await sharp(imageData)
           .resize(800) // 设置新尺寸
           .toBuffer(); // 转换回Buffer

         res.send({ compressedData: compressedImage.toString('base64') });
       }
       
       // 视频压缩
       else if (req.body.type === 'video') {
         const videoPath = req.file.path; // 假设从上传的文件中获取到视频路径
         const compressedVideo = await ffmpeg(videoPath)
           .setDuration(15) // 设置输出长度
           .on('end', () => {
             res.sendFile(path.resolve(compressedVideo.filename)); // 返回压缩后的文件
           })
           .save(); // 开始压缩
       } catch (error) {
         console.error(error);
         res.status(500).send('Compression failed');
       }
     } catch (error) {
       console.error(error);
       res.status(500).send('Invalid request or error processing');
     }
   });

3. 在React前端发起请求：
当用户选择图片或视频上传时，你可以发送POST请求到上述API地址，传递图片或视频的数据以及类型信息。