ffmpeg+vue2

一、安装依赖

javascript 复制代码
npm install @ffmpeg/core @ffmpeg/ffmpeg
"@ffmpeg/core": "^0.10.0",
"@ffmpeg/ffmpeg": "^0.10.1",

二、配置ffmpeg

安装好插件以后,需要配置一下代码,否则会报错:

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

javascript 复制代码
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

三、组件

javascript 复制代码
<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 = this
            if (e.target.files[0]) {
                var filename = e.target.files[0].name
                var filetype = e.target.files[0].type
 
                const videoUrl = _this.getObjectURL(e.target.files[0])
                const video = document.getElementById('video')
                video.src = videoUrl
 
                this.getVideoData().then((videoObj) => {
                    const file = e.target.files[0]
                    console.log('videoObj:', videoObj)
                    const { width, height } = videoObj
                    const 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}`
            // 实例化ffmpeg
            const ffmpeg = createFFmpeg({
                // ffmpeg路径
                corePath: 'ffmpeg-core.js',
                // 日志
                log: true,
                // 进度
                progress: ({ ratio }) => {
                    _this.msg = `完成率: ${(ratio * 100.0).toFixed(1)}%`
                }
            })
            var { name } = file
            this.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.mp4
            const 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
                    })
                })
            })
        },
        // 获取上传视频的url
        getObjectURL (file) {
            let url = null
            window.URL = window.URL || window.webkitURL
            if (window.URL) {
                url = window.URL.createObjectURL(file)
            } else {
                url = URL.createObjectURL(file)
            }
            return url
        },
        // 类型转换 blob 转换 file
        transToFile (data) {
            console.log(data)
            const _this = this
            var 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>
相关推荐
啵啵学习几秒前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
Mintopia7 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia7 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder23 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh29 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展
2401_8784545331 分钟前
thymeleaf的使用和小结
前端·javascript·学习
brzhang39 分钟前
宝藏发现:Sim Studio,一款让AI工作流搭建变简单的开源利器
前端·后端·github
2301_7994049139 分钟前
AJAX 介绍
前端·ajax·axios
拖孩1 小时前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js
好_快1 小时前
Lodash源码阅读-sortedUniqBy
前端·javascript·源码阅读