websocket+webrtc+tomcat 实现视频监考功能

标签：websocket webrtc   java   

        要实现浏览器器端到端的通信，要用到两项技术一项是webSocket，一项是webRTC，websocket是浏览器和中间服务器做交互的手段，而webRTC是获取视频流和音频流的手段，首先一个浏览器A和一个浏览器B，要做交互，肯定得通过中间服务器C，所以浏览器A和中间服务器C会建立一个连接，而浏览器B和中间服务器同时也会建立一个连接，如果说浏览器A要向浏览器B发送一个字符串，那么A先要通过websocket把字符串发送到中间服务器，而中间服务器会找到，浏览器B对应的webSocket对象，通过这个对象把字符串发送给浏览器B，这就完成了浏览器A与B之间的交互，那么浏览器A与浏览器B之间要建立一个端到端的连接是需要通过这样的方式来实现的。

        上面讲述了，两个浏览器之间的交互过程，对于websocket的知识大家可以上网看看，上面只是基本原理。下面看看webRTC是怎么工作的，在HTML5中，我们可以通过js代码获取到我们本地的视频流，但是我们本地的视频流不是给我们自己看的，是给监考的公司看的，所以我们需要在浏览器之间建立连接，然后把视频流发送过去。这个连接就是webRTC的核心东西了，在浏览器中可以用js代码新建一个WEBRTC的连接，var pc = new webkitRTCPeerConnection(iceServer); 这条语句就是建立一个连接，也就是代表这个浏览器，那么在另一个浏览器中，我们同样可以建立这样一个连接，但是这连个连接是独立的，他们像是两根管道，这时候需要我们把它链接起来。

        这时A要监考B具体过程如下：

         首先交换浏览器之间的描述信息，像是ip，端口，视频信息，等等的一些信息，这统称为描述信息，那么两个浏览器都有描述信息，首先浏览器A主动向B发起连接，A首先把自己的描述信息（localDescription）加入自己的连接，然后A向B发送一个offer包，这个发送是通过websocket来发送的，发送到服务器，然后服务器转发到B，B收到以后通过offer包可以获得B的描述信息，B把收到的远程描述信息（remoteDescription）加入自己的连接，然后再把自己的本地描述信息，放入自己的连接，再向A发送一个answer包，A接收到answer包以后，可以获得B的描述信息了，这时把B的描述信息，加入到自己的连接中，这样两个浏览器都包含有对方的描述信息，这样就基本完成了两个浏览器之间的连接，接下来就是其他信息的以下交互，主要是为了不仅仅能够在局域网内建立连接，在这些交互做完以后，那么B把自己的视频流加到连接里，这样在A就可以获取视频流了，然后整个通信过程就不需要webSocket的参与了，只是在B下线或者是A下线的时候，或通知中间服务器删除对应的连接。

        下面是我的主要代码：

        服务器java代码，处理浏览器的登录退出，以及消息的转发：

public class Admin extends StreamInbound{

	@Override
	protected void onBinaryData(InputStream arg0) throws IOException {
		// TODO Auto-generated method stub
		
	}

	@Override
	protected void onTextData(Reader ir) throws IOException {
		// TODO Auto-generated method stub
		BufferedReader br=new BufferedReader(ir);
		//char[] buf=new char[2000];
		//char[] sbuf=new char[6000];
		//StringBuilder sb=new StringBuilder();
		/*int n=0;
		int index=0;
		while((n=ir.read(buf))>0){
		   System.arraycopy(buf, 0, sbuf, index, n);
		   Arrays.fill(buf, '0');
		   index+=n;
		}*/
		StringBuilder sb=new StringBuilder();
		String temp=null;
		while((temp=br.readLine())!=null){
			sb.append(temp);
		}
		//String[] test=sb.toString().split("\r\n");
		//StringBuilder sb2=new StringBuilder();
		//for(int i=0;i<test.length;i++){
		//  	sb2.append(test[i]);
		//}
		//System.out.println(test.length);
		//System.out.println(sb.toString());
		//System.out.println("转发给了客户端");
		//转发给客户端
		//ConnectionPool.getAdmin().getWsOutbound().writeTextMessage(CharBuffer.wrap(sb.toString().toCharArray()));
	    Map<Long,StreamInbound> map=ConnectionPool.getClientMap();
	    for(Map.Entry<Long, StreamInbound> entry:map.entrySet()){
	    	System.out.println("fawegawergawrehgeahtresathresathreshtrehsr");
	    	
	    	entry.getValue().getWsOutbound().writeTextMessage(CharBuffer.wrap(sb.toString()));
	    }
	}

