001 WebRTC

Posted 2022-03-22 SilentLittleCat

WebRTC

• Web Real-Time Communication
• 可实时分发音视频给其他用户
• 可用于构建实时广告、多玩家游戏、直播、网络学习应用
• 可以容易地和其他浏览器用户建立点对点连接（peer-to-peer connections）

基本方案

Media capture

• 获取用户设备的摄像头和麦克风
• 检测设备是否可用、获取用户权限、访问设备、管理流媒体

Encoding and Decoding Audio and Video

• 将视频帧（Video frames）和音频波形（Audio waves）分割成小的数据块（chunk），压缩后进行传输，这被称为编码解码（codec）
• 常见的编码方式H.264, iSAC, Opus and VP8

Transportation Layer

• 传输编码压缩后的数据块 - 数据包（packet）
• 管理packet发送的顺序、处理包丢失的情况
• 与其他用户建立连接

Session Management

• 建立、管理、组织连接（connection），这通常被称为信号传递（signaling）

浏览器兼容

并不是所有浏览器都支持所有特性，可通过http://caniuse.com/#feat=rtcpeerconnection查询

架构

• API for web developers
  • web开发者可以使用的API
  • RTCPeerConnection, RTCDataChannel, and MediaStream
• API for browser makers
  • 浏览器厂商使用的API
• Overridable by browser makers
  • 浏览器厂商可以检测和修改（hook）的API

从用户-服务器角度看WebRTC API

WebRTC API

RTCPeerConnection

功能

• 建立一个点对点连接，在各个阶段触发事件，可对事件进行监听和处理
• 在多个用户(peers)之间传输媒体流
• onicecandidate: 收到ICE候选者(candidates)后向其他连接点(peer)发送
• onaddstream: 从远程接收到流后对流进行显示
• message
  • 如果message包含RTCSessionDescription，需要通过setRemoteDescription()添加到RTCPeerConnection
  • 如果message包含RTCIceCandidate，需要通过addIceCandidate()添加到RTCPeerConnection
• 使用getUserMedia()获取本地设备流媒体，使用addStream()添加到RTCPeerConnection
• 开启提供回应协商进程（offer/answer negotiation process），这是调用者（caller）和被调用者（callee）唯一不同的地方
  • 调用者（caller）
    • 使用createOffer()注册回调函数处理RTCSessionDescription
    • 使用setLocalDescription()将RTCSessionDescription添加到RTCPeerConnection
    • 最后使用信道服务器将RTCSessionDescription发送给其他点
  • 被调用者（callee）
    • 收到调用者的offer以后初始化
    • 类似调用者，但使用createAnswer()

属性

• RTCPeerConnection.iceConnectionState (read only)
• RTCPeerConnection.iceGatheringState (read only)
• RTCPeerConnection.localDescription (read only)
• RTCPeerConnection.peerIdentity (read only)
• RTCPeerConnection.remoteDescription (read only)
• RTCPeerConnection.signalingState (read only)

示例

// config: an array of URL objects containing information about STUN and TURN servers, used during the finding of the ICE candidates
// public STUN servers: code.google.com
var conn = new RTCPeerConnection(conf); 

conn.onaddstream = function(stream)  
   // use stream here 
; 

MediaStream

功能

• 提供开发者获取视频/音频流的能力
• 可管理选择多个用户输入设备
• 获取设备时对用户进行询问
• 使用getUserMedia()获取本地输入设备
• 使用`stream``代表实时视频流或音频流
• 每个MediaStream包含多个MediaStreamTrack，他们代表从本地设备获取的流
• 每个MediaStreamTrack包含多个通道（channels），如音频流中的左右通道，他们是个MediaStream的最小部分
• 输出stream的两种方式
  • 渲染到video和audio标签中
  • 通过RTCPeerConnection发送给其他连接点（peer）

属性

• MediaStream.active(read only) : 判断MediaStream是否有效
• MediaStream.id
• MediaStream.label

事件

• MediaStream.onactive
• MediaStream.onaddtrack
• MediaStream.oninactive
• MediaStream.onremovetrack

方法

• MediaStream.addTrack()
• MediaStream.clone()
• MediaStream.getAudioTracks()
• MediaStream.getTrackById()
• MediaStream.getTracks()
• MediaStream.getVideoTracks()
• MediaStream.removeTrack()

示例

function hasUserMedia()  
   //check if the browser supports the WebRTC 
   return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
      navigator.mozGetUserMedia); 
 

if (hasUserMedia())  
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia; 
		
   //enabling video and audio channels 
   navigator.getUserMedia( video: true, audio: true , function (stream)  
      var video = document.querySelector('video'); 
		
      //inserting our stream to the video tag     
      video.src = window.URL.createObjectURL(stream); 
   , function (err) ); 
 else  
   alert("WebRTC is not supported"); 

RTCDataChannel

• 在多个用户(peers)之间传输其他数据，如文字、图片、文件

通信

WebRTC Tutorial