WebRTC开发基础(WebRTC入门系列2:RTCPeerConnection)
阅读原文时间:2021年04月23日阅读:1

RTCPeerConnection的作用是在浏览器之间建立数据的“点对点”(peer to peer)通信.

使用WebRTC的编解码器和协议做了大量的工作,方便了开发者,使实时通信成为可能,甚至在不可靠的网络,

比如这些如果在voip体系下开发工作量将非常大,而用webRTC的js开发者则不用考虑这些,举几个例子:

  • 丢包隐藏
  • 回声抵消
  • 带宽自适应
  • 动态抖动缓冲
  • 自动增益控制
  • 噪声抑制与抑制
  • 图像清洗

不同客户端之间的音频/视频传递,是不用通过服务器的。但是,两个客户端之间建立信令联系,需要通过服务器。这个和XMPP的Jingle会话很类似。

服务器主要转递两种数据。

  • 通信内容的元数据:打开/关闭对话(session)的命令、媒体文件的元数据(编码格式、媒体类型和带宽)等。
  • 网络通信的元数据:IP地址、NAT网络地址翻译和防火墙等。

WebRTC协议没有规定与服务器的信令通信方式,因此可以采用各种方式,比如WebSocket。通过服务器,两个客户端按照Session Description Protocol(SDP协议)交换双方的元数据。

本地和远端通讯的过程有些像电话,比如张三正在试着打电话给李四,详细机制:

  1. 张三创造了一个RTCPeerConnection 对象。
  2. 张三通过RTCPeerConnection createOffer()方法创造了一个offer(SDP会话描述) 。
  3. 张三通过他创建的offer调用setLocalDescription(),保存本地会话描述。
  4. 张三发送信令给李四。
  5. 李四接通带有李四offer的电话,调用setRemoteDescription() ,李四的RTCPeerConnection知道张三的设置(张三的本地描述到了李四这里,就成了李四的远程会话描述)。
  6. 李四调用createAnswer(),将李四的本地会话描述(local session description)成功回调。
  7. 李四调用setLocalDescription()设置他自己的本地局部描述。
  8. 李四发送应答信令answer给张三。
  9. 张三将李四的应答answer用setRemoteDescription()保存为远程会话描述(李四的remote session description)。

SDP详解:

https://datatracker.ietf.org/doc/draft-nandakumar-rtcweb-sdp/?include_text=1

bitbucket的一步一步实验,动手代码

https://bitbucket.org/webrtc/codelab

WebSocket简介(用于信令通信)

https://dzone.com/refcardz/html5-websocket

http://www.infoq.com/articles/Web-Sockets-Proxy-Servers

信令服务或开源webRTC框架

https://easyrtc.com/products/easyrtc-opensource

https://github.com/priologic/easyrtc

https://github.com/andyet/signalmaster

如果您一行代码都不想写,可以看看 vLineOpenTok and Asterisk.

这里有一个单页应用程序。本地和远程的视频在一个网页,RTCPeerConnection objects 直接交换数据和消息。

https://webrtc.github.io/samples/src/content/peerconnection/pc1/

HTML代码:

<!DOCTYPE html>
<html>
<head>
……
</head>

<body>

<h1\><a href\="//webrtc.github.io/samples/" title\="WebRTC samples homepage"\>WebRTC samples</a\> <span\>Peer connection</span\></h1\>

<video id\="localVideo" autoplay muted\></video\>
<video id\="remoteVideo" autoplay\></video\>

<div\>
  <button id\="startButton"\>Start</button\>
  <button id\="callButton"\>Call</button\>
  <button id\="hangupButton"\>Hang Up</button\>
</div\>

</div>