乐趣区

关于前端:炸裂用JS创建一个录屏功能

jiezi

作者：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。

当初把打印去掉，换成如下的内容：

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

  // 须要更好的浏览器反对
  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。

退出移动版