关于前端实现录制功能

本文可以说是一篇调研学习文，是我自己感觉可行的一套方案，后续会去读读已经开源的一些类似的代码库，补足自己遗漏的一些细节，所以大家可以当作学习文，生产环境慎用。

录屏重现错误场景

如果你的应用有接入到web apm系统中，那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误，给出错误栈，帮助你定位到BUG。但是，有些时候，当你不知道用户的具体操作时，是没有办法重现这个错误的，这时候，如果有操作录屏，你就可以清楚地了解到用户的操作路径，从而复现这个BUG并且修复。（本次先录制，下次再回放）

一、先来看看音频可视化的实现思路：

思路

需要将音频文件解码成二进制流文件，这个流文件即为音频资源buffer播放源，之后需要将buffer播放源与分析器相连，分析器与扬声器相连；
audioContext.destination：返回AudioDestinationNode对象，表示当前audio context中所有节点的最终节点，一般表示音频渲染设备。

二、录制视频的实现

简单了解了音频可视化以后咱们就来研究一下录屏的实现。

关于录屏和摄像对比了两种方法：

• 使用HTML5的api实现
  摄像：mediaDevices（获取设备）+ getUserMedia（获取流） + MediaRecorder（存储）
  录屏：getDisplayMedia（获取流） + MediaRecorder（存储）
• ffmpeg + node：FFmpeg是一套非常强大的音视频处理的开源工具，不多介绍，而Electron基于node和chromium，它允许使用node的API以及几乎所有的node模块，这意味这着我们可以调用cmd命令来操作ffmpeg实现录屏和摄像录制，当然ffmpeg功能绝不止这点。

HTML5实现

mediaDevices

• 用于收集系统上可用的多媒体输入和输出设备的信息
• 该方法调用成功返回设备列表，并传入带有devceID的MediaStreamConstraints对象可以指定设备获取流媒体来源

  navigator.mediaDevices.enumerateDevices().then(devicelist => {
   
    // audiooutput 扬声器