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

2022-12-02 20:25:21 浏览数 (1)

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

0 人点赞