WebRTC 初探

2024年5月20日 231次阅读 来源: hoom

WebRTC

浏览器自身不支撑相互之间直接竖立信道举行通讯，都是经由历程服务器举行中转。比方如今有两个客户端，甲和乙，他们俩想要通讯，起首须要甲和服务器、乙和服务器之间竖立信道。甲给乙发送音讯时，甲先将音讯发送到服务器上，服务器对甲的音讯举行中转，发送到乙处，反过来也是一样。如许甲与乙之间的一次音讯要经由历程两段信道，通讯的效力同时受制于这两段信道的带宽。同时如许的信道并不合适数据流的传输，怎样竖立浏览器之间的点对点传输，一向搅扰着开发者。

WebRTC 是一个开源项目，旨在使得浏览器能为及时通讯（RTC）供应简朴的 JavaScript 接口。WebRTC 不仅可传输视频，也可以传输其他数据比方文本、图片等。须要注重的是，WebRTC 并非浏览器的一个子集，浏览器只是依据 WebRTC 的规范协定完成了 WebRTC 的原生接口。Android 和 IOS 体系也支撑 WebRTC 。

WebRTC 运用包括下面四个主要的观点：

  • 信令服务器（Signalling servers）

  • ICE 服务器（ICE servers）

  • 媒体服务器 （Media servers）

  • JavaScript 接口 （JavaScript API）

信令服务器

信令服务器主要用于在两个用户之间交流信息。虽然 WebRTC 是点对点通讯，但照样须要服务器来初始化衔接，并通报一些信息。
WebRTC 没有定义用于竖立信道的信令的协定，因而可以运用恣意的传输体式格局，比方 WebSocket, XMPP, SIP, AJAX。

你可以运用及时的传输协定比方 WebSocket 来交流数据，也可以运用简朴的 GET/POST 体式格局轮询服务器来猎取数据。

信令服务器传送的数据有：

  1. 协商媒体功用和设置

  2. 标识和考证会话介入者的身份

  3. 掌握媒体会话、指导进度、变动会话和停止会话

个中只要第一项的必备功用。其他都可以依据营业需求自在调解。

媒体协商最主要的功用在于，为介入点对点通讯的两个浏览器之间交流会话形貌协定（SDP）。SDP 包括浏览器的 RTP 媒体栈设置所需的悉数信息，包括媒体范例（音频、视频、数据）、所需的编解码器，用于编解码器的哥哥参数或设置，以及有关带宽的信息。另外，信令通道还用于交流候选地点，以便举行 ICE 打洞。

ICE 服务器

完成点对点通讯的关键在于两个浏览器之间能直接发送和吸收数据包，但平常情况下，浏览器或手机都是经由历程路由器接见 Internet，所以存在收集地点转换（NAT）。位于 NAT 以内的 IP 地点是私有地点，外部没法接见。分配给 NAT 的 IP 地点才是大众地点。NAT 每次从内部到外部转发数据包时都运用大众地点。

交互式竖立衔接（ICE）是一种规范穿透协定，它应用 STUN 和 TURN 服务器来竖立衔接。

STUN 服务器可以遍历 NAT，猎取浏览器的候选地点，包括私有地点、外层 NAT 的大众 IP 地点等。通讯信令通道可以交流候选地点，浏览器一旦发送并收到了候选项，就会最先举行衔接搜检，若搜检胜利，便运用该候选项发送媒体。

在大多情况下，经由历程穿透可以竖立直接对等衔接。然则，若 NAT 或防火墙限定异常严厉，没法竖立衔接，就只能经由历程 TURN 服务器中继媒体。

媒体服务器

媒体服务器不是必需的，但在多方会话或须要对媒体做分外处置惩罚的情况下可以斟酌到场。关于有多个浏览器介入的集会，可以采纳一个集中式媒体服务器。在这类情况下，美国浏览器都只需与媒体服务器竖立单个衔接即可，这类构造的上风是额可以扩大异常大的会话，同时可以在最大限度上削减当有新到场者到场会话事美国浏览器所需的处置惩罚事情量。同时，媒体服务器也可对媒体举行剖析、处置惩罚、保留等事情。

JavaScript 接口

getUserMedia

经由历程挪用 navigator.getUserMedia() 可以猎取视频或音频的数据，constraints 参数可以挑选是不是猎取视频音频。下面是一个简朴的示例

var constraints = {
  audio: false,
  video: true
};
var video = document.querySelector('video');

function successCallback(stream) {

  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

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

navigator.getUserMedia(constraints, successCallback, errorCallback);

RTCPeerConnection

RTCPeerConnection 是 WebRTC 中最主要的一个接口，用于肯定 ICE 服务器、交流 SDP。衔接历程以下：

  1. 建立 RTCPeerConnection 对象

RTCPeerConnection 的参数用于肯定 ICE 服务器，下面是运用了 google 开放的 STUN 服务器

let iceServer = {
    "iceServers": [{
        "url": "stun:stun.l.google.com:19302"
    }]
};
let pc = new RTCPeerConnection(servers);

  1. 将媒体流放入 RTCPeerConnection 对象中

pc.addStream(localStream);

  1. 经由历程 offer 和 answer 交流 SDP 形貌符

  • 甲和乙各自竖立一个PC实例

  • 甲经由历程 PC 所供应的 createOffer() 要领竖立一个包括甲的 SDP 形貌符的 offer 信令

  • 甲经由历程 PC 所供应的 setLocalDescription() 要领，将甲的SDP形貌符交给甲的 PC 实例

  • 甲将 offer 信令经由历程服务器发送给乙

  • 乙将甲的 offer 信令中所包括的的SDP形貌符提取出来，经由历程PC所供应的 setRemoteDescription() 要领交给乙的PC实例

  • 乙经由历程PC所供应的 createAnswer() 要领竖立一个包括乙的 SDP 形貌符 answer 信令

  • 乙经由历程PC所供应的 setLocalDescription() 要领，将乙的 SDP 形貌符交给乙的PC实例

  • 乙将answer信令经由历程服务器发送给甲

  • 甲吸收到乙的answer信令后，将个中乙的SDP形貌符提取出来，挪用setRemoteDescripttion()要领交给甲本身的PC实例

  1. ICE 打洞

当收集候选可用时，经由历程信令服务器将其发送到对方浏览器


pc.onicecandidate = function(event) {
  if (event.candidate) {
    sendToServer(event.candidate)
  }
};

当接受到对方收集候选时，将其到场

let candidate = new RTCIceCandidate(candidate);
pc.addIceCandidate(candidate);

  1. 监听对方发送的媒体是不是可用，并播放媒体

pc.onaddstream = event => {
  remoteVideo.src = window.URL.createObjectURL(event.stream);
}

RTCDataChannel

RTCDataChannel 是 RTCPeerConnection API 的一部分，只要在建立了 RTCPeerConnection 实例后才建立数据通道。数据通道可以用于发送文本或是文件。

pc = new RTCPeerConnection();
dc =  pc.createDataChannel('dc');

dc.onmessage = event => console.log(event.data);

dc.send('text');
dc.sed(new arraybuffer(32))

在另一端可以运用 ondatachannel 取得 RTCDataChannel 对象

pc.ondatachannel = event => dc = event.channel;

参考资料

https://codelabs.developers.g…

https://webrtc.org/

https://segmentfault.com/a/11…

http://www.muazkhan.com/2013/…

    原文作者：hoom
    原文地址: https://segmentfault.com/a/1190000009816551
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