开发学院

您的位置:首页>教程>正文

教程正文

WebRTC 体系结构

WebRTC体系结构


WebRTC体系结构如下图所示。

architecture.jpg

在这里,您可以找到三个不同的层,


web开发人员的API:此层包含web开发人员需要的所有API ,包括RTCPeerConnection, RTCDataChannel和 MediaStrean 对象。


浏览器厂商的API


可以供浏览器厂商以hook方式复写的API。



传输组件允许在不同类型的网络中建立连接,而语音视频引擎是负责将音频视频流从声卡和摄像机传输到网络的框架。对于web开发人员来说,最重要的部分是WebRTC API。


如果我们从客户端-服务器端看WebRTC体系结构,我们可以看到,最常用的模型之一是受SIP(会话初始化协议)梯形的启发。


session_initiation_protocol.jpg


在这个模型中,两个设备都从不同的服务器运行web应用程序。RTCPeerConnection对象配置流,以便它们可以点对点地连接到彼此。此信令通过Http或WebSockts。


但最常用的模型是三角形


triangle_model.jpg


在这个模型中,两个设备使用相同的web应用程序。它使web开发人员在管理用户连接时更加灵活。


WebRTC API


它由几个主要的JavaScript对象组成。


RTCPeerConnection对象

MediaStream对象

RTCDataChannel对象


RTCPeerConnection对象

这个对象是WebRTC API的主要入口点。它帮助我们连接到对等点、初始化连接和连接媒体流。它还管理与另一个用户的UDP连接。



RTCPeerConnection对象的主要任务是初始化和创建对等连接。我们可以轻松地建立链接,这个对象在建立时会触发一系列事件。这些事件使我们可以访问连接相关的配置,

rtcpeer_connection_object.jpg

RTCPeerConnection是一个简单的JavaScript对象,您可以简单地创建这种方式


[code] 

var conn = new RTCPeerConnection(conf); 


conn.onaddstream = function(stream) { 

   // use stream here 

}; 


[/code]


RTCPeerConnection对象接受一组参数,我们将在稍后的教程中讨论。当远程用户将视频或音频流添加到连接时,将触发onaddstream事件。



MediaStream API


现代浏览器允许开发人员访问getUserMedia API,也称为MediaStream API。有三个关键的功能要点:


它使开发人员可以访问视频和音频流对象。


它管理用户输入设备的选择,以防用户电脑有多个摄像机或麦克风


它提供了用户一直想要的一个安全级别的流。


为了测试这个API ,我们创建一个简单的html页面。它包含一个<video>元素,网页询问用户是否授予摄像机的权限,并从页面上的摄像机显示实时流。创建index .html文件并添加如下代码:


[code] 

<html>

 

   <head> 

      <meta charset = "utf-8"> 

   </head>

   <body> 

      <video autoplay></video> 

      <script src = "client.js"></script> 

   </body> 

 

</html> 

[/code]


然后添加client.js文件


[code] 

//checks if the browser supports WebRTC 


function hasUserMedia() { 

   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 

      || navigator.mozGetUserMedia || navigator.msGetUserMedia; 

   return !!navigator.getUserMedia; 

}

 

if (hasUserMedia()) { 

   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia

      || navigator.mozGetUserMedia || navigator.msGetUserMedia;

   //get both video and audio streams from user's camera 

   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 

      var video = document.querySelector('video'); 

      //insert stream into the video tag 

      video.src = window.URL.createObjectURL(stream); 

   }, function (err) {}); 

}else {

   alert("Error. WebRTC is not supported!"); 

}

[/code]


现在打开index.html ,授权以后您应该可以看到您的脸。


但是要注意,WebRTC只能运行在服务器端。如果您只使用浏览器打开此页面,它将无法工作。您需要在Apache或IIS服务器上托管这些文件。


RTCDataChannel对象


除了在用户间发送媒体流之外,您还可以使用RTCDataChannel发送附加数据。这个API与MediaStream API一样简单。主要工作是创建来自现有RTCPeerConnection对象的信道


[code] 

var peerConn = new RTCPeerConnection(); 


//establishing peer connection 

//... 

//end of establishing peer connection 

var dataChannel = peerConnection.createDataChannel("myChannel", dataChannelOptions); 


// here we can start sending direct messages to another peer 

[/code]


你只需要两行代码。其他的都在浏览器内部进行,您可以在任何对等连接上创建一个通道,直到RtcPeerConnectionobject关闭为止。


总结


你现在应该基本掌握了WebRTC体系结构。我们还介绍了MediaStream、RtcPeerConnection和RTCDataChannel API。WebRTC是一个不断更新的技术,所以总不定期更新最新的规范。