前端vue实现调取摄像功能实现视频上传(H5)

问题

活体实名认证，需要移动端H5上传视频，需求是只调取摄像头、文件格式为mp4格式

实现方案

HTML

<div>
    <span type="primary">
        <!--用label覆盖input-->
      <label class="wrapper btn" for="fileUpload">人像识别查验</label>
    </span>
    <input
      ref="uploadVideo"
      type="file"
      @change="handleChange" // change事件触发上传
      accept="video/*" // 设置模式为video，如果指定文件格式，就不能调取摄像头
      id="fileUpload"
      capture="camcorder"// 只调取摄像头
      style="position:absolute; clip:rect(0 0 0 0);left: 12%"
    />
  </div>

这个地方有个问题，iOS摄像头拍出来的视频是mov格式，前端很难转成MP4，可以让后端Java实现

js

const videoFormdata = new FormData()
<!--需要加参数就append就行-->
videoFormdata.append('video', this.$refs.uploadVideo.files[0])
uploadVideo(videoFormdata).then(res => {
    console.log(res)
    Toast.hide()
    Toast.succeed('活体查验成功！')
    this.$router.replace('/home')
 })