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 = 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())
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

在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) // 如果发生错误，打印错误信息到控制台
      }
    },```

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42