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 架构
WebRtc笔记_第1张图片
TURN 做中转的
比如:如果两个人私有路由器都是192.168开头 ,会被认为是同一个网络下。。就需要这个

你可能感兴趣的:(H5,webrtc,web)