Burst, use JS to create a screen recording function

Author: Lokender Singh
Translator: Frontend Xiaozhi
Source: dev

There are dreams and dry goods. WeChat search [Moving to the World] Follow this brushing wisdom who is still doing dishes in the early morning.
This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

We are hiring, annual salary: 250,000-600,000 + bonus, if you are interested, please click me for details.

OBS studio is cool, but JavaScript is even cooler. Now, we use JavaScript to create our own screen recording function.

First, create an HTML file that contains a record button and a play tag. The content is as follows:

<!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">record</button>

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

Then create index.js to monitor the click of the button:

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

btn.addEventListener("click", function () {
  console.log("hello");
});

Open the html file in the browser, click the button, we can see the printed hello on the console.

Now remove the printing and replace it with the following:

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

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

Now click on the button, a screen selection box will pop up:

Because I am using two screens now, there will be two choices.

Now you may think that you select a screen, then click to share, and it will start recording. No, this is more complicated than we thought. We want to use MediaRecorder to record our 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
    })
    // 必须手动启动
    mediaRecorder.start()
})

When our screen is recorded, mediaRecorder will provide us with chunked data, and we need to store these data in a variable.

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()
})

Now, when we click the stop sharing button, we want video element, we can do this:

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()
})

Now it’s basically done. You can edit it, such as automatically download the recorded video, you can do this:

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()
})

Now, the most basic recording function is complete, let's try it out! !

~End, I am Shuwanzhi, Inspirational, who will go home to set up a street stall after retirement. See you in the next issue!

code is deployed, the possible bugs cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dev.to/0shuvo0/lets-create-a-screen-recorder-with-js-3leb

comminicate

The article is continuously updated every week, you can search on [Daily Move to the World] Read it for the first time, reply [Benefit] are many front-end videos waiting for you, this article GitHub https://github.com/qq449245884/xiaozhi has been included, welcome to Star.

Burst, use JS to create a screen recording function

comminicate

王大冶

引用和评论

为什么我喜欢在 CSS 中使用 RegEx

100个React最佳实践小技巧

前端如何入门 Go 语言

Javascript(turfjs)等值线图绘制

2024最全ECharts 实战大全（速记版+资源）

Jerry和您聊聊Chrome开发者工具

解决 videojs 播放视频进度条下方左侧当前播放时长一直为 0 的问题