WebRTC

2020-07-03

1. WebRTC简介

1.1 WebRTC介绍

WebRTC全称web实时通信技术（Web Real-Time Communication），可以使浏览器和其他浏览器直接交互，多媒体功能是非常先进的，有很多新的特性。目前由W3C和IETF组织负责WebRTC的标准化工作。

（做标准化工作；不必安装软件、插件等；制定标准）

1.1.1 web应用基本模式

find

1.1.2 浏览器中的实时通信

find

1.1.3 常见的模型

三角形

find

梯形

1.1.4 WebRTC 媒体流

麦克风音频流
摄像头视频流等

2. 使用

2.1 四个主要步骤:

1）获取本地媒体（getUserMedia）。
2）在浏览器和对等端（其他浏览器或终端）之间建立连接（RTCPeerConnection 对等连接）。
3）将媒体和数据通道关联至该连接。
4）交换会话描述。

（RTCPeerConnection调用close断开）

三角形模型🌰
find
find

其他终端的模型…

3. 本地媒体获取

3.1 媒体流

目前，请求和访问本地媒体只有一种方式，即通过调用getUserMedia()


function gotUserMedia(s) {
    // console.log("s.length = " + s.getAudioTracks().length);
    t = (s.getVideoTracks)[0];
    console.log("haha: \n" + 
        JOSN.stringify(t.getCapabilities() + "\n")
    );
}
window.navigator.mediaDevices.getUserMedia({
    "video": true,
}, gotUserMedia)

在收到用户许可之前，用户代理不能返回对源的访问，而收到用户许可则可能需要数秒或更长时间。为确保整个JavaScript线程不终止，可通过回调（本示例中为gotUserMedia）来返回流。只有在成功获取请求的媒体后，才会调用此回调。

3.2 🌰

（Web服务器：一是多线程服务器；为每个请求提供单独的进程，这样可简化文件检索，但请求之间的同步十分复杂；二是单线程服务器，可简化请求之间的同步，但诸如文件检索等输入/输出十分复杂。Apache Web服务器是前者的范例，而Node.js则是后者的范例。
采用Node.js （下文简称“Node”）作为服务器框架，原因如下：
1）它大幅简化了不同浏览器请求之间的通信。
2）它釆用异步JavaScript编程模型，此模型已为大部分Web程序员所熟悉。

…

4. 信令

4.1 作用

1）协商媒体功能和设置。
2）标识和验证会话参与者的身份。
3）控制媒体会话、指示进度、更改会话和终止会话。
4）当会话双方同时尝试建立或更改会话时，实施双占用分解。

(在参与对等连接的两个浏览器之间交换会话描述协议对象中包含的信息。SDP包含供浏览器中的RTP媒体栈配置媒体会话所需的全部信息，包括媒体类型（音频、视频、数据）、所用的编解码器、用于编解码器的各个参数或设置, 以及有关带宽的信息。此外，信令通道还用于交换候选地址，以便进行ICE打洞等）

4.2 信令传输

HTTP 传输（轮询）
WebSocket 传输
数据通道
其他（Google应用程序引擎通道API，SIP）

🌰

5. 对等媒体

5.1 不采用WebRTC媒体流

find

web服务器带宽问题

5.2 WebRTC媒体流

媒体路径可有若干Internet跃点，可缩短传输所需的时间（延迟较低），降低数据包丢失的概率。减少了Web服务器占用的带宽，而且还消除了Web服务器与浏览器之间的地理距离问题。对等媒体流可大幅降低提供实时通信服务的成本。

5.3 NAT 网络地址转换

5.3.1 共有地址-私有地址

位于NAT之后的IP地址是“私有” IP地址（在NAT内使用）。分配给NAT的IP地址（可能有多个地址）是“公共” IP地址（在NAT “外部”使用），NAT每次从内部向外部转发数据包时，都使用公共地址。–对等连接受影响，打洞技术

6. 对等连接

6.1 RTCPeerConnection

功能是在两个浏览器之间建立媒体和数据连接路径。

pc = new RTCPeerConnection({
    iceServers: [ 
        {
            "url": "stun: stun.l.google.com: 19302"
        },
        {
            "url": "turn:user@turn.myserver.com", 
            "credential": "test",
        }
    ]
});

要让你的本地Mediastream传输至另一端的浏览器，下一步就是向你的浏览器做出指示。用于执行此操作的方法是addStream():

// 获取本地音频和视频
getUserMedia({MaudioM: true, "video": true), successCB, failureCB);
function successCB(myStream) (
// 告诉浏览器，要发送Mediastream
    pc.addStream(myStream)；
}

6.2 提议/应答

一方针对要建立的媒体会话类型创建描述，来发起媒体会话，此过程称为“提议”。第一方使用信令通道将提议发送给另一方。随后，另一方予以回应，此过程称为“应答”。提议/应答交换可确保双方都知道要发送和接收的媒体类型，以及如何正确解码和处理该媒体。


<!-- 将我的会话描述告诉我的浏览器 -->
pc.setLocalDescription(localDesc);
<!-- 将对等端的会话描述告诉我的浏览器 -->
pc.setRemoteDescription(remoteDesc);

用RTCPeerConnection的createOffer()方法生成一个Offer，它是以 SDP（Session Description Protocol，会话描述协议）格式传送的。对方收到Offer后，生成一个Answer并发回，这个Answer同样是SDP格式的。通信的双方通过调用setLocalDescription()方法，把自己生成的SDP设置成本地描述；通过调用setRemoteDescription()方法，把对方发给自己的SDP 设置成远程描述。以上的这个过程，统称为会话建立协议。

// 生成提议
pc.createOffer(gotOfferr, didntGetOffer); 
function gotOffer(aSessionDescription) {
    setLocalDescription(aSessionDescription);
}
// 生成应答
pc.createAnswer(gotAnswer, didntGetAnswer); 
function gotAnswer(aSessionDescription) (
    setLocalDescription(aSessionDescription);
    //现在将会话描述(应答)发送给对等端，以便对等端
    ...
)

7. 数据通道

7.1 用于交互数据

数据通道模型基于WebSocket建立，具有简单且可设置的send方法和onmessage处理程序。

pc = new RTCPeerConnection(); 
dc = pc.createDataChannel("dc1");
dc.send("hello");
dc.onmessage = (e) => {
    console.log(e.data);
}

8. 其他

隐私、安全、攻击
Chrome工具（chrome://webrtc-internals/）、支持情况

9. sdk使用

参考链接：
WebRTC全文指南
 WebRTC中文网