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个人笔记

WebRTC实现一个网页在线录制视频相关推荐

如何在线录制视频？教您一个简单的方法！
案例:怎样实现在线录屏? [听朋友说在线录屏更加便捷,我也想学习如何在线录制电脑屏幕.有没有小伙伴有在线录屏的经验,求好心人给一个简单的方法!] 在今天的数字时代,我们经常需要录制电脑屏幕来制作教学视 ...
使用 Eclipse 创建第一个 Red5 应用程序示例 - 使用 Red5 在线录制视频
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 本文示例 ...
flv在线录制视频转换网站开发文档
原贴:http://www.1hao8.com/show.asp?id=7316 flv在线录制.视频转换网站开发文档 Mencoder简介: Mencoder是Mplayer自带的编码工具(Mpla ...
ASP在线转flv＋所略图＋flash在线录制视频
Mencoder简介: Mencoder是Mplayer自带的编码工具(Mplayer是Linux下的播放器,开源,支持几乎所有视频格式的播放,现在有windows和Mac版本). Mplayer的获 ...
python编写会动的火柴人,一键生成各种姿势的火柴人gif：在线录制视频即可转换 | 代码开源...
原标题:一键生成各种姿势的火柴人gif:在线录制视频即可转换 | 代码开源本文授权转载自公众号:量子位子豪发自凹非寺量子位报道 | 公众号 QbitAI 现在,只需用摄像头录制真人视频,就 ...
解决网页在线看视频时窗口会变成绿屏问题
解决网页在线看视频时窗口会变成绿屏问题: 因为我用的win7,所以就拿win7做个例子,我们用IE打开一个有网页视频的页面,点击进去待开始播放候单击右键设置,把启用硬件加速前面的钩去掉就OK了
网页服务器转化app,无需第三方软件，网页在线转换视频格式使用教程
原标题:无需第三方软件,网页在线转换视频格式使用教程之前我们和大家介绍过一款的网页小工具,其实这个网站还有更多好用的在线工具,而今天我们介绍的就是另外一款:在线视频格式转换,– 将视频文件转换为MP ...
在线录制视频声音，纯前端实现，无需上传和下载
背景现在歌曲的版权原来越严格了,歌单里好多歌都找不到资源了.但是找视频却容易很多.所以我不禁想整一个在线录制声音的玩意.经过了极长时间的折腾,我终于找到了一个靠谱的方案.下面细说俺心酸的折腾历程媒 ...
在线转flv＋flash在线录制视频
需要用到的组件 ASPExec mencoder ffmpeg.exe 第一步骤: 在线转换 Set Executor = Server.CreateObject("ASPExec.Exec ...

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

WebRTC实现一个网页在线录制视频相关推荐

最新文章

热门文章