webRTC实战总结
前言
前段时间一直在忙一个基于WebRTC的PC和移动端双向视频的项目。第一次接触webRTC,难免遇到了许多问题,比如:webRTC移动端兼容性检测,如何配置MediaStreamConstraints, 信令(iceCandidate, sessionDescription)传输方式的选择,iceCandidate和sessionDescription设置的先后顺序,STUN和TURN的概念,如何实现截图及录制视频及上传图片和视频功能,如何高效跟踪错误等等。好记性不如烂笔头,特写此文以记之。
移动端兼容性
对PC端来说,webRTC早已被各大浏览器支持了,Chrome 28,FF22,Edge…随着不久之前发布的IOS11也宣布支持webRTC及getUserMedia,webRTC在移动端的应用前景也令人憧憬。
具体到实际项目中,经过测试,各大国产安卓手机自带的浏览器基本不支持webRTC,但这些安卓手机的微信内置浏览器均能良好地支持webRTC,虽然Chrome及Firefox的移动端版本也能良好的支持webRTC,但国情决定了微信内置浏览器作为最佳切入点。另一方面。IOS11中微信内置浏览器还不支持webRTC(我坚信不久的将来就会支持),但在Safari中能够完美支持。因此本项目选择了微信公众号为切入点,通过检测userAgent引导IOS11用户在Safari中打开页面。
检测webRTC的可行性,主要从getUserMedia和webRTC本身来入手:
function detectWebRTC() { const WEBRTC_CONSTANTS = ['RTCPeerConnection', 'webkitRTCPeerConnection', 'mozRTCPeerConnection', 'RTCIceGatherer']; const isWebRTCSupported = WEBRTC_CONSTANTS.find((item) => { return item in window; }); const isGetUserMediaSupported = navigator && navigator.mediaDevices && navigator.mediaDevices.getUserMedia; if (!isWebRTCSupported || typeof isGetUserMediaSupported === 'undefined' ) { return false; } return true; }
如果返回false,再去检测userAgent给予用户不支持的具体提示。
配置MediaStreamConstraints
所谓MediaStreamConstraints,就是navigator.mediaDevices.getUserMedia(constraints)传入的constraints,至于它的写法及功能,参考MDN,本文不做赘述。我在这里想要强调的是,对于移动端来说控制好视频图像的大小是很重要的,例如本项目中想要对方的图像占据全屏,这不仅是改变video元素的样式或者属性能做到的,首先要做的是改变MediaStreamConstraints中的视频分辨率(width, height),使其长宽比例大致与移动端屏幕的类似,然后再将video元素的长和宽设置为容器的长和宽(例如100%)。
另外对于getUserMedia一定要捕获可能出现的错误,如果是老的API,设置onErr回调,如果是新的(navigator.mediaDevices.getUserMedia),则catch异常。这样做的原因:getUserMedia往往不会完全符合我们的预期,有时即使设置的是ideal的约束,仍然会报错,如果不追踪错误,往往一脸懵逼。这也是后文要提到的高效追踪错误的方法之一。
搭建信令传输服务
要传输的信令包括两个部分:sessionDescription和iceCandidate。为了便于传输可将其处理成字符串,另一端接收时还原并用对应的构造函数构造对应的实例即可。
webRTC并没有规定信令的传输方式,而是完全由开发者自定义。常见的方式有短轮询、webSocket(socket.io等),短轮询的优点无非是简单,兼容性强,但在并发量较大时,服务器负荷会很重。而webSocket就不存在这个问题,但webSocket搭建起来较为复杂,并不是所有的浏览器都支持websocket。综合来说socket.io是个不错的解决方案,事件机制和自带的房间概念对撮合视频会话都是天然有利的,并且当浏览器不支持websocket时可以切换为轮询,也解决了兼容性的问题。
发起视频会话的流程
可以看到无论是发起方还是接受方,第一步都是getUserMedia获取本地媒体流,然后新建一个RTCPeerConnection
实例,并指定好onicecandidate、onaddstream等回调:
// 指定TURN及STUN
const peerConnectionConfig = { 'iceServers': [ { 'urls': 'turn:numb.viagenie.ca', 'username': 'muazkh', 'credential': 'webrtc@live.com' }, { 'urls': 'stun:stun.l.google.com:19302' } ], bundlePolicy: 'max-bundle', }; const pc = new RTCPeerConnection(peerConnectionConfig); pc.onicecandidate = ...; pc.onaddstream = ...;
然后addTrack指定要传输的视频流
stream.getTracks().forEach((track) => { pc.addTrack(track, stream); });
发起方通过createOffer生成localDescription并传给pc.setLocalDescription(),pc获取了本地的sdp后开始获取candidate,这里的candidate指的是网络信息(ip、端口、协议),根据优先级从高到低分为三类:
- host: 设备的ipv4或ipv6地址,即内网地址,一般会有两个,分别对应udp和tcp,ip相同,端口不同;
- srflx(server reflexive): STUN返回的外网地址;
- relay: 当STUN不适用时(某些NAT会为每个连接分配不同的端口,导致获取的端口和视频连接端口并不一致),中继服务器的地址;
三者之中只需要有一类连接成功即可,所以如果通信双方在同一内网,不配置STUN和TURN也可以直接连接。其实这里隐藏着性能优化的点:如上图所示,webRTC通信双方在交换candidate时,首先由发起方先收集所有的
candidate,然后在icegatheringstatechange事件中检测iceGatheringState是否为’complete’,再发送给接收方。接收方设置了发送方传来的sdp和candidate后,同样要收集完自己所有的
candidate,再发送给对方。如果这些candidate中有一对可以连接成功,则P2P通信建立,否则连接失败。
问题来了,接受端要等待发起方收集完所有的candidate之后才开始收集自己的candidate,这其实是可以同时进行的;另外其实不一定需要所有的candidate才能建立连接,这也是可以省下时间的;最后如果网络,STUN或者TURN出现问题,在上述传输模式下是非常致命的,会让连接的时间变得很长不可接受。
解决方案就是IETF提出的Trickle ICE。即发起方每获取一个candidate便立即发送给接收方,这样做的好处在于第一类candidate即host,会立即发送给接收方,这样接收方收到后可以立刻开始收集candidate,也就是发起方和接收方同时进行收集candidate的工作。另外,接收方每收到一个candidate会立即去检查它的有效性,如果有效直接接通视频,如果无效也不至于浪费时间。详情可以参见ICE always tastes better when it trickles.
至于sessionDescription及iceCandidate的传输,因为JavaScript没有处理sdp格式数据的方法,所以直接将其当做字符串处理,这样做的坏处是难以改变sdp中的信息(如果非要改,通过正则匹配还是能改的)。
在挂断视频时,不仅要关闭peerConnection,也要停止本地及远程的媒体流:
const tracks = localStream.getTracks().concat(remoteStream.getTracks()); tracks.forEach((track) => { track.stop(); }); peerConnection.close();
截图&录制视频
截图其实并不算什么新鲜的东西,无非是利用canvas的drawImage函数获取video元素在某一帧的图像,得到的是图片的base64格式字符串,但要注意的是这样得到的base64码之前有这样一串文本:
data:image/png;base64,
这是对数据协议,格式,编码方式的声明,是给浏览器看的。所以在将drawImage得到的字符串上传给服务器时,最好将这串文本去掉,防止后端在转换图片时出现错误。
录制视频使用的是MediaRecorder API 详情参考MDN MediaRecorder,目前仅支持录制webm格式的视频。可以在新建MediaRecorder实例的时候,设置mimeType、videoBitsPerSecond、audioBitsPerSecond:
const options = { mimeType: 'video/webm;codecs=vp8', // 视频格式及编码格式 videoBitsPerSecond: 2500000, // 视频比特率,影响文件大小和质量 audioBitsPerSecond: 128000 // 音频比特率,影响文件大小和质量 }; const recorder = new MediaRecorder(options);
在recorder的ondataavailable事件中拿到数据,将其转换为Blob对象,再通过Formdata异步上传至服务器。
错误追踪
整个双向视频涉及到的步骤较多,做好错误追踪是非常重要的。像getUserMedia时,一定要catch可能出现的异常。因为不同的设备,不同的浏览器或者说不同的用户往往不能完全满足我们设置的constraints。还有在实例化RTCPeerConnection时,往往会出现不可预期的错误,常见的有STUN、TURN格式不对,还有createOffer时传递的offerOptions格式不对,正确的应该为:
const offerOptions = { 'offerToReceiveAudio': true, 'offerToReceiveVideo': true };
CAVEAT
因为webRTC标准还在不断地更新中,所以相关的API经常会有改动。
- navigator.getUserMeida(已废弃),现在改为navigator.mediaDevices.getUserMedia;
- RTCPeerConnection.addStream被RTCPeerConnection.addTrack取代;
- STUN,TURN配置里的url现被urls取代;
- …
另外,对video元素也要特殊处理。设置autoPlay属性,对播放本地视频源的video还要设置muted属性以去除回音。针对IOS播放视频自动全屏的特性,还要设置playsinline属性的值为true。
转载于:https://www.cnblogs.com/liuhao-web/p/8706528.html
webRTC实战总结相关推荐
- 实践:《从头到脚撸一个多人视频聊天 — 前端 WebRTC 实战(一)》
2019独角兽企业重金招聘Python工程师标准>>> 请先阅读原文,链接:从头到脚撸一个多人视频聊天 - 前端 WebRTC 实战(一),本文只涉及实践过程中的问题 1.video ...
- 【从头到脚】撸一个多人视频聊天 — 前端 WebRTC 实战(一)
前言 [ 从头到脚 ]会作为一个系列文章来发布,它包括但不限于 WebRTC 多人视频,预计会有: WebRTC 实战(一):也就是本期,主要是基础讲解以及一对一的本地对等连接,网络对等连接. Web ...
- 【从头到脚】前端实现多人视频聊天— WebRTC 实战(多人篇)
猛戳关注 前端发动机,嘿嘿嘿! 前言 这是 WebRTC 系列的第三篇文章,主要讲多人点对点连接.如果你对 WebRTC 还不太了解,推荐阅读我之前的文章. •WebRTC 基础及 1 v 1 对 ...
- 从头到脚撸一个多人视频聊天 — WebRTC 实战(一)
作者:江三疯,知乎.掘金账号同名,点击阅读原文查看作者 github. 前言 [ 从头到脚 ]会作为一个系列文章来发布,它包括但不限于 WebRTC 多人视频,预计会有: WebRTC 实战(一):也 ...
- (译)WebRTC实战: STUN, TURN, Signaling
http://xiaol.me/2014/08/24/webrtc-stun-turn-signaling/ 原文:WebRTC in the real world: STUN, TURN and s ...
- 前端webRTC实现一对一(也可以转化为一对多)视频聊天及视频流截图上传(拍照上传)——WebRTC实战
一个使用webRTC进行一对一或一对多视频通话的demo并可以对播放视频流截图拍照上传 点击查看具体webRTC API 最终效果如图 一.这个demo满足了: 1.PC端获取远程APP操作人员的后置 ...
- 前端实现多人视频聊天— WebRTC 实战(多人篇)
转自:https://juejin.im/post/5cbdc145e51d456e541b4cec
- WebRTC多人音视频聊天架构及实战
三种模式 简单介绍一下基于 WebRTC 的多人通信的几种架构模式. 1.Mesh 架构 我们之前写过几个 1 v 1 的栗子,它们的连接模式如下: 这是典型的端到端对等连接,所以当我们要实现多人视频 ...
- 2022全网最详细的音视频开发学习路线,零基础到项目实战,从小白到音视频专家
前言 音视频的历史与前景在这里就不介绍了,小编之前的文章里面都有讲到. 行业现状分析 核心竞争力:定义音视频是程序届的皇冠,掌握音视频意味着拿到通往未来的船票,不用担心会被其他人替代.音视频是有门槛的 ...
最新文章
- 《MySQL技术内幕:InnoDB存储引擎第2版》——3.1 参数文件
- LR在安装和卸载问题上的一点总结(转帖)
- 剑灵力士卡刀ahk_技术宅教你:召唤代码一键卡刀详细教程帖
- eclipse插件安装的方法
- 网络技术等级考试知识点
- 使用Servlet上传多张图片——Dao层(ProductInfoDao.java)
- 解决Qt graphis-view框架中,上层图元接收hover事件导致底层图元接收不到的问题
- 没有找到MSVCP71.dll,迅雷5无法进行离线下载,P2P Seacher无法连入emule网络
- 敏捷开发系列学习总结(2)——Bug修改流程
- HTML5视频播放器
- 循环报数java代码_循环报数 Java实现
- mysql 物化视图_Mysql物化视图应用
- w ndows10隐藏桌面设置,Win10双击桌面隐藏/显示图标?这个可以有
- 生成二维码并导出到excel表
- spring动态代理之cglib动态代理
- chrome浏览器 自带网页截取长图功能
- vue 部署上线清除浏览器缓存
- 绘制中国象棋棋盘 - CSS Pseudo Elements 的使用
- <choose>标签的使用
- 引力波探测,冷冻电镜研究:两项诺奖GPU功不可没
热门文章
- 【Python学习】 - skimage包
- *【ZOJ - 3604】Tunnel Network (Cayley定理,purfer数列,无根树定理,构造,结论,或dp)
- C++手动开启O2优化(以及-O -O1 -O2 -O3优化的知识点)(竞赛可用)
- 计算机视觉那些事儿(1):基本任务
- python3所支持的整数进制_Python3快速入门(三)——Python3标准数据类型
- C++ STL与迭代器
- kaggle(05)---Event Recommendation Engine Challenge(基础版)
- 《Python Cookbook 3rd》笔记(3.7):无穷大与 NaN
- 王者服务器维护什么时间结束s19,王者荣耀S19赛季什么时候结束 S19赛季结束时间...
- Linux gitpush错误,linux – GIT:无法推送(奇怪的配置问题)