WebRTC教程

WebRTC - 架构

整体WebRTC架构具有很高的复杂性.

WebRTC Architecture

在这里你可以找到三个不同的层 :

用于Web开发人员的API : 去;该层包含Web开发人员所需的所有API，包括RTCPeerConnection，RTCDataChannel和MediaStrean对象.
浏览器制造商的API
可覆盖的API，浏览器制造商可以挂钩.

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

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

SIP Trapezoid

In这个模型，两个设备都运行来自不同服务器的Web应用程序. RTCPeerConnection对象配置流，以便它们可以相互连接，即点对点.此信号通过HTTP或WebSockets完成.

但最常用的模型是Triangle :

Triangle Model

在此模型中，两个设备都使用相同的Web应用程序.它为Web开发人员在管理用户连接时提供了更大的灵活性.

WebRTC API

它包含一些主要的javascript对象 :

RTCPeerConnection
MediaStream
RTCDataChannel

RTCPeerConnection对象

此对象是WebRTC API的主要入口点.它可以帮助我们连接到对等端，初始化连接并附加媒体流.它还管理与另一个用户的UDP连接.

RTCPeerConnection对象的主要任务是设置和创建对等连接.我们可以轻松地挂钩连接的关键点，因为此对象在出现时会触发一组事件.这些事件使您可以访问我们的连接配置 :

RTCPeerConnection object

RTCPeerConnection是一个简单的javascript对象，您只需创建这种方式 :

[code] 
var conn = new RTCPeerConnection(conf); 

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

[/code]

RTCPeerConnection对象接受 conf 参数，稍后我们会介绍在这些教程中.当远程用户将视频或音频流添加到其对等连接时，会触发 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或Node服务器上托管这些文件，或者您喜欢哪些文件.

RTCDataChannel对象

以及发送媒体流在对等体之间，您还可以使用 DataChannel API发送其他数据.此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 关闭.