如何使用JS实现一个录屏功能_js 录像没有时长

作者：从前慢现在也慢 | 2024-08-04 14:04:53

踩

js 录像没有时长

码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。

在这里插入图片描述

带大家用JavaScript实现一个录屏功能。OBS studio很好用，但JavaScript也一样好用，现在，我们用JavaScript实现自己的录屏功能

首先，创建一个HTML文件，包含录制按钮和一个video组件。

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <video class="video" width="600px" controls></video>
    <button class="record-btn">录制</button>

    <script src="./index.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

然后在创建index.js，监听按钮的点击。

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", function () {
  console.log("hello");
});
1
2
3
4
5

在浏览器中打开html文件，点击按钮，我们可以在控制台看到打印的 hello。
在这里插入图片描述
现在把打印去掉，换成如下的内容。

let btn = document.querySelector(".record-btn");

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  });
});
1
2
3
4
5
6
7

现在点击按钮，会弹出屏幕选择框：
在这里插入图片描述
因为，这里用的是两个屏幕，所以会出现两个选择。

现在你可能认为选择一个屏幕，然后点击分享，就开始录制了。非也，这个比我们想象中的复杂点。我们要用MediaRecorder来录制我们的视频。

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的浏览器支持
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })
    // 必须手动启动
    mediaRecorder.start()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

当我们的屏幕被录制下来时，mediaRecorder 会给我们提供分块的数据，我们需要将这些数据存储在一个变量中。

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的浏览器支持
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

    // 必须手动启动
    mediaRecorder.start()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

现在，当我们点击停止共享按钮时，希望在我们的video元素中播放录制的视频，可以这么做：

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的浏览器支持
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

     mediaRecorder.addEventListener('stop', function(){
          let blob = new Blob(chunks, {
              type: chunks[0].type
          })

          let video = document.querySelector(".video")
          video.src = URL.createObjectURL(blob)
      })


    // 必须手动启动
    mediaRecorder.start()
})
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

现在基本就可以完成了，可以在润色下，如自动下载录制的视频，可以这么做：

let btn = document.querySelector(".record-btn")

btn.addEventListener("click", async function () {
  let stream = await navigator.mediaDevices.getDisplayMedia({
    video: true
  })

  // 需要更好的浏览器支持
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    let chunks = []
    mediaRecorder.addEventListener('dataavailable', function(e) {
        chunks.push(e.data)
    })

   mediaRecorder.addEventListener('stop', function(){
      let blob = new Blob(chunks, {
          type: chunks[0].type
      })
      let url = URL.createObjectURL(blob)

      let video = document.querySelector("video")
      video.src = url

      let a = document.createElement('a')
      a.href = url
      a.download = 'video.webm'
      a.click()
  })


    // 必须手动启动
    mediaRecorder.start()
})
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

在这里插入图片描述

有微信小程序课设、毕设需求联系个人QQ：505417246

关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢

关注公众号后，回复前端面试题，领取大量前端面试题汇总pdf资料
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/928148