	@Override
	protected void onClose(int status) {
		// TODO Auto-generated method stub
		//super.onClose(status);
		System.out.println(status);
		if(ConnectionPool.logout()){
		   System.out.println("服务端出去了");
		}else{
			System.out.println("当前没有服务端不能登出");
		}
	}

	@Override
	protected void onOpen(WsOutbound outbound) {
		// TODO Auto-generated method stub
		//super.onOpen(outbound);
		if(ConnectionPool.login(this)){
		   System.out.println("服务端进来了");
		}else{
			System.out.println("当前已有管理员");
		}
	}
	
	

}

public class Server extends WebSocketServlet{
	
	@Override
	protected StreamInbound createWebSocketInbound(String arg0,
			HttpServletRequest req) {
		// TODO Auto-generated method stub
		String info=req.getParameter("info").trim();
		if(info.equals("client")){
			return new Mession(System.currentTimeMillis());
		}else{
			return new Admin();
		}
	}

}

public class Mession extends StreamInbound{
	
	private long time;
	public Mession(long time){
		this.time=time;
	}
	
	@Override
	protected void onBinaryData(InputStream arg0) throws IOException {
		System.out.println("get");
		
	}

	@Override
	protected void onTextData(Reader ir) throws IOException {
		/*char[] buf=new char[2000];
		StringBuilder sb=new StringBuilder();
		int n=0;
		while((n=ir.read(buf))>0){
		  
		   sb.append(buf,0,n);
		   Arrays.fill(buf, ' ');
		}*/
		//char[] buf=new char[2000];
		//char[] sbuf=new char[6000];
		//StringBuilder sb=new StringBuilder();
		/*int n=0;
		int index=0;
		while((n=ir.read(buf))>0){
		   System.arraycopy(buf, 0, sbuf, index, n);
		   Arrays.fill(buf, '0');
		   index+=n;
		}*/
		BufferedReader br=new BufferedReader(ir);
		String temp=null;
		StringBuilder sb=new StringBuilder();
		while((temp=br.readLine())!=null){
			sb.append(temp);
		}
		//String[] test=sb.toString().split("\r\n");
		//StringBuilder sb2=new StringBuilder();
		//System.out.println(sb.toString().leng);
		//for(int i=0;i<test.length;i++){
		//  	sb2.append(test[i]);
		//}
		//System.out.println(sb.toString());
		//System.out.println("转发给了客户端");
		//String message=sb.toString();
		
		//转发给服务器
		ConnectionPool.getAdmin().getWsOutbound().writeTextMessage(CharBuffer.wrap(sb.toString()));
		
	}

	@Override
	protected void onClose(int status) {
		// TODO Auto-generated method stub
		//super.onClose(status);
		//移除连接
		ConnectionPool.removeConnection(time);
		System.out.println("connection has closed!!!");
	}

	@Override
	protected void onOpen(WsOutbound outbound) {
		// TODO Auto-generated method stub
		//super.onOpen(outbound);
		//把连接放入池中
		ConnectionPool.addConnection(time, this);
		try {
			System.out.println("向客户端发送了数据");
			outbound.writeTextMessage(CharBuffer.wrap("hello".toCharArray()));
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		System.out.println("connection open!!!");
	}
	
	

}

public class ConnectionPool {

	private final static Map<Long,StreamInbound> connections=new HashMap<Long,StreamInbound>();
	
	private static StreamInbound admin=null;
	
	public static Map<Long,StreamInbound> getClientMap(){
		return connections;
	}
	
	public static StreamInbound getAdmin(){
		return admin;
	}
	public static boolean login(StreamInbound admin){
		if(ConnectionPool.admin==null){
			ConnectionPool.admin=admin;
			System.out.println(ConnectionPool.admin.getReadTimeout());
			return true;
		}else{
			return false;
		}
	}
	
	public static boolean logout(){
		if(ConnectionPool.admin==null){
			return false;
		}else{
			ConnectionPool.admin=null;
			return true;
		}
	}
	
	public static void addConnection(long time,StreamInbound connection){
		connections.put(time, connection);
		System.out.println("加入连接");
	}
	
	public static void removeConnection(long time){
		connections.remove(time);
		System.out.println("移动出连接");
	}
	

}

server.html

<html>
  <head>
    <title>server</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	   
	 
