WebRTC WebSocket Base

WilliamLuo
389 阅读8分钟

WebSocket

为什么会产生

解决轮询的低效率，服务器<=>客户端

是什么

单个建立在TCP连接上进行双全工通信的协议。WebSocket使客户端和服务端交换数据更简单，允许服务端主动推送数据。
本质上是一种计算机网络应用层的协议，用于弥补http协议在持久通信能力上的不足。

特点

1.建立在tcp之上服务端实现比较容易
2.与http协议有比较好的兼容性，握手阶段采用http，握手不易被屏蔽，可以通过各种http代理服务器
3.数据格式比较轻量，性能开销小，通信高效
4.可以发送文本，也可以发送二进制数据
5.没有同源限制，客户端可以与任意服务器通信
6.协议标识符是ws（如果加密是wss），服务器网址就是url

通信原理和机制

  •   1. 在客户端构建一个websocket实例，并且为它绑定一个需要连接到的服务器地址，当客户端连接服务端的时候，会向服务端发送一个类似下面的http报文
      GET /chat HTTP/1.1
      Host: server.example.com
      Upgrade: websocket
      Connection: Upgrade
      Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
      Sec-WebSocket-Protocol: chat, superchat
      Sec-WebSocket-Version: 13
      Origin: http://example.com

  • 2.属性
      Socket.readyState
      Socket.bufferedAmount

  • 3.事件
      open->Socket.onopen
      message->Socket.onmessage
      error->Socket.onerror
      close->Socket.onclose

  • 4.方法
      Socket.send
      Socket.close

  • 5.缺点
      不兼容低版本浏览器

WebRTC

基于WebRTC构建的协议

  • ICE
  • STUN
  • NAT
  • TURN
  • SDP

WebRTC 基础

作用
在两个设备之间经行实时交换音频、视频和数据，同时提供一个中心警告。

特点

 完全对等
 实时交换音频、视频和数据
 自身不提供信令传递机制，可以使用WebSocket或者XMLHttpRequest

信令

信令概念：
    在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式、数据传输方法以及任何所
需的路由信息的过程。

信令期间交换的信息：
    用于设置、打开和关闭通信通道以及处理错误的控制消息。
    建立连接所需的信息：对等方能够相互通信所需的 IP 地址和端口信息。
    媒体能力协商：对等体可以理解哪些编解码器和媒体数据格式？这些需要在 WebRTC 会话开始之前达成一致。

信令流程

  1. 每个对等点创建一个RTCPeerConnection对象，表示他们的 WebRTC 会话结束。
  2. 每个对等点都为icecandidate事件建立一个处理程序，该处理程序负责通过信令通道将这些候选对象发送到另一个对等点。
  3. 每个对等点都为track事件建立一个处理程序，当远程对等点向流添加轨道时会接收到该处理程序。此代码应将轨道连接到其使用者，例如<video>元素。
  4. 调用者创建并与接收对等方共享某种唯一标识符或令牌，以便可以通过信令服务器上的代码识别它们之间的调用。此标识符的确切内容和形式由您决定。
  5. 每个对等点都连接到一个商定的信令服务器，例如他们都知道如何与之交换消息的 WebSocket 服务器。
  6. 每个对等点告诉信令服务器他们想要加入同一个 WebRTC 会话（由步骤 4 中建立的令牌标识）。

ICE重启

有时，在 WebRTC 会话的生命周期内，网络条件会发生变化。ICE 代理可能会选择执行 ICE restart 。这是
重新协商网络连接的过程，与执行初始 ICE 协商的方式完全相同，但有一个例外：媒体继续流经原始网络连
接，直到新网络连接启动并运行。然后媒体转移到新的网络连接并关闭旧的网络连接。

信令服务器

目的：两个设备之间建立WebRTC连接需要一个信令服务器来实现双方通过网络进行连接
作用：信令服务器的作用是作为一个中间人帮助双方在尽可能少的暴露隐私的情况下建立连接。

WebRTC协议

提议/应答和信号通道

WebRTC中间无法创建没有某种服务器的连接。称为信号通道。

会话描述

WebRTC连接上的端点配置称为会话描述。 该描述包括关于要发送的媒体类型，其格式，正在使用的传输
协议，端点的IP地址和端口以及描述媒体传输端点所需的其他信息的信息。 使用会话描述协议来交换和存储该信息;

