WebRTC demo搭建测试

20-05-30 17:03

最近看了一本WebRTC入门书籍《WebRTC权威指南》,介绍了大量的WebRTC基础概念,并提供了一个运行demo。遇到几个兼容问题,解决后终于运行起来,下面记录一下。 ## Demo功能 演示demo包括一下功能: ``` 1.浏览器本地音视频媒体信息获取(html/js)。 2.信令服务(NodeJS) 3.SDP交换 & PeerConnection建立 4.根据房间key,房间(会议)配对(NodeJS) 5.远程音视频媒体获取&渲染 6.数据通道建立(UDP) 7.文本消息通过数据通道发送 ``` ## 环境架构 WebRTC可以在支持的浏览器(比如谷歌)上运行,多人同时加入之后能够进行实时通话,音视频数据不需要经过服务器中转,而是直接在Peer(浏览器)之间建立通道直接交互。但是直连通道的建立需要借助信令服务器做SDP交换机,以及记住STUN服务做UDP NAT穿透。 signal-server stun-server | \ | \ clientA <--> clientB clientA和clientB是2个运行在浏览器的peer,最终的音视频通话是在他们之间展开。signal-server是NodeJS运行的一个服务器,提供信令交互,房间配对等功能;stun-server提供sdp交互后的udp 打洞辅助,此处使用谷歌的打通服务:stun:stun.l.google.com:19302 singal-server运行在clientA,clientB可见的公网,前面我增加了nginx做接入,接入好之后转发给signal-server。 ## 几处修改 ### adapter.js 因为众所周知的原因 在html中之间远程下载 adapter.js出现失败,最后手动下载下来后,本地引用 ``` <script src="adapter.js" type="text/javascript"></script> ``` ### 本地媒体流 因为js语法问题,媒体流复制渲染,做了如下修改,从: ``` attachMediaStream(yourVideo, yourVideoStream); ``` 改成了: ``` yourVideo.srcObject = yourVideoStream ``` ### nginx 由于demo是嵌入到了bugclosed主站下,链接的url路由地址也做了修改,nginx的locantion做了upstream适配转发 ## 代码 原始代码:http://webrtcbook.com/code3.html 修改后的demo:https://github.com/pertgame/webrtc_demo.git

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章