web端录制视频并保存本地

前期准备

npm i recordrtc
import RecordRTC from 'recordrtc'

因为用到了elementUI所以各位还需在main.js引入使用elementUI

npm i element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

我们开始吧

然后给页面加上一个video标签,这是贴上自己的结构

<template>
  <div class="about">
    <el-avatar
      shape="square"
      :size="70"
      :src="squareUrl"
      class="avatar"
    ></el-avatar>
    <div class="message">你看起来不开心,是遇到什么事情了吗?</div>
    <video
      playsinline
      src=""
      class="myCamera"
      id="myCamera"
      ref="myCamera"
    ></video>
    <div class="starting" @click="starting" v-if="isStart">
      <i class="iconfont icon-luzhi"></i>
      <!--此处可换成图片或者按钮-->
    </div>
    <div class="stopping" v-else @click="stopping">
      <i class="iconfont icon-tingzhi"></i>
      <!--此处可换成图片或者按钮-->
    </div>
    <el-button round size="mini" class="outVideo">退出</el-button>
    <el-button round size="mini" class="nextQuestion">跳过</el-button>
  </div>
</template>

再然后就是逻辑了,首先在mounted加载完成之后开启摄像头

mounted () {
    // 进入页面dom数后,开启摄像头
    // 这是定义是否启用音频,视频
    var constraints = {
      audio: true,
      video: { width: this.CurrentWidth, height: this.CurrentHeight }
      // 这是设置视频的宽度高度,我给的值是页面大小
    }
    // 这就开始调用设备摄像头了
    // mediaStream是媒体流,我们在录制是需要带上
    <!--// RecordRTC(MediaStream || HTMLCanvasElement ||     HTMLVideoElement || HTMLElement, {});-->
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(mediaStream => {
        console.log('开启摄像头')
        // var video = document.querySelector('myCamera')
        this.video = this.$refs.myCamera
        this.video.srcObject = mediaStream
        this.recorder = RecordRTC(mediaStream)
        this.video.onloadedmetadata = e => {
          this.video.play()
        }
      })
      .catch(function (err) {
        console.log(err.name + ': ' + err.message)
      })
  }

摄像头开启成功我们开始录制吧

// 开始录制
starting () {
      this.isStart = false
      this.recorder.startRecording()
    },
// 结束录制并自动保存至本地
stopping () {
    this.isStart = true
    this.recorder.stopRecording(() => {
    console.log(this.video.src)
    const downloadLink = document.createElement('a') 
    downloadLink.href = URL.createObjectURL(this.recorder.getBlob())
    // 下面是定义文件名字
    downloadLink.download = `${new Date().getTime()}`
    // 点击a标签
    downloadLink.click()
    })
}

参考

developer.mozilla.org/en-US/docs/…

recordrtc.org/