我用HTML做了个屏幕录像大师，同事都夸我很棒
一、前言
屏幕录制软件想必大家都用过，原理其实很简单，就是把电脑上面的画面逐帧捕获下来然后连接在一起，使得我们看见的不再是一幅静态的画面，而是动态的画面，平时我们录制屏幕都是用的电脑软件或者APP，不仅繁琐，而且内存占用不少，并且打开还比较慢，于是，就有了今天这个作品的产生，我们只需要点击一下网页即可实现轻松录屏。
二、用到的技术
为了实现屏幕录制功能，我们需要用到相关函数getDisplayMedia和MediaRecorder，首先来说下getDisplayMedia，它的用法如下：
navigator.mediaDevices.getDisplayMedia（constraints）
const constraints = {
audio: true,
video: { width: 1280, height: 720 },
};
返回值
一个被解析为 MediaStream 的 Promise，其中包含一个视频轨道。视频轨道的内容来自用户选择的屏幕区域以及一个可选的音频轨道。
异常
来自返回的 promise 的拒绝是通过将DOMException错误对象传递给 promise 的失败处理程序来进行的。可能的错误是：
AbortError ［中止错误］
发生了与以下任何其他异常不匹配的错误或故障。
InvalidStateError ［拒绝错误］
调用 getDisplayMedia() 的 context 中的 document 不是完全激活的; 例如，也许它不是最前面的标签。
NotAllowedError ［拒绝错误］
用户拒绝授予访问屏幕区域的权限，或者不允许当前浏览实例访问屏幕共享。
NotFoundError ［找不到错误］
没有可用于捕获的屏幕视频源。
NotReadableError ［无法读取错误］
用户选择了屏幕，窗口，标签或其他屏幕数据源，但发生了硬件或操作系统级别错误或锁定，从而预先占用了共享所选源。
OverconstrainedError ［转换错误］
创建流后，由于无法生成兼容的流导致应用指定的 constraints 失效。
TypeError ［类型错误］
指定的 constraints 包括调用 getDisplayMedia() 时不允许的constraints。这些不受支持的constraints是 advanced 的，任何约束又有一个名为 min 或 exact 的成员。
注意，该函数异步执行，也就是需和async和await函数配套使用；其次就是MediaRecorder，它是用来进行媒体轻松录制的接口，要想用它需要将其构造方法实例化，如下：
mediaRecorder = new MediaRecorder(stream);
实例化后，由于我们只录制，所以这里我们只使用它的开始录制和结束录制函数。
三、开始录屏
这里我们通过编写两个按钮来控制录屏的开始与结束，如图：
图片
然后，我们编写函数来实现开始录屏功能，点击开始录屏后，效果如图：
图片
图片
想录屏哪个区域就选择哪个，这里我选择整个屏幕，录屏结束后点击结束录屏，如图：
图片
此时就会生成一个webm文件的视频文件，这里面的就是录屏内容了，至此，录屏圆满结束，源码下载地址：
录屏.rar: https://url18.ctfile.com/f/7715018-961513518-1d2d02?p=6511 (访问密码: 6511)
另外，小编还给大家开发出了边录边播的功能，大家也可以下载了看看，源码地址：
边录边播.rar: https://url18.ctfile.com/f/7715018-961513515-dca5bb?p=6511 (访问密码: 6511)
四、结语
本篇文章到这里结束了，大家有比较感兴趣的编程语言和技术可以私聊我，一起交流，感谢大家的支持，点个在看和赞，谢谢。更多精彩好文请关注公众号“”简易编程网“”，提前查看好文。