vue3使用FFmpeg

在 Vue3 项目中集成 FFmpeg 进行音视频处理，可以通过以下几种方式实现： ### 1. 使用 `ffmpeg.wasm` 实现浏览器端处理 `ffmpeg.wasm` 是 FFmpeg 的 WebAssembly 版本封装，可以在浏览器中直接运行，无需依赖后端服务。它非常适合用于小型音视频处理任务，例如剪辑、转码、提取音频等。 #### 安装依赖 ```bash npm install @ffmpeg/ffmpeg @ffmpeg/core ``` #### 在 Vue3 组件中使用 ```javascript import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'; const ffmpeg = createFFmpeg({ log: true }); const loadFFmpeg = async () => { await ffmpeg.load(); }; const convertVideoToMp4 = async (file) => { if (!ffmpeg.isLoaded()) await loadFFmpeg(); ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file)); await ffmpeg.run('-i', 'input.mp4', '-c:v', 'libx264', 'output.mp4'); const data = ffmpeg.FS('readFile', 'output.mp4'); const videoBlob = new Blob([data.buffer], { type: 'video/mp4' }); const videoUrl = URL.createObjectURL(videoBlob); return videoUrl; }; ``` ### 2. 使用 Node.js 后端调用 FFmpeg 如果处理任务较为复杂或需要高性能支持，建议将 FFmpeg 作为后端服务运行，前端通过 HTTP 接口上传文件并获取处理结果。 #### 后端（Node.js + Express 示例） ```javascript const express = require('express'); const { exec } = require('child_process'); const app = express(); const fs = require('fs'); const path = require('path'); app.post('/convert', (req, res) => { const inputPath = path.join(__dirname, 'uploads', 'input.mp4'); const outputPath = path.join(__dirname, 'outputs', 'output.mp4'); exec(`ffmpeg -i ${inputPath} -c:v libx264 ${outputPath}`, (error, stdout, stderr) => { if (error) return res.status(500).send(error.message); res.download(outputPath); }); }); ``` #### 前端（Vue3 调用示例） ```javascript const convertVideo = async () => { const formData = new FormData(); formData.append('video', selectedFile); const response = await axios.post('/api/convert', formData, { responseType: 'blob' }); const url = URL.createObjectURL(new Blob([response.data])); videoElement.value.src = url; }; ``` ### 3. 使用 WebSocket 传输视频流并处理 对于实时视频流处理（如 RTSP 转 FLV 或 HLS），可以结合 WebSocket 实现前后端的实时通信，并通过 `flv.js` 或 `hls.js` 在前端播放。 #### 前端使用 `flv.js` 播放视频流 ```javascript import flvjs from 'flv.js'; if (flvjs.isSupported()) { const videoElement = document.getElementById('videoElement'); const flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'ws://your-websocket-url', }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } ``` #### 后端推送 FLV 流 后端可以使用 FFmpeg 将 RTSP 流转换为 FLV，并通过 WebSocket 发送至前端。 ```bash ffmpeg -i rtsp://camera-url -f flv - | wsServer.sendStream() ``` ### 4. 使用 Nginx 配合 HLS 实现视频播放 如果需要支持移动端播放，可将视频切片为 M3U8 格式，并通过 Nginx 提供静态资源服务。 #### FFmpeg 转换为 M3U8 ```bash ffmpeg -i input.mp4 -codec:v h264 -codec:a aac -hls_time 10 -hls_list_size 0 -f hls output.m3u8 ``` #### 前端使用 `hls.js` 播放 ```javascript import Hls from 'hls.js'; const video = document.getElementById('video'); if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource('http://your-nginx-server/output.m3u8'); hls.attachMedia(video); } ``` ##