js录制屏幕并输出视频

借助navigator，需要注意的是navigator.mediaDevices.getDisplayMedia需要在https使用，若部署环境为http,则会导致navigator.mediaDevices.getDisplayMedia为undefined
参数中的name为输出视频的文件名
time为录制的时长，若时长为一秒则time值为1000

async startScreenRecording (name, time) {// 根据漫游时长 结束录制const timer = setTimeout(() => {this.stopRecording()clearTimeout(timer)}, time)const self = thisif (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {await navigator.mediaDevices.getDisplayMedia({ video: true }).then((screenStream) => {self.screenStream = screenStreamconst canvasStream = document.getElementsByTagName('canvas')[0].captureStream()self.combinedStream = new MediaStream([...canvasStream.getVideoTracks(), ...screenStream.getAudioTracks()])self.mediaRecorder = new MediaRecorder(self.combinedStream, { mimeType: 'video/webm' })//// 获取录制的媒体资源const recordedChunks = []self.mediaRecorder.ondataavailable = (event) => {if (event.data.size > 0) {recordedChunks.push(event.data)}}self.mediaRecorder.onstop = () => {const videoBlob = new Blob(recordedChunks, { type: 'video/mp4' })// video/mp4 video/webm 下载mp4类型const videoUrl = URL.createObjectURL(videoBlob)// console.log('测试videoUrl', videoUrl)// self.$refs.video.src = videoUrlconst a = document.createElement('a')a.href = videoUrla.download = namea.click()a.remove()}self.mediaRecorder.start()self.recording = true}).catch(err => {this.$message({message: '无法访问屏幕内容：',type: 'warning'})console.error('无法访问屏幕内容：', err)})} else {this.$message({message: '浏览器不支持捕获屏幕内容',type: 'warning'})// this.imgToVideo()}// getDisplayMedia 获取屏幕媒体流},stopRecording () {this.mediaRecorder.stop()this.recording = falsethis.screenStream.getTracks().forEach((track) => track.stop())},

在http中可使用的录屏

canvasToVideo (name, time) {const timer = setTimeout(() => {this.mediaRecorder1.stop()this.recording = falseclearTimeout(timer)}, time)try {// 使用 html2canvas 将页面转换为画布// const stream = html2canvas(document.body).then((canvas) => {//   canvas.id = 'myCanvas' // 为画布设置一个 ID，以便稍后在 MediaRecorder API 中使用//   document.body.appendChild(canvas) // 将画布添加到页面中//   return canvas.captureStream() // 捕获画布的媒体内容// })const stream = document.getElementsByTagName('canvas')[0].captureStream()this.recordedBlobs = [] // 清空已录制的数据this.mediaRecorder1 = new MediaRecorder(stream) // 创建 MediaRecorder 实例this.mediaRecorder1.ondataavailable = (event) => {if (event.data && event.data.size > 0) {this.recordedBlobs.push(event.data) // 将录制的数据添加到数组中}}this.mediaRecorder1.start() // 开始录制this.recording = true// 当录制停止时，生成并下载录屏文件this.mediaRecorder1.onstop = () => {//创建一个新的 Blob 对象，包含所有录制的数据const videoBlob = new Blob(this.recordedBlobs, { type: 'video/mp4' })// video/mp4 video/webm 下载mp4类型const videoUrl = URL.createObjectURL(videoBlob)const a = document.createElement('a')a.href = videoUrla.download = namea.click()a.remove()}} catch (error) {console.error('Error:', error) // 如果发生错误，打印错误信息到控制台}},```