The realization of screen sharing function based on Licode demo

 The realization of screen sharing function based on Licode demo
This article in Licodeof theBasicexamplebased on addingScreensharingfunction. The main trouble is that screen sharing must beHttpstransfer under protocol, need to modifyErizo Controllerthe code, andHTTPSThe certificate problem of the protocol is also troublesome, the current method is to manually add the certificate toChromethe. ChromeThe new version needs to use plug-insScreen Capture,licodeofficially released plugins cannot be directly on the localServeron use, need to be modified after use, the following will be specifically said. 

Modify, add two buttons, corresponding to local video audio stream and screen stream respectively

<button id= "screensharing" onclick= "screensharing ()" >screen sharing</button>    <button id= " Localvideo "onclick=" Localvideo () ">localVidoe</button>

2.script.js Load different localstream streams for screensharing and localvidoe, respectively .

functionLocalvideo () {varConfig = {audio:true, Video:true, Data:true, videosize: [640, 480, 640, 480]}; Localstream=erizo.stream (config);  Initialize (); Console.info ("Localvidoe button has been clicked ...");}functionscreensharing () {varConfig = {screen:true, Data:true, attributes: {name: ' MyStream '}}; Config.extensionid= "Gieahgoflbnmfamkbfjafjkdgnkjmhch"; Localstream=erizo.stream (config);  Initialize (); Console.info ("Screensharing button has been clicked ..."); }varServerURL = "/";varLocalstream, recording, RecordingID;functionGetparameterbyname (name) {Name= Name.replace (/[\[]/, "\\\["). Replace (/[\]]/, "\\\]"); varRegex =NewRegExp ("[\\?&]" + name + "= ([^&#]*)"), Results=regex.exec (Location.search); returnResults = =NULL? "": decodeURIComponent (Results[1].replace (/\+/g, "" "));}functiontestconnection () {window.location= "/connection_test.html";}functionstartrecording () {if(!==undefined) {    if(!recording) {room.startrecording (Localstream,function(ID) {recording=true; RecordingID=ID;          }); } Else{room.stoprecording (recordingid); Recording=false; }  }}functionLocalvideo () {varConfig = {audio:true, Video:true, Data:true, videosize: [640, 480, 640, 480]}; Localstream=erizo.stream (config);  Initialize (); Console.info ("Localvidoe button has been clicked ...");}functionscreensharing () {varConfig = {screen:true, Data:true, attributes: {name: ' MyStream '}}; Config.extensionid= "Gieahgoflbnmfamkbfjafjkdgnkjmhch"; Localstream=erizo.stream (config);  Initialize (); Console.info ("Screensharing button has been clicked ..."); }window.onload=function(){}functionInitialize () {recording=false; varCreatetoken =function(userName, role, callback) {varreq =NewXMLHttpRequest (); varurl = serverurl + ' createtoken/'; varBODY ={username:username, role:role}; Req.onreadystatechange=function () {      if(Req.readystate = = 4) {callback (Req.responsetext);    }    }; Req.open (' POST ', url,true); Req.setrequestheader (' Content-type ', ' Application/json ');  Req.send (json.stringify (body));  }; Createtoken ("User", "presenter",function(response) {vartoken =response;    Console.log (token); the=erizo.room ({token:token}); Localstream.addeventlistener ("Access-accepted",function() {Console.info (' Acess-accepted a client ... '); varSubscribetostreams =function(streams) { for(varIndexinchstreams) {          varstream =Streams[index]; if(Localstream.getid ()!==Stream.getid ())          {Room.subscribe (stream);      }        }      }; Room.addeventlistener ("Room-connected",function(roomevent) {Console.info (' A client-class connected ... '); Room.publish (Localstream, {maxvideobw:300});      Subscribetostreams (Roomevent.streams);      }); Room.addeventlistener ("Stream-subscribed",function(streamevent) {varstream =Streamevent.stream; vardiv = document.createelement (' div '); Div.setattribute ("Style", "width:320px; height:240px; "); Div.setattribute ("id", "test" +Stream.getid ());        Document.body.appendChild (DIV); Stream.show ("Test" +Stream.getid ());      }); Room.addeventlistener ("Stream-added",function(streamevent) {varstreams = [];        Streams.push (Streamevent.stream);        Subscribetostreams (streams); document.getElementById ("Recordbutton"). Disabled =false;      }); Room.addeventlistener ("Stream-removed",function(streamevent) {//Remove stream from DOM        varstream =Streamevent.stream; if(Stream.elementid!==undefined) {          varelement =document.getElementById (Stream.elementid);        Document.body.removeChild (Element);            }      }); Room.addeventlistener ("Stream-failed",function(streamevent) {Console.log ("STREAM FAILED, disconnection");      Room.disconnect ();      });      Room.connect (); Localstream.show ("Myvideo");    });  Localstream.init (); });};

3.ModifyLicode_config.jsand WillErizo ControllerChange intoHTTPStransmission, because screen sharing must beHTTPSprotocol transmission. Host.key Host.certis aOpenSSLgenerated by the. IPSpecific   situation Settings

Config.erizoController.publicIP = ' 192.168.0.2 ';//default value: '//Use "to" the public IP address instead of a hostnameConfig.erizoController.hostname = ";//default value: 'Config.erizoController.port = 8080;//default value:8080//Use True if clients communicate with Erizocontroller over SSLConfig.erizoController.ssl =true;//default Value:falseConfig.erizoController.sslKey= '/home/xxx/licode/mycert_chen/host.key '; Config.erizoController.sslCert= '/home/xxx/licode/mycert_chen/host.cert ';

　　

4. Modify the erizoctroller.js to support HTTPS

varFs=require (' FS ');varHTTP = require (' http ');varHttps=require (' https ');varConfig = require ('./... /.. /licode_config '); Global.config= Config | | {};if(GLOBAL.CONFIG.ERIZOCONTROLLER.SSL) {varOptions ={Key:fs.readFileSync (GLOBAL.config.erizoController.sslKey). toString (), Cert:fs.readFileSync (global.c    Onfig.erizoController.sslCert). toString ()}; varServer =https.createserver (options);}Else    varServer = Http.createserver ();

5. Modify the chrome plugin licode/erizo_controller/erizoclient/extras/ Chrome-extension/manifest.json, and install it in Chrome . 

"Externally_connectable":

{

"Matches": ["*://192.168.0.2/*"]

   },

6. Modify the extensinid,script.js and erizo.js .  Externid can be viewed in the chrome plugin settings dev mode. 

7.Openhttps://192.168.0.2:3004link to add Trust. Then openHttps://192.168.0.2:8080/socket.io, added toChromethe trust list. EspeciallySocket.ioIt is important to note that if you do not add trust, you cannot useScreen sharingfunction, returnUnsafe  Answer error insecureResponse

The realization of screen sharing function based on Licode demo