当用户对另一个用户启动WebRTC调用时，将创建一个称为 提议 (offer)的特定描述。 该描述包括有关呼
叫者建议的呼叫配置的所有信息。 接收者然后用 应答 (answer)进行响应，这是他们对呼叫结束的描述。
以这种方式，两个设备彼此共享以便交换媒体数据所需的信息。 该交换是使用交互式连接建立(ICE) 处理的，这是一种协议，即使两个设备通过网络地址转换 
然后，每个对等端保持两个描述：描述本身的本地描述和描述呼叫的远端的远程描述。
具体过程

  1. 呼叫者通过  navigator.mediaDevices.getUserMedia() 捕捉本地媒体。

  2. 呼叫者创建一个RTCPeerConnection 并调用 RTCPeerConnection.addTrack() (注： addStream 已经过时。)

  3. 呼叫者调用 RTCPeerConnection.createOffer() 来创建一个提议(offer).

  4. 呼叫者调用 RTCPeerConnection.setLocalDescription() (en-US) 将提议(Offer) **设置为本地描述 (即，连接的本地描述).

  5. setLocalDescription()之后, 呼叫者请求 STUN 服务创建ice候选(ice candidates)

  6. 呼叫者通过信令服务器将提议(offer)传递至 本次呼叫的预期的接受者.

  7. 接受者收到了提议(offer) 并调用 RTCPeerConnection.setRemoteDescription() 将其记录为远程描述 (也就是连接的另一端的描述).

  8. 接受者做一些可能需要的步骤结束本次呼叫：捕获本地媒体，然后通过RTCPeerConnection.addTrack()添加到连接中。

  9. 接受者通过 RTCPeerConnection.createAnswer() (en-US) 创建一个应答。

  10. 接受者调用 RTCPeerConnection.setLocalDescription() (en-US) 将应答(answer) **设置为本地描述. 此时，接受者已经获知连接双方的配置了.

  11. 接受者通过信令服务器将应答传递到呼叫者.

  12. 呼叫者接受到应答.

  13. 呼叫者调用 RTCPeerConnection.setRemoteDescription() 将应答设定为远程描述. 如此，呼叫者已经获知连接双方的配置了.

准备聊天服务器来处理信令

1.设计信令协议

构建一套信息交换规则，需要一套协议来定义消息格式。

2.交换会话描述信息

开始处理信号的时候，用户的初始化操作会创建一个请求（offer），根据 [SDP] 协议其中会包含一个
session描述符，并且需要把这个发送到我们称之为**接收者（callee）** 那里， 接受者需要返回一个包含
描述符的**应答（answer）** 信息。我们的服务器使用 WebSocket 来传递 `"video-offer"` `"video-answer"`  两种类型的消息数据。
这些消息包含以下属性：
  • type 消息类型; "video-offer" 或 "video-answer"
  • name 发送者用户名
  • target 接受者的用户名（如果呼叫者正在发送消息，则指定被呼叫者，反之亦然）
  • sdp 描述连接本地端SDP（Session Description Protocol）协议字符串（从接收者的角度来看，它描述远程端）

3.交换ICE候选

两个节点需要交换ICE候选来协商他们自己具体如何连接。每一个ICE候选描述一个发送者使用的通信方法，每
个节点按照他们被发现的顺序发送候选并且保持发送直到退出，即使媒体数据流已经开始传递也要如此。

每个 ICE候选通过信令服务器发送一个new-ice-candidate类型的JSON信息来送给远程的另一端。每个
候选信息包括以下字段：
  • 类型 消息类型： "new-ice-candidate".
  • 目标 待建立联系人的用户名；服务器将仅会管理与该用户的信息。
  • 候选 SDP候选字符串，描述了计划的连接方法。通常不需要查看此字符串的内容。你需要做的所有代码都是 使用信令服务器将其路由到远程对等机。
  • 注意： 每个ICE消息都建议提供一个通信协议（TCP或UDP）、IP地址、端口号、连接类型（例如，指定的IP是对等机 本身还是中继服务器），以及将两台计算机连接在一起所需的其他信息。这包括NAT或其他网络问题。

4.信令事务流程

信令过程涉及到使用中间层信令服务器在两个对等机之间交换消息。
信令过程涉及多个点之间的消息交换关键点：

  • 在Web浏览器中运行的每个用户的客户端

  • 每个用户的Web浏览器

  • 信令服务器

  • 承载聊天服务的Web服务器

5.ICE候选交换过程

每一端从本地的ICE层接收候选时，都会将其发送给另一方；不存在轮流或成批的候选。一旦两端就一个候选
达成一致，双方就都可以用此候选来交换媒体数据，媒体数据就开始流动。即使在媒体数据已经开始流动之
后，每一端都会继续向候选发送消息，直到他们没有选择的余地。这样做是为了找到比最初选择的更好的选
择。

6.客户端应用

使用WebSockets或者其他的通讯。

示例 example

小结

关于WebRTC用于打电话视频，即时通信。
参考文档

developer.mozilla.org/en-US/docs/…

avatar
文章
阅读
粉丝