给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: 毕业设计——基于SpringBoot的水... 下一篇:OutOfMemoryException异常解析

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

发布时间：2022-07-02 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

副标题：iREC 一款基于浏览器JavaScript的屏幕录制工具

背景

周末，公司里的测试小妹给我发消息说，她昨晚又加班到很晚，原因是研发要求提复杂bug时需要附上具体的操作流程以便详细了解操作过程和复现。最好能提供一个录制视频，这不是难为我们测试小妹嘛？随后她问我有没有好用，免费的录制屏幕的软件。我答应帮她找找。看到这里你可能以为这是一篇软件推荐文章，但其实这是一篇造轮子的文章，经过一番搜索，我发现大多数的录屏软件，不是比较笨重，就是有些需要付费，或者无法跨平台使用。于是我想能不能自己开发一个录屏工具，这个想法一旦产生就无法停止，在造轮子之前我需要简单整理一下需求范围，以便挑选合适的工具来实现。

需求如下

实现一个录屏工具或软件，能够录制整个屏幕，最低要求是能够录制浏览器的操作。该软件有一个开始录制的按钮，点击后开始录制，按钮变成停止按钮，再次点击按钮，录制完成，并将录制的文件下载下来。这是一个最小的需求，如果要扩张的话，需要增减暂停录制，继续录制，输入自定义的文件名，定制视频格式，清晰度，是否录制声音。这些要求都是核心需求之外的。可以后续考虑。

需求了解清楚了，接下来就是寻找合适的工具或编程语言来实现。

技术 调研

首先我想到的是JavaScript,因为JavaScript 是世界上最好的编程语言 😂。马克斯的火箭操作面板就是使用JavaScript写的， Lens–Kubernets IDE 也是使用JavaScript写的。于是我决定先在JavaScript方向上尝试实现这个工具。在经过几番的搜索与请教一些做专业人士后，最终我在JavaScript 的BOM编程中找到了这个对象Navigator.mediaDevices。 mediaDevices 是 Navigator 只读属性，返回一个 MediaDevices 对象，该对象可提供对相机和麦克风等媒体输入设备的连接访问，也包括屏幕共享。经过一番的尝试与搜索我得出：在浏览器上使用JavaScript做录屏功能使用的主要API是navigator.mediaDevices.getDisplayMedia() 与 MediaRecorder 对象。下面进行一一拆分讲解。 navigator 下的MediaDevices有以下几个主要接口：

navigator.mediaDevices.enumerateDevices() 该方法返回一个promise，包含了系统中可用的媒体输入和输出设备的一系列信息。
navigator.mediaDevices.getDisplayMedia() 该方法返回一个PRomise，并提示用户选择显示器或显示器的一部分（例如窗口）以捕获为MediaStream 以便共享或记录。直接在浏览器控制台输入该方法即可调取授权窗口。
navigator.mediaDevices.getUserMedia()返回一个promise，在用户通过提示允许的情况下，打开系统上的相机或屏幕共享和/或麦克风，并提供 MediaStream 包含视频轨道和/或音频轨道的输入。

本次使用的API就是 navigator.mediaDevices.getDisplayMedia()。该方法可以配置一个参数，可以省略。我们可以直接将这段代码复制到浏览器控制台中运行。运行效果如下图

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

图1：运行navigator.mediaDevices.getDisplayMedia() 效果图选中对应的窗体或屏幕，点击分享就可以了。在这个页面，你鼠标的移动，页签的切换都会实时地反应在上面。由于是目前查看的是当前屏幕，所有会有一个无限嵌套的效果。点击分享后，在屏幕的下方会有一个如下的标识

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

图2：屏幕分享tab信息

并且在启动分享的tab上有一个红色的标识

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

图3：屏幕分享tab标识

点击了分享之后，我们的系统就发起了一个分享，当这个分享活动创建后，就会生成一个 MediaStream 翻译成中文就是媒体流。它是一个媒体内容的流.。一个流包含几个_轨道_，比如视频和音频轨道。这个MediaStream可以直接使用 htML中的video 标签显示出具体的内容。

于是一个清晰的思路就出现了。首先调用API navigator.mediaDevices.getUserMedia() 回去一个媒体流，然后使用一个video来显示这个媒体流。伪代码如下

mediaStream = await navigator.mediaDevices.getDisplayMedia()
document.querySelector("video").srcObject = mediaStream

