Websocket+webrtc+tomcat Implement video Proctor function

In recent days, written tests, found a lot of online written test will have the function of the video proctor, the individual is interested in it, so spent a day, studied, wrote a small demo, the following said there are any flaws hope that we have a lot of mistakes, the following came David, most of the video Proctor is through the browser, Get the camera on your computer to achieve the function of the video Proctor, so the equivalent of your computer is the client, and the company is the server, so this is basically a client server mode, but to do the client through the browser, through the browser to do the service side, This is going to involve the browser and browser communication between, but the browser and browser communication between the more difficult, so still want to use an intermediary server to do the forwarding, through the intermediary server to do the connection, then in the communication process, is the browser end-to-end interaction, there is no need for server intervention.

To implement the browser end-to-end communication, two technologies are used, one is websocket, and the other is that Webrtc,websocket is the means of interaction between the browser and the intermediary server, and WEBRTC is the means to get the video stream and the audio stream, first a browser A and a browser B, To do the interaction, it must be through intermediate server C, so browser A and intermediate server C will establish a connection, and the browser B and the intermediary server will also establish a connection, if browser A to send a string to browser B, then a first to send a string to the intermediary server through WebSocket, And the intermediary server will find, browser B corresponding to the WebSocket object, through this object to send a string to browser B, which completes the interaction between browser A and B, then browser A and browser B to establish an end-to-end connection is required in this way to achieve.

Described above, the interactive process between the two browsers, for websocket knowledge you can see the Internet, above is just the basic principle. Here's how WEBRTC works, in HTML5, we can get to our local video stream through the JS code, but our local video stream is not for ourselves, it's for the Proctor company, so we need to establish a connection between the browsers and then send the video stream past. This connection is the core of WEBRTC, in the browser can use the JS code to create a new WEBRTC connection, var pc = new Webkitrtcpeerconnection (iceserver); The statement is to create a connection, that is, to represent the browser, then in another browser, we can also establish such a connection, but this connection is independent, they are like two pipes, this time we need to link it up.

At this point A to Proctor B specific process is as follows:

First exchange The description information between the browser, such as IP, port, video information, and so on some information, this is referred to as descriptive information, then two browsers have a description of information, first browser a actively to B to initiate the connection, a first to the description of their own information (localdescription) to join their own connection , then a sends a offer package to B, which is sent via WebSocket, sent to the server, and then forwarded by the server to B,b to receive a description of B after receiving the package. b The Received Remote Description information (remotedescription) to join their own connection, and then put their own local description information, put in their own connection, and then send a answer packet to a, a received answer packet, a description of B can be obtained, then the description of B information , joined to their own connection, so that two browsers contain each other's description information, so that the basic completion of the connection between the two browsers, followed by other information of the following interaction, mainly in order not only to establish a connection within the LAN, after these interactions, then B to add their own video stream to the connection, This will be able to get the video stream in a, and then the entire communication process will not need to participate in the WebSocket, only in the B or a offline, or notify the intermediary server to delete the corresponding connection.

Here's my main code:

Server Java code, handling browser login exit, and message forwarding:

public class Admin extends streaminbound{@Overrideprotected void Onbinarydata (InputStream arg0) throws IOException {//To Do auto-generated method stub} @Overrideprotected void Ontextdata (Reader ir) throws IOException {//TODO auto-generated met Hod Stubbufferedreader 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 ("Forwarded to the Client");//forwarded to Client//connectionpool.getadmin (). Getwsoutbound (). Writetextmessage (    Charbuffer.wrap (Sb.tostring (). ToCharArray ())); map&Lt    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 ())); }} @Overrideprotected void onClose (int status) {//TODO auto-generated method Stub//super.onclose (status); System.out.println (status), if (Connectionpool.logout ()) {System.out.println ("service side Out");} ELSE{SYSTEM.OUT.PRINTLN ("No server currently available to log Out");}} @Overrideprotected void OnOpen (Wsoutbound outbound) {//TODO auto-generated method Stub//super.onopen (outbound); Connectionpool.login (This)) {System.out.println ("The server has come in");} Else{system.out.println ("currently has an Administrator");}}}

public class Server extends websocketservlet{@Overrideprotected streaminbound createwebsocketinbound (String arg0, HttpServletRequest req) {//TODO auto-generated method stubstring 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;} @Overrideprotected void Onbinarydata (InputStream arg0) throws IOException {System.out.println ("get");} @Overrideprotected 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 ("forwarded to Client");//string message=sb.tostring ();// Forward to server Connectionpool.getadmin (). Getwsoutbound (). Writetextmessage (Charbuffer.wrap (sb.tostring ()));} @Overrideprotected void onClose (int status) {//TODO auto-generated method Stub//super.onclose (status);// Remove Connection connectionpool.removeconnection (time); SYSTEM.OUT.PRINTLN ("Connection has closed!!!");} @Overrideprotected void OnOpen (Wsoutbound outbound) {//TODO auto-generated method Stub//super.onopen (outbound);// Put the connection into the pool connectionpool.addconnection (time, this); try {System.out.println ("Send data to Client"); Outbound.writetextmessage ( Charbuffer.wrap ("Hello". ToCharArray ()));} catch (IOException e) {//TODO auto-generated catch Blocke.printstacktrace ();} SYSTEM.OUT.PRINTLN ("Connection open!!!");}}

public class ConnectionPool {private final static map<long,streaminbound> Connections=new Hashmap<long, Streaminbound> ();p rivate 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 ("Join Connection");} public static void Removeconnection (long time) {Connections.remove (time); System.out.println ("Move out Connection");}}

Here is the previous JS code and HTML code:

Server.html

Contronlled.html

This is the main code: the specific operating process to deploy the code to tomcat, open the monitoring side browser input http://localhost:8888/WS/server.html, open the monitored side http://localhost:8888/ ws/ controlled.html, and then click on the Monitoring page of the Adminlogin button, first let the monitoring side register to the intermediary server above, and then click on the monitored side of the clientlogin button, then the browser will ask when the camera, click on, wait 1-3 seconds on the monitoring side can appear video screen.
Here is a demo of the effect:


 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Websocket+webrtc+tomcat Implement video Proctor function