WebRTC实现一个网页在线录制视频

电脑录制视频几乎不会用到，当有需要的时候就各种找软件找工具，并且都会找免费的。现在市场上肯定有很多符合需求，只是那么偶尔的情况下，而且使用场景不是那么多要求的情况下，一个网页在线直接录屏是不是非常nice。

很早之前做过视频直播类的产品，当时有考虑过WebRTC，只是那时候还不够成熟，视频推流拉流还是嵌入式开发，使用的是RTMP和HLS协议。随着实时性、互动性要求的增高，浏览器推出了WebRTC：

WebRTC（Web Real-Time Communication），即“网页即时通信”，WebRTC 是一个支持浏览器进行实时语音、视频对话的开源协议，目前主流浏览器都支持WebRTC，即便在网络信号一般的情况下也具备较好的稳定性，WebRTC 可以实现点对点通信，通信双方延时低，使用户无需下载安装任何插件就可以进行实时通信。

WebRTC发布之前，开发实时音视频交互应用的成本很高，需要考虑的技术问题很多，如音视频的编解码问题，数据传输问题，延时、丢包、抖动、回音的处理和消除等，如果要兼容浏览器端的实时音视频通信，还需要额外安装插件， WebRTC 大大降低了音视频开发的门槛，开发者只需要调用 WebRTC API 即可快速构建出音视频应用。

2017 年 11 月 ，W3C WebRTC 1.0 草案正式定稿。2021年 1 月，WebRTC 被 W3C 和 IETF 发布为正式标准（WebRTC 1.0: Real-Time Communication Between Browsers）。WebRTC的几个优点：

• 实时：允许网络应用或者站点，不借助媒介，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。

• 无依赖：无需安装任何插件或者第三方的软件。

• 协议：包含了媒体、加密、传输层等在内的多个协议标准以及一套基于 JavaScript的 API，它包括了音视频的采集、编解码、网络传输、显示等功能。

• 兼容：主流浏览器都支持 WebRTC 标准 API。

WebRTC的推出，我认为会是未来实时通信的主流。今天主要是实现一个网页在线录制视频，WebRTC就不再深入介绍，有这个项目需求的还需要更深入研究，录制视频就很浅了。

其实就用到了两个个API：

• navigator.mediaDevices.getDisplayMedia：提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个MediaStream 里。然后，这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。

• MediaRecorder：MediaStream Recording API 由一个主接口MediaRecorder组成，这个接口负责的所有工作是从MediaStream获取数据并将其传递给你进行处理。数据通过一系列 dataavailable 事件传递，这些数据已经成为你创建 MediaRecorder 时所声明的格式。然后，您可以进一步处理数据，或者根据需要将其写入文件。

实现的功能：

可以选择录制整个屏幕、某个窗口、浏览器某个页签，非常的友好，录制结束之后用a标签下载录制的视频，可以看看demo（WebRTC只能是https）：
https://www.discountspig.com/game/record.html

代码可以到我的GitHub上查看：
https://github.com/wade3po/demoCode/blob/main/record.html

欢迎关注个人订阅号 coding个人笔记