项目中，在视频会议中需要添加一个录屏功能
主要是利用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