webrtc

WebRTC技术专题（2）【大势所趋，迈向认识 WebRTC 的

2021-12-21  本文已影响0人  码界西柚
image

每日一句

人生的挑战，无处不在，满怀信心，轻装上路，明天永远是充满希望的战场。

承接上文

承接上文的内容介绍完相关WebRTC技术的概念和发展历程后，开始初步摸索一下相关WebRTC技术的功能和原理。🌺【WebRTC原理探索】未来可期，WebRTC的诞生发展

技术回顾

WebRTC概念定义

WebRTC名称源自网页实时通信（Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的技术，是谷歌2010年以6820万美元收购Global IP Solutions公司而获得的一项技术。

WebRTC功能范畴

WebRTC应用包括下面四个主要的概念

WebRTC已经纳入HTML5标准

目前支持WebRTC协议的浏览器有：Chrome、Firefox Opera，IE不支持~

WebRTC的核心组件

下图为WebRTC内部结构简化图：

image.png

在音视频引擎之上是一套C++ API，在C++ 的API之上是提供给浏览器的Javascript API。

JSEP

信令服务器

WebRTC没有定义用于建立信道的信令的协议，因此可以使用任意的传输方式，例如 WebSocket, XMPP, SIP, AJAX。

信令服务器传送的数据有
  1. 协商媒体功能和设置
  2. 标识和验证会话参与者的身份
  3. 控制媒体会话、指示进度、更改会话和终止会话

其中只有第一项的必备功能。其他都可以根据业务需求自由调整。

SDP协议

此外，信令通道还用于交换候选地址，以便进行ICE打洞。

信令互通方案

WebRTC与SIP互通

要想让WebRTC与SIP互通，要解决两个层面的问题：信令层和媒体层。

两个网络使用的信令机制不同，所以要进行信令的转换，才能完成媒体的协商，建立会话。媒体层要完成编码的转换，以及RTP/SRTP转换等功能。

这里主要说项信令层面的互通。

目前SIP和WebRTC信令上互通有两种解决方案：

ICE服务器

媒体服务器

媒体服务器不是必须的，但在多方会话或需要对媒体做额外处理的情况下可以考虑加入。对于有多个浏览器参与的会议，可以采用一个集中式媒体服务器。在这种情况下，美国浏览器都只需与媒体服务器建立单个连接即可，这种结构的优势是额能够扩展非常大的会话，同时可以在最大限度上减少当有新加入者加入会话事美国浏览器所需的处理工作量。同时，媒体服务器也可对媒体进行分析、处理、保存等工作。

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。连接过程如下：

创建RTCPeerConnection对象
  1. RTCPeerConnection的参数用于确定ICE服务器，下面是使用了 google 开放的 STUN 服务器
let iceServer = {
    "iceServers": [{
        "url": "stun:stun.l.google.com:19302"
    }]
};
let pc = new RTCPeerConnection(servers);
  1. 将媒体流放入 RTCPeerConnection 对象中
pc.addStream(localStream);

通过offer和answer交换SDP描述符

  1. 甲和乙各自建立一个PC实例

    • 甲通过PC所提供的createOffer()方法建立一个包含甲的SDP描述符的offer信令。

    • 甲通过PC所提供的setLocalDescription()方法，将甲的SDP描述符交给甲的PC实例。

  2. 甲将offer信令通过服务器发送给乙

    • 乙将甲的offer信令中所包含的的SDP描述符提取出来，通过PC所提供的 setRemoteDescription()方法交给乙的PC实例

    • 乙通过PC所提供的createAnswer()方法建立一个包含乙的SDP描述符 answer信令

    • 乙通过PC所提供的setLocalDescription()方法，将乙的SDP描述符交给乙的PC实例

  3. 乙将answer信令通过服务器发送给甲

甲接收到乙的answer信令后，将其中乙的SDP描述符提取出来，调用setRemoteDescripttion()方法交给甲自己的PC实例。

ICE打洞

  1. 当网络候选可用时，通过信令服务器将其发送到对方浏览器
pc.onicecandidate = function(event) {
  if (event.candidate) {
    sendToServer(event.candidate)
  }
};
  1. 当接受到对方网络候选时，将其加入
let candidate = new RTCIceCandidate(candidate);
pc.addIceCandidate(candidate);
  1. 监听对方发送的媒体是否可用，并播放媒体
pc.onaddstream = event => {
  remoteVideo.src = window.URL.createObjectURL(event.stream);
}

RTCDataChannel

RTCDataChannel是RTCPeerConnectionAPI的一部分，只有在创建了 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;
上一篇 下一篇

猜你喜欢

热点阅读