vue视频会议录屏并保存mp4格式到本地

项目中，在视频会议中需要添加一个录屏功能

主要是利用new MediaRecorder()来实现屏幕录制功能。

// 录制屏幕
    async screenRecording () {
      // 提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）
      this._stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })
      // vue自带类，将获得的媒体流传入，mimeType录制的格式
      this._recorder = new MediaRecorder(this._stream, { mimeType: 'video/webm;codecs=h264' })
      this._recorder.ondataavailable = this.recorder_dataAvailablHandler.bind(this)
      // 开始录制
      this._recorder.start()
    },
    // 保存视频数据
    recorder_dataAvailablHandler (e) {
      // 将视频数据保存到currentWebmData
      this.currentWebmData.push(e.data)
    },
    // 停止录屏
    async recordingStop () {
      this._recorder.stop()
    },
    // 将blob数据转化为mp4格式，并保存到本地
    async recordingSave () {
      const blob = new Blob(this.currentWebmData, { type: 'video/mp4' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      document.body.appendChild(a)
      a.style.display = 'none'
      a.href = url
      // 设置下载文件名
      if (this.fileName) {
        a.download = this.fileName + '.mp4'
      } else {
        a.download = new Date() + '.mp4'
      }
      // 下载文件
      a.click()
      // 释放内存
      window.URL.revokeObjectURL(url)  
    },

展示效果

知识点总结

MediaRecorder 基本格式

let mediaRecorder = New MediaRecorder(stream, [options])

参数	说明
stream	媒体流，可以从getUserMedia video，audio，canvas 等获取
options	限制选项

options 限制选项

选项	说明
mimeType (指定录制的音频还是视频以及录制的格式)	1.vide/webm (或者video/mp4)等 2.audio/webm 3.video/webm;codecs=vp8 4.vide/webm;codecs=h264 5.audio/webm; codecs=opus
audioBitsPerSecond	音频码率
videoBitsPerSecond	视频码率（码率越高，清晰度越高）
bitsPerSecond	整体码率

MediaRecorder API

• MediaRecorder.start(timeslice)
  开始录制媒体，timeslice是可选的。
  如果设置了会按时间切片存储数据，若不设置，所有录制数据都会存储到一个大的Buffer中
• MediaRecorder.stop()
  停止录制，会触发包括最终Bolb数据的 detaavailable事件
• MediaRecorder.pause()
  暂停录制
• diaRecorder.resume()
  恢复录制
• diaRecorder.isTypeSupported()
  检查支持录制的文件格式

diaRecorder.start(timeslice),对于ondataavailable事件：如果指定了timeslice，则会每隔一段时间触发这个事件，然后对数据进行处理。如果没有指定timeslice，则会在视频录制完成，调用stop结束录制时去出发这个事件

MediaRecorder 事件

• diaRecorder.ondataavailable
  当数据有效时触发，可监听此事件，当数据有效，存储到缓冲区中，会传event和data，data为真正数据
  每次记录一定事件的数据时，会定期触发。没有指定时间片，则记录整个数据时触发
• diaRecorder.onerror
  当有错误发生时，录制会自动被停止

JavaScript 几种存储数据方式

• 字符串串
• blob
  十分高效的和存储区域，Buffer 可放到Blob，可将整个缓存区写入文件中
• arrayBuffer
  可通过 Blob对 Buffer做各种操作
• arrayBufferView
  各种各样的 Buffer，都可以做 Blob的参数

生成文件用 Blob，底层数据一般用 ArrayBuffer或 ArrayBufferView

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder