2

炸裂，用JS创建一个录屏功能

 2 years ago
source link: https://segmentfault.com/a/1190000040913284
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

炸裂，用JS创建一个录屏功能

发布于 11 月 11 日

作者：Lokender Singh
译者：前端小智
来源：dev

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

我们正在招聘，年薪：25-60万+奖金，有兴趣的可以点我了解详情。

OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。

首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下：

<!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>

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

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

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

在浏览器中打开 html文件，点击按钮，我们可以在控制台看到打印的 hello。

image.png

现在把打印去掉，换成如下的内容：

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

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

现在点击按钮，会弹出屏幕选择框：

image.png

因为，我现在用的是两个屏幕，所以会出现两个选择。

现在你可能认为选择一个屏幕，然后点击分享，就开始录制了。非也，这个比我们想象中的复杂点。我们要使用 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()
})

当我们的屏幕被录制下来时，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()
})

现在，当我们点击停止共享按钮时，希望在我们的 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()
})

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

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

现在，最基本的一个录制功能就完善了，动手来试试吧！！

~完，我是刷碗智，励志等退休后，要回家摆地摊的人，我们下期见！

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://dev.to/0shuvo0/lets-c...

文章每周持续更新，可以微信搜索【大迁世界 】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK