WebRTC实现网页版视频

因为产品中要加入网页中网络会议的功能，这几天都在倒腾 WebRTC，现在分享下工作成果。话说 WebRTCReal Time Communication 简称 RTC，是谷歌若干年前收购的一项技术，后来把这项技术应用到浏览器中并开源出来，而且搞了一套标准提交给W3C，称为WebRTC，官方地址是：。WebRTC要求浏览器内置实时传输音视频的功能，并提供一致的API供JS使用。目前实现这套标准的浏览器有：Chrome、FireFox、Opera。微软虽然也在对WebRTC标准的制定做贡献，但仍然没有在任何版本的IE中支持WebRTC，所以，对于IE浏览器，不得不安装Chrome Frame插件来支持WebRTC；对于Safari浏览器，可以使用WebRtall这个插件，地址是：https://code.google.com/p/webrtall/。WebRTC基础WebRTC提供了三个API：MediaStream、RTCPeerConnection、RTCDataChannel。 MediaStream 用于获取本地的 音视频流。不同的浏览器名称不一样，但参数一样，谷歌和Opera是navigator.webkitGetUserMedia，火狐是 navigator.mozGetUserMedia。

假设在本地测试环境中apache的端口号为80，iis的端口号为81，正常情况下浏览80端口的网站只需要输入127.0.0.1即可，但需要浏览81端口的网站则需要输入127.0.0.1:81。路由器有一个10m的ethernet和二个100mfastethemet接口，因宽带利用光纤接入，局部提供100m带宽(指从当地电信机房到本地)，所以外网和内网都定义在100m的fastethernet，路由器内网端口与中心交换机的端口的地址在同一段ip地址，路由器内网端口ip地址为192．168．9．2，外网地址为10．172．8．9。ip地址过滤的使用ip地址过滤用于通过ip地址设置内网主机对外网的访问权限，适用于这样的需求：在某个时间段，禁止/允许内网某个ip（段）所有或部分端口和外网ip的所有或部分端口的通信。

运营商之间需要对交换路由信息的对象进行判断和筛选，但这样一来，对于没有交换路由信息的运营商网络，我们就无法将网络包发送过去了，如果要访问的web服务器就在那个运营商网络中，我们不就访问不了了吗。智能终端等设备通过wifi信道接人到该路由器所提供的无线局域网中，分配到一个ip地址之后，则通过该无线局域网的网关进行数据包的接收和发送，而该网关则通过3g/4g模块上的网络拨号接口来接收和发送数据包至3g/4g 网络，从而实现了该路由器的设计方案。另外木马程序的server端为了隐藏自己，必须在设计中做到不让自己显示到任务栏或者系统进程控制器中，同时还不会影响其他程序的正常运行，当使用者电脑处于断线状态下，server段不会发送任何信息到预设的端口上，而会自动检测网络状态直到网络连接好，server会通过email或者其他形式将server端系统资料通知client端，同时接收client发送出来的请求。

然后通过createAnswer方法获取自己的音视频信息并以同样的手段发送给lilei。lilei接收到lucy的信 息，调用setRemoteDescription方法保存websocket实现视频聊天。以上两个过程可以是并发的，并无先后顺序，但必须得等到两个过程都完成后，P2P的连接才真正的建立。一旦连接建立，lilei和lucy就可以直接发送音视频流，而不需要中转。WebRTC在获取本地网络信息的时候，会先尝试STUN，如果失败，则会使用TURN。WebRTC + Asp.net Web API 实现视频首先使用WebSocket实现信令服务器部分，在此需要用到微软开发的用于实现WebSocket的dll ()，以及Json.net。用于和客户端交互的会话类代码如下：01.publicclassSession : WebSocketHandler02.{03.privatestaticWebSocketCollection sessions =newWebSocketCollection();04.05.publicString UserId { get; set; }06.07.publicoverridevoidOnOpen()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.publicoverridevoidOnMessage(string msg)17.{18.var obj = Json.Decode(msg);19.var messageType = (SignalMessageType)obj.type;20.21.switch(messageType)22.{23.caseSignalMessageType.Offer:24.caseSignalMessageType.Answer:25.caseSignalMessageType.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.publicenumSignalMessageType35.{36.Conect,37.DisConnect,38.Offer,39.Answer,40.IceCandidate41.}WebAPI控制器需要引用命名空间“Microsoft.Web.WebSockets;”代码如下：01.publicclassSignalServerController : ApiController02.{03.[HttpGet]04.publicHttpResponseMessage Connect()05.{06.var session =newWebRTCDemo.Session();07.HttpContext.Current.AcceptWebSocketRequest(session);08.09.returnnewHttpResponseMessage(HttpStatusCode.SwitchingProtocols);10.}11.}JS脚本：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.returncontainer;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(newRTCSessionDescription(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(newRTCSessionDescription(answer));061.062.};063.064.this.addIceCandidate = function (candidate) {065.peerConnection.addIceCandidate(newRTCIceCandidate(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 =newWebSocket(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 =newWebSocketHelper(function (message) {098.var rtcConnect = getOrCreateRtcConnect(message.userId);099.switch(message.type) {100.case0://Conect101.rtcConnect.connect();102.break;103.case2://Offer104.rtcConnect.acceptOffer(JSON.parse(message.description));105.break;106.case3://Answer107.rtcConnect.acceptAnswer(JSON.parse(message.description));108.break;109.case4://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 =newrtcConnect(userId, webSocketHelper);132.rtcConnects[userId] = rtcConnect;133.}134.returnrtcConnect;135.};136.init();137.});View代码：01.<html>02.<head>03.<style>04..videoContainer {float: left; padding: 10px010px 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>编译后部署到IIS上，让同事都来试试，略有激动。

现在，你的三级会员像你当初所做的那样，从学习如何申请二级域名开始，学习如何申请主页，如何制作主页，上传主页，如何在自己的主页上登些小广告，挣点小钱儿，如何使用各种网络软件，如何利用网络宣传自己的网站，像那些知名网站一样……惨淡经营一整个月，网络知识倒也学了不少。为了避免每次实现相同功能时都要费神费时地走一遍弯路，市面上或者开源界出现了各种上传组件，上传组件提供了封装好的功能，使得我们在实现文件上传功能时变得轻松了很多。很多时候我们使用某网站上传图片的时候，网页总是会卡住无响应，过了一会弹出“以下插件没有响应：未知 是否要停止该插件”，网页左上角弹出“shockwave flash has crashed”提示，然后该网页无法插入图片，重新刷新有所好转，但是再次上传图片时依然会卡顿然后弹出该提醒，不仅导致自己的操作无法完成，还极度的影响了心情，接下来我们就一起来看一下出现这一问题的原因有哪些，我们又该如何解决这些问题呢。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-103123-1.html