一、前言
屏幕录制软件想必大家都用过，原理其实很简单，就是把电脑上面的画面逐帧捕获下来然后连接在一起，使得我们看见的不再是一幅静态的画面，而是动态的画面，平时我们录制屏幕都是用的电脑软件或者APP，不仅繁琐，而且内存占用不少，并且打开还比较慢，于是，就有了今天这个作品的产生，我们只需要点击一下网页即可实现轻松录屏。
二、用到的技术
为了实现屏幕录制功能，我们需要用到相关函数getDisplayMedia和MediaRecorder，首先来说下getDisplayMedia，它的用法如下：
<pre data-signature="GpHTzmn9f0TRfx4mzUkpMqzT5mbvg8yBVemghLL48iA=" style="margin: 0px 0px 2rem; padding: 1rem 2.5rem 1rem 1rem; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; white-space: pre-wrap; border-top-left-radius: 0px; border-top-right-radius: 0px; font-family: var(--font-code); font-size: 13.328px; border-top: none; border-right: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid transparent; color: rgb(27, 27, 27); letter-spacing: normal; text-align: start; visibility: visible;">
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);
实例化后，由于我们只录制，所以这里我们只使用它的开始录制和结束录制函数。
三、开始录屏
这里我们通过编写两个按钮来控制录屏的开始与结束，如图：
[图片上传失败...(image-41ec0b-1697989847071)]
然后，我们编写函数来实现开始录屏功能，点击开始录屏后，效果如图：
[图片上传失败...(image-b25ca7-1697989847071)]
[图片上传失败...(image-2172f7-1697989847071)]
</pre>
想录屏哪个区域就选择哪个，这里我选择整个屏幕，录屏结束后点击结束录屏，如图：
[图片上传失败...(image-cf0b9c-1697989847072)]
此时就会生成一个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)
四、结语
本篇文章到这里结束了，大家有比较感兴趣的编程语言和技术可以私聊我，一起交流，感谢大家的支持，点个在看和赞，谢谢。