	function onOpen(event) {
	      document.getElementById('messages').innerHTML
	        = 'Connection established';
	    }
	 
	    function onError(event) {
	    	 document.getElementById('messages').innerHTML
		        += '<br/>'+event.data;
	    }
	    function start() {
	        var webSocket =new WebSocket("ws://localhost:8888/WS/wstest?info=admin");
	  
	 	    webSocket.onopen = function(event) {
	 	      onOpen(event);
	 	    };
	 	    
	 	    webSocket.onerror = function(event) {
	 		      onError(event);
	 		};
	 		
	 		webSocket.onclose=function(event){
	 			//document.getElementById('messages').innerHTML
		        //+= '<br/>'+str(event.data);
		        alert(event.data);
	 		}
	 		 var iceServer = {
	 	            "iceServers": [{
	 	                "url": "stun:stun.l.google.com:19302"
	 	            }]
	 	        };
	        // 创建PeerConnection实例 (参数为null则没有iceserver，即使没有stunserver和turnserver，仍可在局域网下通讯)
	        var pc = new webkitRTCPeerConnection(iceServer);

	        // 发送ICE候选到其他客户端
	       

	        // 如果检测到媒体流连接到本地，将其绑定到一个video标签上输出
	        pc.onaddstream = function(event){
	        	//alert("检测到流");
	            document.getElementById('remoteVideo').src = webkitURL.createObjectURL(event.stream);
	        };

	        // 发送offer和answer的函数，发送本地session描述
	        /*var sendOfferFn = function(desc){
	        	
	            alert(desc.sdp)
	        	//pc.setRemoteDescription(desc);
	           // pc.setLocalDescription(desc);
	            
	            webSocket.send(JSON.stringify({ 
	                "event": "_offer",
	                "data": {
	                    "sdp": desc
	                }
	            }));
	        };*/
	        
	        pc.onicecandidate = function(event){
	            if (event.candidate !== null) {
	                webSocket.send(JSON.stringify({
	                    "event": "_ice_candidate",
	                    "data": {
	                        "candidate": event.candidate
	                    }
	                }));
	            }
	        };
	        var sendAnswerFn = function(desc){
	        
	            pc.setLocalDescription(desc);
	            webSocket.send(JSON.stringify({ 
	                "event": "_answer",
	                "data": {
	                    "sdp": desc
	                }
	            }));
	        };

	        // 获取本地音频和视频流
	       /* navigator.webkitGetUserMedia({
	            "audio": true,
	            "video": true
	        }, function(stream){
	            //绑定本地媒体流到video标签用于输出
	           // document.getElementById('localVideo').src = URL.createObjectURL(stream);
	            //向PeerConnection中加入需要发送的流
	            pc.addStream(stream);
	            //如果是发起方则发送一个offer信令
	            
	            pc.createOffer(sendOfferFn, function (error) {
	               console.log('Failure callback: ' + error);
	            });
	            
	        }, function(error){
	            //处理媒体流创建失败错误
	            console.log('getUserMedia error: ' + error);
	        });
            */
	        //处理到来的信令
	        webSocket.onmessage = function(event){
	        	//alert(event.data)
	        	//document.getElementById('messages').innerHTML
		        //+= '<br/>'+event.data;
		        var jsonstr="'"+event.data+"'"
	            var json = JSON.parse(event.data);
	            console.log('onmessage: ', json);
	            //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
	            
	            if( json.event == "_ice_candidate" ){
	            	//alert("收到候选");
	                pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
	               
	            } else {
	               
                   if(json.event == "_offer") {
		               pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp),function(){
		               //pc.setRemoteDescription(null,function(){   
		            	   pc.createAnswer(sendAnswerFn, function (error) {
		                    	alert(error);
		                        console.log('Failure callback: ' + error);
		                    });
		               },function(){
		            	    alert("error");
		                	pc.createAnswer(sendAnswerFn, function (error) {
		                    	alert("error");
		                        console.log('Failure callback: ' + error);
		                    });
		                });
		               
	               }
	               
	               //  pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp,function(){
	                //	alert(1);
	                //}));
	               //  if (isRTCPeerConnection)  
                    //  pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp));  
                  // else  
                   //   pc.setRemoteDescription(pc.SDP_OFFER,  
                    //        new SessionDescription(json.data.sdp.sdp)); 
	               //pc.setRemoteDescription(new RTCSessionDescription(pc.SDP_OFFER,json.data.sdp));
	               //pc.SDP_OFFER
	                //pc.setRemoteDescription(pc.SDP_OFFER,new SessionDescription(json.data.sdp.sdp));
	                // 如果是一个offer，那么需要回复一个answer
	               /* if(json.event == "_offer") {
	                	alert(json.event)
	                    pc.createAnswer(sendAnswerFn, function (error) {
	                    	document.getElementById('messages').innerHTML
	        		        += '<br/>'+error;
	                        console.log('Failure callback: ' + error);
	                    });
	                }*/
	            }
	        };
	    }
	</script>
  </head>
      
  <body>
    <input type="submit" value="Adminlogin" onclick="start()">
    <div id="messages">
    </div>
    <video id="remoteVideo" autoplay="autoplay"></video>
    <video id="localVideo" autoplay></video>
    
  </body>
