当前位置：首页 > news >正文

ffmpeg+vue2

news 2025/6/21 14:05:02

一、安装依赖

npm install @ffmpeg/core @ffmpeg/ffmpeg
"@ffmpeg/core": "^0.10.0",
"@ffmpeg/ffmpeg": "^0.10.1",

二、配置ffmpeg
安装好插件以后，需要配置一下代码，否则会报错：

1、在vue.config.js文件中配置请求头

devServer: {headers: {'Cross-Origin-Opener-Policy': 'same-origin','Cross-Origin-Embedder-Policy': 'require-corp'}
}

在页面中实例化ffmpeg的时候可能会报找不到模块儿的错误，最好将下载好的插件文件放到public文件夹里面就可以了 createFFmpegCore is not defined

node_modules@ffmpeg\core\dist中的三个文件复制到vue项目的public下
ffmpeg-core.js
ffmpeg-core.wasm
ffmpeg-core.worker.js

三、组件

<template><div class="video-box"><video id="video" controls object-fill="fill"></video><br /><input id="upload" type="file" accept="video/mp4" capture="camcorder" @change="upload"></div>
</template><script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg'
export default {data () {return {msg: '',videoWidth: '',videoHeight: '',duration: ''}},methods: {// 选择文件async upload (e) {console.log('start', e)console.log('start', e.target.files[0])var _this = thisif (e.target.files[0]) {var filename = e.target.files[0].namevar filetype = e.target.files[0].typeconst videoUrl = _this.getObjectURL(e.target.files[0])const video = document.getElementById('video')video.src = videoUrlthis.getVideoData().then((videoObj) => {const file = e.target.files[0]console.log('videoObj:', videoObj)const { width, height } = videoObjconst result = _this.squeezVideo(file, filename, filetype, width, height, _this.msg)result.then(res => {console.log('resultFile', res)})})}},// 压缩视频async squeezVideo (file, filename, filetype, width, height) {console.log('squeezingVideo file name:  ', file.name)console.log('squeezingVideo file type:  ', file.type)console.log('squeezingVideo file path:  ', file.path)console.log('squeezingVideo file size:  ', file.size)console.log('squeezingVideo file lastModified:  ', file.lastModified)console.log('squeezingVideo file lastModifiedDate:  ', file.lastModifiedDate)const _this = this// 分辨率const resolution = `${width / 2}x${height / 2}`// 实例化ffmpegconst ffmpeg = createFFmpeg({// ffmpeg路径corePath: 'ffmpeg-core.js',// 日志log: true,// 进度progress: ({ ratio }) => {_this.msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`}})var { name } = filethis.msg = '正在加载 ffmpeg-core.js'// 开始加载await ffmpeg.load()this.msg = '开始压缩'// 把文件加到ffmpeg   写文件ffmpeg.FS('writeFile', name, await fetchFile(file))// await ffmpeg.run('-i', name, '-b', '2000000', '-fs', '4194304', '-preset medium', 'superfast', 'put.mp4')// 开始压缩视频await ffmpeg.run('-i', name, '-b', '2000000', '-crf', '23', '-fs', '4194304', '-s', resolution, 'put.mp4')this.msg = '压缩完成'// 压缩所完成，   读文件  压缩后的文件名称为 put.mp4const data = ffmpeg.FS('readFile', 'put.mp4')// 转换压缩后的视频格式  当前为 blob 格式var filed = _this.transToFile(data)console.log('transToFile: ', filed)return new Promise((resolve, reject) => {if (filed) {resolve({squzingFile: filed})}})},// 获取视频的宽高分辨率getVideoData () {return new Promise((resolve, reject) => {const videoElement = document.getElementById('video')videoElement.addEventListener('loadedmetadata', function () {resolve({width: this.videoWidth,height: this.videoHeight,duration: this.duration})})})},// 获取上传视频的urlgetObjectURL (file) {let url = nullwindow.URL = window.URL || window.webkitURLif (window.URL) {url = window.URL.createObjectURL(file)} else {url = URL.createObjectURL(file)}return url},// 类型转换 blob 转换 filetransToFile (data) {console.log(data)const _this = thisvar file = []// 转换bolb类型const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })// 这么写是因为文件转换是异步任务const transToFile = async (blob, fileName, fileType) => {return new window.File([blob], fileName, { type: fileType })}const textContain = transToFile(blob, 'put.mp4', 'video/mp4')// 转换完成后可以将file对象传给接口textContain.then((res) => {file.push(res)console.log('res', res)// _this.confirm(file)return file})}}
}
</script>