这里需要注意一个细节，要显示媒体流的内容我们必须将媒体流设置在video的srcObject 属性上。 video的src与 srcObject二个属性的区别在与， src是静态的地址。srcObject是一个实时数据，媒体流。思路很清晰。接下来我们进行详细的编码。

编码

@H_283_126@开始分享屏幕

首先创建一个html，加入一个按钮，点击按钮进行分享屏幕。并在该页面上显示分享的内容。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <tITle>测试web屏幕分享</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.COM@1.0.17/dist/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    html,
    body {
      height: 100%;
      background-color: #fff;
    }

    .container {
      height: 100%;
      border: 1px solid #ddd;
      padding: 20px;
    }

    .pre-start-view {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .living-view {
      display: none;
    }

    .video-container {
      display: flex;
      justify-content: center;
      align-content: center;
    }

    #j_video {
      width: 800px;
      height: 500px;
    }

    .video-BTns {
      margin-top: 16px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="pre-start-view">
      <button type="button" class="btn btn-Primary" id="j_start">Start</button>
    </div>
    <div class="living-view">
      <div class="video-container">
        <video autoplay playsinline id="j_video"></video>
      </div>
    </div>
  </div>
</body>
<script>

  const videoplay = document.querySelector("#j_video")

  async function getMediaStream(stream) {
    videoplay.srcObject = stream
    window.$stream = stream
  }

  function handleError() {
    console.error('getUserMedia error : ', err)
  }

  async function startCapture(displayMediaOptions) {
    let captureStream = null;
    try {
      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    } catch (err) {
      console.error("Error: " + err);
    }
    return captureStream;
  }

  async function start() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
      console.LOG('getUserMedia is not supported')
    } else {
      const displayMediaOptions = {
        video: true,
        audio: false,
      }

      let captureStream = await startCapture(displayMediaOptions)
      await getMediaStream(captureStream)

      document.querySelector(".pre-start-view").style.display = "none"
      document.querySelector(".living-view").style.display = "block"
    }
  }

  function init() {
    document.querySelector("#j_start").addEventListener('click', start)
    document.querySelector("#j_record").addEventListener("click", record)
  }

  init()
</script>

</html>

分享当前屏幕并显示分享内容效果如下

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

图4：分享内容预览到这里我们就已经完成了创建分享，查看分享。但要实现一个完整的录制功能，还缺少关键性的两步，就是录制，下载。

录制下载

于是我们在视频下面添加一个Record 按钮。点击开始录制，然后按钮变成Stop，点击后，停止录制，然后下载一个以当前时间命名的视频文件。

这里的录制应该是开始截取媒体流中的一部分，最后做成视频文件下载。查阅文档后得知，要截取媒体流需要使用MediaRecorder 对象。 MediaRecorder() 构造函数会创建一个对指定的 MediaStream 进行录制的 MediaRecorder 对象。该构造函数接受二个参数，一是媒体流MediaStream，第二个参数是配置参数，指定将媒体流转化为什么格式的内容，如mp4，音频的比特率，视频的比特率。创建的MediaRecorder 对象可以对录制过程，进行管理，开始，暂停，停止，此外MediaRecorder 对象还有一些事件处理方法。

MediaRecorder.ondataavailable 调用它用来处理 dataavailable 事件, 该事件可用于获取录制的媒体资源 (在事件的 data 属性中会提供一个可用的 Blob 对象)
MediaRecorder.onstart 用来处理 start 事件, 该事件在媒体开始录制时触发
MediaRecorder.onpause用来处理 pause (en-US) 事件, 该事件在媒体暂停录制时触发
MediaRecorder.onstop 用来处理 stop 事件, 该事件会在媒体录制结束时、媒体流（;mediaStream）结束时、或者调用MediaRecorder.stop()方法后触发.

我们在创建MediaRecorder对象后，需要监听它的ondataavailable事件，并将事件中的Blob数据存储起来。最终将存储起来的数据转化为一个视频文件，然后下载。