</html>

<html>
  <head>
    <title>client</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
	    function onOpen(event) {
	      document.getElementById('messages').innerHTML
	        = 'Connection established';
	    }
	 
	    function onError(event) {
	    	 document.getElementById('messages').innerHTML
		        += '<br/>'+event.data;
	    }
	    
	    
	    function start() {
	        var webSocket =new WebSocket("ws://localhost:8888/WS/wstest?info=client");
	 	    webSocket.onopen = function(event) {
	 	      onOpen(event);
	 	    };
	 	 
	 	    webSocket.onerror = function(event) {
	 		      onError(event);
	 		};
	 		webSocket.onclose=function(event){
	 			//document.getElementById('messages').innerHTML
		        //+= '<br/>'+str(event.data);
	 		    alert(event.data)
	 		}
	 		var iceServer = {
	 	            "iceServers": [{
	 	                "url": "stun:stun.l.google.com:19302"
	 	            }]
	 	        };
	        // 创建PeerConnection实例 (参数为null则没有iceserver，即使没有stunserver和turnserver，仍可在局域网下通讯)
	        var pc = new webkitRTCPeerConnection(iceServer);

	       

	        // 发送offer和answer的函数，发送本地session描述
	        var sendOfferFn = function(desc){
	        	
	            pc.setLocalDescription(desc);
	            webSocket.send(JSON.stringify({ 
	                "event": "_offer",
	                "data": {
	                    "sdp": desc
	                }
	            }));
	        };
	        
	        pc.onicecandidate = function(event){
	            if (event.candidate !== null) {
	                webSocket.send(JSON.stringify({
	                    "event": "_ice_candidate",
	                    "data": {
	                        "candidate": event.candidate
	                    }
	                }));
	            }
	        };
	        
	        
	     // 获取本地音频和视频流
	        navigator.webkitGetUserMedia({
	            "audio": true,
	            "video": true
	        }, function(stream){
	            //绑定本地媒体流到video标签用于输出
	           //document.getElementById('localVideo').src = URL.createObjectURL(stream);
	            //向PeerConnection中加入需要发送的流
	            pc.addStream(stream);
	            //如果是发起方则发送一个offer信令
	            pc.createOffer(sendOfferFn, function (error) {
		               console.log('Failure callback: ' + error);
		            });
	        }, function(error){
	            //处理媒体流创建失败错误
	            console.log('getUserMedia error: ' + error);
	        });

	        //处理到来的信令
	        webSocket.onmessage = function(event){
	        	//alert(event.data);
	        	//document.getElementById('messages').innerHTML
		       // += '<br/>'+event.data;
		        var jsonstr="'"+event.data+"'";
	            var json = JSON.parse(event.data);
	            
	            console.log('onmessage: ', json);
	            
	            //如果是一个ICE的候选，则将其加入到PeerConnection中，否则设定对方的session描述为传递过来的描述
	            if( json.event == "_ice_candidate" ){
	            	
	                pc.addIceCandidate(new RTCIceCandidate(json.data.candidate));
	            } else {
	            	//接收到确认符号
	            	if(json.event == "_answer"){
		            	pc.setRemoteDescription(new RTCSessionDescription(json.data.sdp),function(){},function(){});
		            	 // 发送ICE候选到其他客户端
	            	}
	            }
	        };
	    }
	</script>
  </head>
      
  <body>
    <input type="submit" value="clientLogin" onclick="start()">
    <div id="messages">
    </div>
    <video id="remoteVideo" autoplay></video>
   <video id="localVideo" autoplay></video>
  </body>
</html>

下面是效果演示图：

websocket+webrtc+tomcat 实现视频监考功能

标签：websocket webrtc   java   

原文地址：http://blog.csdn.net/sxiaobei/article/details/47989491