(转)WebRTC手记之初探

本文介绍WebRTC技术,一种让浏览器直接进行音视频通信的方法。通过创建PeerConnection对象及音视频流,利用SDP信息交换和ICE候选者协商过程,最终建立P2P连接。此外还介绍了Stun和Signal服务器的作用。

WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏览器的Web页面就可以实现音视频对聊功能。而且WebRTC项目是开源的,我们可以借助WebRTC源码快速构建自己的音视频对聊功能。无论是使用前端JS的WebRTC API接口,还是在WebRTC源码上构建自己的对聊框架,都需要遵循以下执行流程:
这里写图片描述
上述序列中,WebRTC并不提供Stun服务器和Signal服务器,服务器端需要自己实现。Stun服务器可以用google提供的实现stun协议的测试服务器(stun:stun.l.google.com:19302),Signal服务器则完全需要自己实现了,它需要在ClientA和ClientB之间传送彼此的SDP信息和candidate信息,ClientA和ClientB通过这些信息建立P2P连接来传送音视频数据。由于网络环境的复杂性,并不是所有的客户端之间都能够建立P2P连接,这种情况下就需要有个relay服务器做音视频数据的中转,本文本着源码剖析的态度,这种情况就不考虑了。这里说明一下, stun/turn、relay服务器的实现在WebRTC源码中都有示例,真是个名副其实的大宝库。

上述序列中,标注的场景是ClientA向ClientB发起对聊请求,调用描述如下:

ClientA首先创建PeerConnection对象,然后打开本地音视频设备,将音视频数据封装成MediaStream添加到PeerConnection中。
ClientA调用PeerConnection的CreateOffer方法创建一个用于offer的SDP对象,SDP对象中保存当前音视频的相关参数。ClientA通过PeerConnection的SetLocalDescription方法将该SDP对象保存起来,并通过Signal服务器发送给ClientB。
ClientB接收到ClientA发送过的offer SDP对象,通过PeerConnection的SetRemoteDescription方法将其保存起来,并调用PeerConnection的CreateAnswer方法创建一个应答的SDP对象,通过PeerConnection的SetLocalDescription的方法保存该应答SDP对象并将它通过Signal服务器发送给ClientA。
ClientA接收到ClientB发送过来的应答SDP对象,将其通过PeerConnection的SetRemoteDescription方法保存起来。
在SDP信息的offer/answer流程中,ClientA和ClientB已经根据SDP信息创建好相应的音频Channel和视频Channel并开启Candidate数据的收集,Candidate数据可以简单地理解成Client端的IP地址信息(本地IP地址、公网IP地址、Relay服务端分配的地址)。
当ClientA收集到Candidate信息后,PeerConnection会通过OnIceCandidate接口给ClientA发送通知,ClientA将收到的Candidate信息通过Signal服务器发送给ClientB,ClientB通过PeerConnection的AddIceCandidate方法保存起来。同样的操作ClientB对ClientA再来一次。
这样ClientA和ClientB就已经建立了音视频传输的P2P通道,ClientB接收到ClientA传送过来的音视频流,会通过PeerConnection的OnAddStream回调接口返回一个标识ClientA端音视频流的MediaStream对象,在ClientB端渲染出来即可。同样操作也适应ClientB到ClientA的音视频流的传输。
这里的流程仅仅是从使用层面上描述了一下,具体内部都做了什么、怎么做的,以后的文章中会慢慢细扒,万事开头难,自我鼓励一下。
原文:http://www.cnblogs.com/fangkm/p/4364553.html

SRTP(安全实时传输协议)是用于保护媒体数据传输安全性的关键协议,而 WebRTC(Web 实时通信)是一种基于 Web 浏览器的实时通信技术,允许浏览器之间进行音频、视频和数据的直接传输,包含了媒体、加密、传输层等在内多个协议标准以及一套基于 JavaScript 的 API [^1][^4]。 ### 换方法 - **数据封装与解封装**:将 SRTP 封装的媒体数据进行解封装,提取出原始的 RTP 数据。在 WebRTC 中,需要重新对这些数据进行封装,以符合 WebRTC 所使用的协议格式。例如,使用 WebRTC 的 API 对数据进行处理和封装,使其能够在 WebRTC 的数据通道中传输。 - **密钥协商与同步**:SRTP 使用特定的密钥进行加密和解密,而 WebRTC 通常使用 DTLS - SRTP 进行密钥协商。因此,需要将 SRTP 的密钥协商机制与 WebRTC 的 DTLS - SRTP 密钥协商机制进行同步。可以通过解析 SRTP 的密钥信息,并将其换为 WebRTC 可以使用的格式,或者在 WebRTC 的 DTLS 握手过程中获取新的密钥,并更新 SRTP 的加密密钥。 - **协议适配**:WebRTC 有自己的一套协议栈,包括 ICE/STUN/TURN 用于内网穿透、DTLS 用于对传输内容进行加密等。需要将 SRTP 所在的网络环境适配到 WebRTC 的协议栈中。例如,配置 ICE 服务器,使得 WebRTC 能够在不同的网络环境下建立连接,同时确保 SRTP 数据能够在这个连接上正确传输。 ### 换原理 - **数据传输原理**:SRTP 主要负责媒体数据的加密和传输,而 WebRTC 则是一个完整的实时通信解决方案,涵盖了音视频采集、编解码、网络传输、显示等多个环节。在换过程中,需要将 SRTP 所保护的媒体数据无缝地融入到 WebRTC 的数据传输流程中。例如,WebRTC 的网络传输层会根据网络状况对数据进行拥塞控制和丢包重传,而 SRTP 数据需要适应这种传输机制,以保证数据的可靠传输。 - **安全机制原理**:SRTP 提供了加密和鉴权功能,保护媒体数据的安全性。WebRTC 中的 DTLS 也提供了类似的安全功能,并且与 SRTP 结合使用(DTLS - SRTP)。在换时,需要确保两种安全机制的兼容性和协同工作。例如,DTLS 握手过程中生成的密钥需要能够正确地用于 SRTP 的加密和解密操作,以保证数据在整个传输过程中的安全性。 以下是一个简单的伪代码示例,展示了如何在 WebRTC 中处理从 SRTP 解封装后的数据: ```javascript // 模拟从 SRTP 解封装得到的 RTP 数据 const srtpDecapsulatedData = getSrtpDecapsulatedData(); // 创建 WebRTC 的 RTCPeerConnection 对象 const peerConnection = new RTCPeerConnection(); // 创建媒体流轨道 const mediaStreamTrack = new MediaStreamTrack(); // 将解封装后的数据添加到媒体流轨道 mediaStreamTrack.addData(srtpDecapsulatedData); // 将媒体流轨道添加到 RTCPeerConnection const mediaStream = new MediaStream([mediaStreamTrack]); peerConnection.addStream(mediaStream); // 进行 WebRTC 的连接建立过程 peerConnection.createOffer() .then(offer => peerConnection.setLocalDescription(offer)) .then(() => { // 交换 SDP 信息等后续操作 }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值