《vue3视频上传并压缩方法》
开头解决方案
在Vue3项目中,实现视频上传并压缩可以通过多种方式。一种常见的思路是借助第三方库,如Video.js和ffmpeg.js等来处理视频的读取、压缩,然后通过表单提交或axios发送请求到服务器进行上传;另一种思路是利用浏览器原生的MediaRecorder API对视频进行处理后再上传。
一、使用ffmpeg.js进行视频压缩上传
在项目中安装ffmpeg.js依赖:
javascript
npm install ffmpeg.js --save
然后在组件中编写代码如下:
```vue
import { ref } from 'vue'
import createFFmpeg from '@ffmpeg/ffmpeg'
const ffmpeg = createFFmpeg({ log: true })
const file = ref(null)
const handleFileChange = (e) => {
file.value = e.target.files[0]
}
const uploadAndCompress = async () => {
if (!file.value) return
await ffmpeg.load()
ffmpeg.FS('writeFile', 'input.mp4', await fileToArrayBuffer(file.value))
await ffmpeg.run('-i', 'input.mp4', '-vf', 'scale= -1:720', '-b:v', '500k', 'output.mp4')
const data = ffmpeg.FS('readFile', 'output.mp4')
const compressedFile = new File([data.buffer], 'compressed.mp4', { type: 'video/mp4' })
// 这里可以使用axios等工具将compressedFile上传到服务器
}
const fileToArrayBuffer = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = function () {
resolve(this.result)
}
reader.onerror = reject
reader.readAsArrayBuffer(file)
})
}
</p>
<h2>二、基于MediaRecorder API</h2>
<p>这种方式不需要引入额外的大型库。先创建一个用于选择文件的元素,获取视频文件后,将其加载到<video>元素中。
```vue
<div>
<button>开始录制(压缩)</button>
<button>停止录制(完成压缩)</button>
</div>
</p>
import { ref } from 'vue'
const mediaStream = ref(null)
const chunks = ref([])
const video = ref(null)
const handleFileChange = (e) => {
const selectedFile = e.target.files[0]
if (selectedFile.type.startsWith('video/')) {
const fileReader = new FileReader()
fileReader.onload = function (event) {
video.value = event.target.result
const videoElement = document.createElement('video')
videoElement.src = video.value
videoElement.play().then(() => {
navigator.mediaDevices.getUserMedia({
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: videoElement.captureStream ? videoElement.captureStream() : videoElement.mozCaptureStream ? videoElement.mozCaptureStream() : ''
}
}
}).then(stream => {
mediaStream.value = stream
})
})
}
fileReader.readAsDataURL(selectedFile)
}
}
const startRecording = () => {
const options = { mimeType: 'video/webm; codecs=vp9' }
const mediaRecorder = new MediaRecorder(mediaStream.value, options)
mediaRecorder.ondataavailable = function (event) {
chunks.value.push(event.data)
}
mediaRecorder.start()
}
const stopRecording = () => {
const blob = new Blob(chunks.value, { type: 'video/webm' })
const compressedFile = new File([blob], 'compressed.webm', { type: 'video/webm' })
// 可以上传compressedFile到服务器
}
<p>
需要注意的是,上述两种方法都存在一定的局限性。使用ffmpeg.js可能会面临性能问题,并且在某些环境下兼容性不佳;而MediaRecorder API只能生成webm格式的视频,而且不同浏览器的支持程度也有所差异。所以在实际项目中要根据需求权衡选择合适的方法。