标签：
因为产品中要加入网页中网络会议的功能，这几天都在倒腾 WebRTC，现在分享下工作成果。
Real Time Communication 简称 RTC，是谷歌若干年前收购的一项技术，后来把这项技术应用到浏览器中并开源出来，而且搞了一套标准提交给W3C，称为WebRTC，官方地址是：http://www.webrtc.org/。WebRTC要求浏览器内置实时传输音视频的功能，并提供一致的API供JS使用。目前实现这套标准的浏览器有：Chrome、FireFox、Opera。微软虽然也在对WebRTC标准的制定做贡献，但仍然没有在任何版本的IE中支持WebRTC，所以，对于IE浏览器，不得不安装Chrome Frame插件来支持WebRTC；对于Safari浏览器，可以使用WebRtc4all这个插件，地址是：https://code.google.com/p/webrtc4all/。
WebRTC的实现是建立浏览器之间的直接连接，而不需要其他服务器的中转，即P2P，这就要求彼此之间需要知道对方的外网地址。但大多数计算机都位于NAT之后，只有少部分主机拥有外网地址，这就要求一种方式可以穿透NAT，STUN和TURN就是这样的技术。对于STUN和TURN的详细介绍，可以查看这里（http://www.h3c.com.cn/MiniSite/Technology_Circle/Net_Reptile/The_Five/Home/Catalog/201206/747038_97665_0.htm）。
WebRTC会使用默认的或程序指定的SUTN服务器，获取指向当前主机的外网地址和端口。谷歌浏览器默认的是谷歌域名下的一个STUN，国内可能不大稳定，于是我找到了这个 stunserver.org/ ，连接速度比较快，据说当年飞信就是使用的这个，应该比较可靠。如果信不过第三方的STUN服务，也可以自己搭建一台，搭建过程也挺简单。
P2P的建立过程需要依赖服务端中转外网IP及端口、音视频设备配置信息，所以服务端需要使用可以双工通讯的手段，比如WebSocket，来实现信令的中转，称之为信令服务器。
会话的建立主要有两个过程：网络信息的交换、音视频设备信息的交换。以下以 lilei 要和 Lucy 开视频为例描述这两个过程。
网络信息的交换：
lilei首先创建了一个RTCPeerConnection对象，这个对象会自动的去向STUN服务器询问自己的外网IP和端口。然后lilei把自己的网络信息经过信令服务器中转后，发送给lucy。 lucy接收到lilei的网络信息之后，也创建了一个RTCPeerConnection对象，并把lilei发过来的信息通过addIceCandidate添加到对象中。 lucy把自己的网络信息经过信令服务器的中转后，发送给lilei。 lilei接收到信息后，通过RTCPeerConnection对象的addIceCandidate方法保存lucy的网络信息。
音视频设备信息的交换：
lilei通过RTCPeerConnection对象的createOffer方法，获取本地的音视频编码分辨率等信息，通过setLocalDescription添加到RTCPeerConnection中，并把这些信息经过信令服务器中转后发送给lucy。 lucy接收到lilei发过来的信息后，使用RTCPeerConnection对象的setRemoteDescription方法保存。然后通过createAnswer方法获取自己的音视频信息并以同样的手段发送给lilei。 lilei接收到lucy的信 息，调用setRemoteDescription方法保存。
以上两个过程可以是并发的，并无先后顺序，但必须得等到两个过程都完成后，P2P的连接才真正的建立。一旦连接建立，lilei和lucy就可以直接发送音视频流，而不需要中转。WebRTC在获取本地网络信息的时候，会先尝试STUN，如果失败，则会使用TURN。
首先使用WebSocket实现信令服务器部分，在此需要用到微软开发的用于实现WebSocket的dll (http://www.nuget.org/packages/Microsoft.WebSockets/)，以及Json.net。
用于和客户端交互的会话类代码如下：
01.public class Session : WebSocketHandler02.{03.private static WebSocketCollection sessions = new WebSocketCollection();04. 05.public String UserId { get; set; }06. 07.public override void OnOpen()08.{09.this.UserId = Guid.NewGuid().ToString(‘N‘);10.var message = new { type = SignalMessageType.Conect, userId = this.UserId };11.sessions.Broadcast(Json.Encode(message));12. 13.sessions.Add(this);14.}15. 16.public override void OnMessage(string msg)17.{18.var obj = Json.Decode(msg);19.var messageType = (SignalMessageType)obj.type;20. 21.switch (messageType)22.{23.case SignalMessageType.Offer:24.case SignalMessageType.Answer:25.case SignalMessageType.IceCandidate:26.var session = sessions.Cast<Session>().FirstOrDefault(n => n.UserId == obj.userId);27.var message = new { type = messageType, userId = this.UserId, description = obj.description };28.session.Send(Json.Encode(message));29.break;30.}31.}32.}33. 34.public enum SignalMessageType35.{36.Conect,37.DisConnect,38.Offer,39.Answer,40.IceCandidate41.}WebAPI控制器需要引用命名空间“Microsoft.Web.WebSockets;”代码如下：
01.public class SignalServerController : ApiController02.{03.[HttpGet]04.public HttpResponseMessage Connect()05.{06.var session = new WebRTCDemo.Session();07.HttpContext.Current.AcceptWebSocketRequest(session);08. 09.return new HttpResponseMessage(HttpStatusCode.SwitchingProtocols);10.}11.}
001.var RtcConnect = function (_userId, _webSocketHelper) {002. 003.var config = { iceServers: [{ url: ‘stun:stunserver.org‘ }] };004.var peerConnection = null;005.var userId = _userId;006.var webSocketHelper = _webSocketHelper;007. 008.var createVideo = function (stream) {009.var src = window.webkitURL.createObjectURL(stream);010.var video = $(‘<video />‘).attr(‘src‘, src);011.var container = $(‘<div />‘).addClass(‘videoContainer‘).append(video).appendTo($(‘body‘));012. 013.video[0].play();014.return container;015.};016. 017.var init = function () {018. 019.window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;020.peerConnection = window.RTCPeerConnection(config);021. 022.peerConnection.addEventListener(‘addstream‘, function (event) {023.createVideo(event.stream);024.});025.peerConnection.addEventListener(‘icecandidate‘, function (event) {026.var description = JSON.stringify(event.candidate);027.var message = JSON.stringify({ type: 4, userId: userId, description: description });028.webSocketHelper.send(message);029.});030. 031.navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;032.var localStream = navigator.getMedia({ video: true, audio: true }, getUserMediaSuccess, getUserMediaFail);033.peerConnection.addStream(localStream);034. 035.};036. 037.this.connect = function () {038.peerConnection.createOffer(function (offer) {039.peerConnection.setLocalDescription(offer);040. 041.var description = JSON.stringify(offer);042.var message = JSON.stringify({ type: 2, userId: userId, description: description });043.webSocketHelper.send(message);044.});045. 046.};047. 048.this.acceptOffer = function (offer) {049.peerConnection.setRemoteDescription(new RTCSessionDescription(offer));050.peerConnection.createAnswer(function (answer) {051.peerConnection.setLocalDescription(answer);052.var description = JSON.stringify(answer);053. 054.var message = JSON.stringify({ type: 3, userId: userId, description: description });055.webSocketHelper.send(message);056.});057.};058. 059.this.acceptAnswer = function (answer) {060.peerConnection.setRemoteDescription(new RTCSessionDescription(answer));061. 062.};063. 064.this.addIceCandidate = function (candidate) {065.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));066.};067. 068.init();069. 070.};071. 072.var WebSocketHelper = function (callback) {073.var ws = null;074.var url = ‘ws://‘ + document.location.host + ‘/api/Signal/Connect‘;075. 076.var init = function () {077.ws = new WebSocket(url);078.ws.onmessage = onmessage;079.ws.onerror = onerror;080.ws.onopen = onopen;081.};082. 083.var onmessage = function (message) {084.callback(JSON.parse(message.data));085.};086. 087.this.send = function (data) {088.ws.send(data);089.};090. 091.init();092.};093. 094.$(function() {095. 096.var rtcConnects = {};097.var webSocketHelper = new WebSocketHelper(function (message) {098.var rtcConnect = getOrCreateRtcConnect(message.userId);099.switch (message.type) {100.case 0: //Conect101.rtcConnect.connect();102.break;103.case 2: //Offer104.rtcConnect.acceptOffer(JSON.parse(message.description));105.break;106.case 3: //Answer107.rtcConnect.acceptAnswer(JSON.parse(message.description));108.break;109.case 4: //IceCandidate110.rtcConnect.addIceCandidate(JSON.parse(message.description));111.break;112.default:113.break;114.}115.});116. 117.var init = function() {118.navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;119.var stream = navigator.getMedia({ video: true, audio: true }, function() {120.var src = window.webkitURL.createObjectURL(stream);121.var video = $(‘<video />‘).attr(‘src‘, src);122.$(‘<div />‘).addClass(‘videoContainer‘).append(video).appendTo($(‘body‘));123. 124.video[0].play();125.}, function (error) { console.error(error); });126.};127. 128.var getOrCreateRtcConnect = function (userId) {129.var rtcConnect = rtcConnects[userId];130.if (typeof (rtcConnect) == ‘undefined‘) {131.rtcConnect = new rtcConnect(userId, webSocketHelper);132.rtcConnects[userId] = rtcConnect;133.}134.return rtcConnect;135.};136.init();137.});
01.<html>02.<head>03.<style>04..videoContainer { float: left; padding: 10px 0 10px 10px; width: 210px; margin: 5px; }05..videoContainer > video { width: 200px; height: 150px; margin-top: 5px; }06.</style>07.</head>08.<body>09.</body>10.</html>如果想部署自己专用的STUN服务器，这里（http://www.stunprotocol.org/）有STUN服务器的完整开源实现，原生是运行在Linux上的，但也提供了cgwin下编译的windwos版本。如何编译、运行等在它的github主页上说的比较清楚：https://github.com/jselbie/stunserver。
如果觉得自己写那一坨js比较繁琐，这里（http://www.rtcmulticonnection.org/）有一个封装库，简单了解了一下，功能挺强大的。
标签：
原文地址：http://www.cnblogs.com/georgewangii/p/4510079.html