最终完整的html代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>测试web屏幕分享</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.17/dist/css/bootstrap.min.css" rel="stylesheet">
  <style type="text/css">
    html,
    body {
      height: 100%;
      background-color: #fff;
    }

    .container {
      height: 100%;
      border: 1px solid #ddd;
      padding: 20px;
    }

    .pre-start-view {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .living-view {
      display: none;
    }

    .video-container {
      display: flex;
      justify-content: center;
      align-content: center;
    }

    #j_video {
      width: 800px;
      height: 500px;
    }

    .video-btns {
      margin-top: 16px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="pre-start-view">
      <button type="button" class="btn btn-primary" id="j_start">Start</button>
    </div>
    <div class="living-view">
      <div class="video-container">
        <video autoplay playsinline id="j_video"></video>
      </div>
      <p class="video-btns">
        <button type="button" class="btn btn-primary" id="j_record">Record</button>
      </p>
    </div>
  </div>
</body>
<script>

  const videoplay = document.querySelector("#j_video")
  let videoBuffer = []
  let mediaRecorder
  let recording = false

  async function getMediaStream(stream) {
    videoplay.srcObject = stream
    window.$stream = stream
  }

  function handleError() {
    console.error('getUserMedia error : ', err)
  }

  async function startCapture(displayMediaOptions) {
    let captureStream = null;
    try {
      captureStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    } catch (err) {
      console.error("Error: " + err);
    }
    return captureStream;
  }

  async function start() {
    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
      console.log('getUserMedia is not supported')
    } else {
      const displayMediaOptions = {
        video: true,
        audio: false,
      }

      let captureStream = await startCapture(displayMediaOptions)
      await getMediaStream(captureStream)
      document.querySelector(".pre-start-view").style.display = "none"
      document.querySelector(".living-view").style.display = "block"
    }

  }

  function handleDataAvailable(e) {
    if (e && e.data &amp;& e.data.size > 0) {
      videoBuffer.push(e.data)
    }
  }

  async function record(even) {
    let $target = even.target
    if (recording) {
      stopRecord()
      $target.innerText = 'Record'
    } else {
      startRecord()
      $target.innerText = 'Stop'
    }
  }

  function startRecord() {
    videoBuffer = []
    const options = {
      mimeType: 'video/webm; codecs = vp8',
    }

    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
      console.error('${options.mimeType} is not supported!')
      return
    }

    try {
      mediaRecorder = new MediaRecorder(window.$stream, options)
    } catch (e) {
      console.error('Failed to create MediaRecorder:', e)
      return
    }
    mediaRecorder.ondataavailable = handleDataAvailable
    mediaRecorder.start(10)
    recording = true
  }

  function stopRecord() {
    mediaRecorder.stop()
    recording = false
    downRecord()
  }

  // 下载录制
  function downRecord() {
    const blob = new Blob(videoBuffer, { type: 'video/webm' })
    const url = window.URL.createObjectURL(blob)
    const a = document.createElement('a')
    const fileName = new Date().toLocaleString()
    a.href = url
    a.style.display = 'none'
    a.download = `@H_305_2304@${fileName}.webm`
    a.click()
  }

  function init() {
    document.querySelector("#j_start").addEventListener('click', start)
    document.querySelector("#j_record").addEventListener("click", record)
  }

  init()

</script>

</html>

经过加工改造，编写了一个js脚本，使用tampermonkey管理。直接将录制按钮注入到页面上，不会使用tampermonkey的，也可以直接在控制台执行脚本。最后我将该工具的名字命名为 iREC。 完整工具脚本私信我获取。

后续

周一我把做好的录制脚本发给了测试小妹。在使用过一段时间后，有人在内部群里给我发了一条这样的消息。

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

哈哈，本故事纯属虚构，如有雷同纯属巧合。希望大家都能把学到的技术转化为生产力。提升生活品质。猿力与你同在。

脚本宝典总结

以上是脚本宝典为你收集整理的给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我全部内容，希望文章能够帮你解决给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：bug cap java javascript list load load php python String 参数参数工具工具开发开发文档文档程序员程序员资源资源

上一篇: 毕业设计——基于SpringBoot的水... 下一篇:OutOfMemoryException异常解析

猜你在找的心得技巧相关文章

clion结合vcpkg以及GTest的使用 2022-07-07
EGF 2022-06-06
ExtJS 布局-Column布局（Column layout） 2022-06-05
颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
rootfs -根文件系统制作 2022-07-07
网页简单布局之结构与表现原则分享 2022-04-15
小项目中怎么防止Vue的闪现画面效果 2022-04-15
隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
告别硬编码让你的前端表格自动计算的实例代码 2022-04-15

全站导航更多

给测试小妹做了一个js版屏幕录制工具iREC，她用后竟说喜欢我

背景

需求如下

技术调研

编码

录制下载

最终完整的html代码

后续

相关链接

脚本宝典总结