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