Build a customer service system step-by-step (6) Chrome desktop Sharing

This article describes how to use WEBRTC to achieve desktop sharing under chrome. Because it is necessary to use HTTPS to access the line, so in passing also introduced how to use the SSL certificate.

1 Chrome Extensions

• Download the extension sample first:

Https://github.com/otalk/getScreenMedia/tree/master/chrome-extension-sample

or Http://yunpan.cn/cHfwnrZcG2hsH access password 1cf9

• Open the Manifest.json file and modify the following:

"Content_scripts": [{
"JS": ["Content.js"],
"Matches": ["https://localhost:*/*" ]
}],

• Load Extension Program

Open Chrome, enter chrome://extensions/to open chrome extensions, and load them in the order:

2 Sharing Desktops

Shared Desktop Method:

Webrtc.sharescreen ()

To stop sharing a desktop method:

Webrtc.stopscreenshare ()

////Desktop Sharingvarbutton =Document. getElementById (' Screensharebutton '), Setbutton =function(BOOL) {//button.innertext = bool? ' Share Screen ': ' Stop sharing ';$ (' #screenShareButton '). attr (' value ', bool?            ' Share screen ': ' Stop sharing '); };setbutton (true);functionScreenshare () {if(Webrtc.getlocalscreen ())        {Webrtc.stopscreenshare (); Setbutton (true); }Else{Webrtc.sharescreen (function(ERR) {if(ERR) {Setbutton (true); }Else{Setbutton (false);    }        }); }}

.

3 native display of shared content

This machine displays:

//local screen obtained    function (VIDEO) {        //video.onclick = function () {        //    video.style.width = video.videowidth + ' px ';        //    video.style.height = video.videoheight + ' px ';        //};        Video.classname = ' Localvideo ';        document. getElementById (' Localscreencontainer '). appendchild (video);        $ (' #localScreenContainer '). Show ();    });

Personally feel that the machine is not necessary to enlarge the shared content when clicked, so the above click event commented out.

Remove Display:

//local screen removed    function (VIDEO) {        document. getElementById (' Localscreencontainer '). removechild (video);        $ (' #localScreenContainer '). Hide ();    });

.

4 Receiving desktop Sharing

Receive Desktop Sharing:

//A peer video has been addedWebrtc.on (' videoadded ',function(Video, peer) {Console.log (' video added ', peer);varRemotes =Document. getElementById (' remotes ');if(remotes) {varcontainer =Document. createelement (' div ');//container.classname = ' Videocontainer ';container.id = ' Container_ ' + webrtc.getdomid (peer); Container.appendchild (video);//Suppress ContextMenuVideo.oncontextmenu =function() {return false;            }; Video.classname = ' Remotevideos ';//Resize the video on clickVideo.onclick =function() {launchfullscreen (video); };//Show the ice connection state            if(Peer && peer.pc) {varConnstate =Document. createelement (' div ');                Connstate.classname = ' ConnectionState ';                Container.appendchild (connstate); Peer.pc.on (' Iceconnectionstatechange ',function(event) {Switch(peer.pc.iceConnectionState) { Case' Checking '://connstate.innertext = ' Connecting to peer ... ';                             Break; Case' Connected ': Case' Completed '://on caller side                            //$ (vol). Show ();                            //connstate.innertext = ' Connection established. ';                             Break; Case' Disconnected '://connstate.innertext = ' disconnected. ';                             Break; Case' Failed '://connstate.innertext = ' Connection failed. ';                             Break; Case‘closed‘://connstate.innertext = ' Connection closed. ';                             Break;            }                });        } remotes.appendchild (container); }    });

Where remotes is a div that is used to place shared desktops and videos of each other, and when clicking on a small shared desktop graph, maximize:

function Launchfullscreen (Element) {
if (Element.requestfullscreen) {
Element.requestfullscreen ();
} else if (Element.mozrequestfullscreen) {
Element.mozrequestfullscreen ();
} else if (Element.msrequestfullscreen) {
Element.msrequestfullscreen ();
} else if (Element.webkitrequestfullscreen) {
Element.webkitrequestfullscreen ();
}
}

Similarly, when the other person stops sharing, the display is removed:

//A peer was removed    function (Video, peer) {        console.log (' video removed ', peer);        var document. getElementById (' remotes ');        var document. getElementById (peer?) ' Container_ ' + webrtc.getdomid (peer): ' Localscreencontainer ');        if (Remotes && el) {            remotes.removechild (EL);        }    });

5 Commissioning

With the Web project selected, press F4 to open the properties panel:

Modify SSL enabled to True, and then it will generate an SSL URL for your project yourself, and you can use HTTPS to test desktop Sharing:

Click the Share button to bring up the sharing dialog, which can choose to share the entire screen or a single program:

With a shared content selected, a small image is displayed under native local video:

Looking at each other, remote video also shows a small image:

Click on this remote map to display the other side's desktop sharing in full screen:

6 Release 6.1 Modify the Manifest.json file to change the Localhsot to the domain name on the server

"Content_scripts": [{
"JS": ["Content.js"],
"Matches": [ https://www.gwjg.com:*/* ]
}],

6.2 Adding an SSL certificate

Because HTTPS must be used, the following Red Fork is displayed as soon as it is opened:

Once the certificate is installed, it will be displayed as normal:

To request an SSL certificate:

Https://buy.wosign.com/free/freessl.html?lan=cn#ssl

Apply for success on the above website and download the certificate. Unzip and copy the PFX file in the ' for IIS ' directory to the server.

Open the server certificate in IIS:

To import a certificate:

To bind a Web site to a certificate:

Build a customer service system step by step

.

Build a customer service system step-by-step (6) Chrome desktop Sharing