vue3视频上传并压缩方法


Image

《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格式的视频,而且不同浏览器的支持程度也有所差异。所以在实际项目中要根据需求权衡选择合适的方法。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载