Webrtc从理论到实践四：通信

系列文章目录

Webrtc从理论到实践一：初识
Webrtc从理论到实践二： 架构
Webrtc从理论到实践三： 角色

---

---

前言

前面一章介绍了Webrtc在P2P通信过程中几个角色的作用，以及STUN和TURN协议在NAT穿越过程中的原理和过程。这一章我们将以一张时序图来介绍两个终端在整个视频通话过程中的细节。

---

一、p2p通话时序图

图1.1 P2P通信时序图

二、时序图步骤详解

1.连接信令服务器

图2.1 连接信令服务器

    前面我们讲过信令服务器主要用于双方的具体的业务信息，网络相关信息和媒体信息的交换,所以两个终端首先要与信令服务器建立连接。
    WebRTC 1.0规范文档中没有对信令做任何定义，这是因为信令与业务逻辑密切相关，不同业务逻辑的信令也会千差万别，所以让大家根据自己的业务定义信令,WebRTC只聚焦于服务质量上。
    WebRTC信令的传输方式通常有两种：HTTP和Websocket

• HTTP传输：HTTP也可以用于传输WebRTC信令。浏览器可以使用GET或POST方式来获取信令信息。
• Websocket传输：Websocket是一种全双工通信的协议，会与浏览器开通一个与服务器的双向连接，此连接最初采用HTTP请求的形式，但是之后升级为Websocket请求，只要Websocket服务支持CORS（Cross-Origin Resource Sharing,跨源资源共享）,关于Websocket的详细介绍可以参考我写的这篇文章 Websocket协议解析和QT代码示例

2.获取localStream

图2.2 获取localStream

获取localStream主要有以下两个步骤：

2.1枚举媒体设备

    通过navigater.mediaDevices.enumerateDevice()可以遍历主机上的音视频设备，当执行成功后，会返回一个MediaDeviceInfo数组。 下面介绍一下MediaDeviceInfo的组成。

interface MediaDeviceInfo {
   
   readonly attribute DOMString deviceId;     //每个设备的唯一编号，通过该编号可以从webrtc的音视频设备管理中找到该设备
   readonly attribute MediaDeviceKind kind;  //设备种类，分为音频输入设备，音频输出设备和视频输入设备。视频的输出由显示器完成，而显示器是默认设备，所以不需要通过音视频管理器进行管理
   readonly attribute DOMString label;    //设备的别名，相比于设备id更方便于人类的记忆
   readonly attribute DOMString groupId;  //组ID，如果两个设备在同一个硬件上，则它们属于同一组，所以它们的groupId是一致的，例如音频的输入和输出设备就是集成在一起的
};
enum MediaDeviceKind {
   
  "audioinput",
  "audiooutput",
  "videoinput"
};

2.2采集音视频数据

    通过nagivator.mediaDevices.getUserMedia(MediaStreamStrains) 可以采集音视频数据,MediaStreamStrains可以用来控制从哪个设备上采集音视频数据以及限制采集到的数据的格式，如限制采集的视频分辨率，音频采样率采样大小等，其结构如下

dictionary MediaStreamConstranis{
   
     (boolean) or (MediaTrackConstrains) video = false;
     (boolean)