使用 Vanilla JS 的简单屏幕录像机

让我们开始吧

在本博客中，您将学习如何创建一个屏幕录像机，它不仅可以录制浏览器屏幕。是的，它不仅可以录制当前标签页，还可以根据需要录制整个屏幕。
首先，我们将创建一个HTML文件，其中包含一个录制按钮和一个视频元素，您可以在其中播放录制的视频。

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

    <script src="./index.js"></script>
  </body>
</html>

我们还需要一个JavaScript文件。让我们创建一个文件并将其命名为index.js。

注意：您可以使用任何其他名称来命名您的js文件，但请确保在HTML文件中正确引用该名称。

let btn = document.querySelector(".record-btn");
btn.addEventListener("click", function () {
  console.log("hello");
});

在JS文件中，输入上述代码。hello打开浏览器时，应该会打印出这个单词。好了，现在console.log我们来获取流显示，而不是

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

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

现在，单击按钮后，您将看到以下屏幕：

现在我们可以选择录制视频的方式了，接下来我们进入主要实现部分，也就是如何实际录制视频。我们将使用MediaRecorder来录制视频。

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

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

  //needed for better browser support
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") 
             ? "video/webm; codecs=vp9" 
             : "video/webm"
    let mediaRecorder = new MediaRecorder(stream, {
        mimeType: mime
    })

    //we have to start the recorder manually
    mediaRecorder.start()
})

在录制时，我们现在需要将获取的数据存储mediaRecorder在变量中。

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

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

  //needed for better browser support
  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)
    })

    //we have to start the recorder manually
    mediaRecorder.start()
})

让我们在录制完成后在视频元素中添加播放视频的代码

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

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

  //needed for better browser support
  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)
  })

    //we have to start the recorder manually
    mediaRecorder.start()
})

好了，快完成了。现在我们来做一些最后的润色，让视频在录制停止后自动下载。

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

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

  //needed for better browser support
  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()
  })

    //we have to start the recorder manually
    mediaRecorder.start()
})

我们终于完成了，希望它对你有用。

感谢您的时间，别忘了和我做朋友：

文章来源：https://dev.to/seths10/simple-screen-recorder-with-vanilla-js-532c