WebRtc笔记

全称是： Web browser Real Time Communication
特点如下：

• 是基于浏览器的实时音视频（数据）通信技术
• 免插件
• 开源
• 已被W3C纳入HTML5标准
• 跨平台，跨浏览器，跨移动应用 Mac OSX、Windows、iOS、Android、Linux

已经支持浏览器：Chrome，FireFox，Opera，微软edge，Safari
不支持的浏览器：IE

WebRTC相关API介绍
功能划分

1. 获取音频和视频数据
2. 传输音频和视频数据
3. 传输任意二进制数据

API划分:三个JS接口

• MediaStream (又叫getUserMedia)
• RTCPeerConnection (C++)
• RTCDataChannel

MediaStream (getUserMedia)

• 抽象表示一个音频或者视频流
• 可包含多个音视频记录
• 通过 navigator.getUserMedia() 获取

var constraints = {video: true};
function successCallback(stream) {
   var video = document.querySelector("video")
   video.src = window.URL.createObjectURL(stream);
}

function errorCallback(error) {
   console.log("navigator.getUserMedia error:", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

其中的 constraints 介绍下：

控制MediaStream的内容：媒体类型、分辨率、帧率；
video: {
   mandatory: {
   	minWidth: 640,
   	minHeight: 360
   },
   optional [{
   	minWidth: 1280,
   	minHeight: 720
   }]
}

RTCPeerConnection

1. 信令处理
2. 编解码协商
3. 点对点传输
4. 通讯安全保护
5. 带宽管理（手机可以调得质量差点、PC可以质量高）

pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStram;
pc.addStream(localStream);
pc.createOffer(gotOffer);

function gotOffer(desc) {
   pc.setLocalDescription(desc);
   sendOffer(desc);
}

function gotAnswer(desc) {
   pc.setRemoteDescription(desc);
}

function gotRemoteStream(e) {
   attachMediaStream(remoteVideo, e.stream);
}

WebRTC 架构

TURN 做中转的
比如：如果两个人私有路由器都是192.168开头 ，会被认为是同一个网络下。。就需要这个