借助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 = this
if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
await navigator.mediaDevices.getDisplayMedia({ video: true })
.then((screenStream) => {
self.screenStream = screenStream
const 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 = videoUrl
const a = document.createElement('a')
a.href = videoUrl
a.download = name
a.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 = false
this.screenStream.getTracks().forEach((track) => track.stop())
},
在http中可使用的录屏
canvasToVideo (name, time) {
const timer = setTimeout(() => {
this.mediaRecorder1.stop()
this.recording = false
clearTimeout(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 = videoUrl
a.download = name
a.click()
a.remove()
}
} catch (error) {
console.error('Error:', error) // 如果发生错误,打印错误信息到控制台
}
},```