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

Source: Internet
Author: User
Tags pfx file

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.